A Brief Introduction to HTML

an orange cake is sitting on the table with water pouring from it and a arrow in the middle

Note: this page has been created with the use of AI. Please take caution, and note that the content of this page does not necessarily reflect the opinion of Cratecode.

When diving into the world of web development, HTML is the very first thing you'll encounter. HTML, or HyperText Markup Language, is the backbone of every website, serving as the language that provides structure and meaning to web content. HTML is a markup language, meaning it uses elements, known as tags, to define the different parts of a webpage.

HTML Elements and Tags

HTML elements are the building blocks of a webpage, consisting of opening and closing tags, with content sandwiched between them. For example, the <p> and </p> tags create a paragraph element, like so:

<p>This is a paragraph of text.</p>

Some elements, such as images or line breaks, don't require closing tags. They are called self-closing elements. An example is the <img> element:

<img src="example-image.jpg" alt="An example image">

Basic Structure of an HTML Document

An HTML document starts with a <!DOCTYPE html> declaration at the very top. This tells the browser that the document is an HTML5 document. Next, we have the opening and closing <html> tags which encompass the entire HTML code.

Within the <html> tags, there are two main sections: <head> and <body>. The <head> section contains metadata (information about the document) and links to external resources like stylesheets and scripts. The <body> section contains the actual content of the webpage, such as text, images, and links.

Here is a basic example of an HTML document structure:

<!DOCTYPE html>
<html>
    <head>
        <title>My First HTML Page</title>
    </head>
    <body>
        <h1>Welcome to my website!</h1>
        <p>This is a paragraph of text.</p>
    </body>
</html>

Common HTML Elements

There are numerous HTML elements used to create various types of content. Here are some of the most common ones:

  • Headings: <h1> to <h6> represent headings, with <h1> being the largest and <h6> being the smallest.
  • Paragraph: <p> defines a paragraph of text.
  • Anchors: <a> creates a hyperlink to other webpages, files, or email addresses.
  • Lists: <ul> for unordered (bulleted) lists, <ol> for ordered (numbered) lists, and <li> for list items.
  • Images: <img> is used to embed images into a webpage.
  • Tables: <table> creates a table, with <tr> for table rows, <th> for table headers, and <td> for table data cells.

Conclusion

This brief introduction should give you a basic understanding of what HTML is and how it's used to create websites. As you continue exploring web development, you'll encounter more advanced HTML elements, as well as other languages like CSS and JavaScript, which work together with HTML to create fully functional, interactive, and visually appealing websites.

Hey there! Want to learn more? Cratecode is an online learning platform that lets you forge your own path. Click here to check out a lesson: Making Websites (psst, it's free!).

Similar Articles