← Back to Curriculum

HTML Document Structure

📚 Lesson 2 of 20 ⏱️ 20 min

HTML Document Structure

20 min

Every HTML document follows a specific structure to ensure browsers can read and display it correctly. This structure is often referred to as the 'boilerplate'.

The very first line of an HTML document must be the Document Type Declaration: `<!DOCTYPE html>`. This tells the browser that the document is written in HTML5. Without it, browsers might render the page in 'quirks mode', leading to inconsistent results.

The root element of the page is `<html>`. All other elements are nested inside it. It's good practice to include the `lang` attribute (e.g., `<html lang="en">`) to specify the language of the page for search engines and screen readers.

Inside the `<html>` element, there are two main sections: `<head>` and `<body>`.

The `<head>` section contains metadata about the document that isn't displayed on the page itself. This includes the page title (shown in the browser tab), character set encoding (usually UTF-8), and links to stylesheets or scripts.

The `<body>` section contains everything that is visible to the user: headings, paragraphs, images, links, and more. If it's on the screen, it's in the body.

Key Concepts

  • The `<!DOCTYPE html>` declaration prevents quirks mode.
  • The `<html>` element is the root of the document.
  • The `<head>` contains metadata (title, encoding).
  • The `<body>` contains visible content.
  • Nesting is crucial: elements must be properly contained within their parents.

Learning Objectives

Master

  • Writing the standard HTML5 boilerplate
  • Understanding the purpose of DOCTYPE
  • Differentiating between head and body content
  • Setting the page title and character encoding

Develop

  • Attention to detail in code structure
  • Understanding of browser rendering processes
  • Best practices for document setup

Tips

  • Always start with `<!DOCTYPE html>`.
  • Use a code editor snippet (like '!' in VS Code) to generate the boilerplate.
  • Set the `lang` attribute for accessibility.
  • Keep your `<head>` organized with meta tags first, then title, then styles.

Common Pitfalls

  • Placing visible content (like <h1>) inside the `<head>`.
  • Forgetting the `<!DOCTYPE html>` declaration.
  • Improper nesting (e.g., closing `<body>` before closing its children).
  • Missing the `<title>` tag, which is bad for SEO and UX.

Summary

  • HTML documents require a specific structure.
  • DOCTYPE tells the browser version.
  • Head is for metadata, Body is for content.
  • Proper structure ensures cross-browser compatibility.

Exercise

Create a complete HTML document structure. Include a title 'My First Page' and a heading in the body.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
</head>
<body>

  <h1>Welcome to my website</h1>
  <p>This is a properly structured HTML document.</p>

</body>
</html>

Exercise Tips

  • Don't forget the DOCTYPE!
  • Make sure head and body are siblings (next to each other), not nested.
  • Check that all tags are closed properly.

Code Editor

Output