<FullStackCamp>

Lesson 2: The Structure of an HTML Document

In the previous part, we learned about the basics of HTML and CSS. Now, we’ll dive deeper into the structure of an HTML document and the fundamental elements that make up a webpage.

The Structure of an HTML Document

An HTML document consists of several essential elements that define its structure. These elements include the doctype declaration, the <html> element, the <head> element, and the <body> element.

  1. Doctype Declaration: At the beginning of an HTML document, you’ll find the doctype declaration. It tells the browser which version of HTML the document is using. For HTML5, the doctype declaration is
    <!DOCTYPE html>.
  2. <html> Element: The <html> element is the root element of an HTML document. It contains all other elements within the document, and it should include a lang attribute to specify the language of the document’s content (e.g., lang="en" for English).
  3. <head> Element: The <head> element is a container for metadata about the document, such as the title, character encoding, and external resources like stylesheets and scripts. It does not display content on the webpage.
  4. <body> Element: The <body> element contains the actual content of the webpage, such as text, images, links, and multimedia. This is what users see and interact with when they visit your website.

Code Example:

Here’s a simple example of an HTML document with the correct structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Webpage</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to My Webpage</h1>
  <p>This is a paragraph of text.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</body>
</html>

In this example, we’ve added a <link> element inside the <head> section to include an external stylesheet (styles.css). We’ve also added an unordered list (<ul>) with list items (<li>) inside the <body>.

Actionable Work:

Now that you understand the structure of an HTML document, try to create a well-structured HTML file based on the example above. You can use the previous exercise’s file or create a new one.

  1. Add more content to your webpage, such as a navigation menu with links (<nav> and <a> elements), an image gallery (<figure> and <img> elements), and a footer (<footer> element).
  2. Organize your content using semantic HTML elements, such as <header>, <article>, and <section>.

In the next part of Lesson 1, we’ll learn how to create a simple HTML page from scratch, incorporating the concepts we’ve covered so far.