Lesson 2: HTML Document Structure

Learning goals: By the end, you'll know every part of an HTML page, how elements nest, and how to write a clean page skeleton from memory.

Every page has two halves

Both sit inside the root <html> element.

The standard page skeleton

htmlCopy<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>My First Web Page</title>  
  </head>  
  <body>  
    <h1>Hello, world!</h1>  
    <p>This is my first complete HTML page.</p>  
  </body>  
</html>  
Try:Agent|Desktop

Part by part

• <!DOCTYPE html> tells the browser this is modern HTML5. It must be the very first line.
• <html lang="en"> is the root that wraps everything. lang states the page language, which helps screen readers and search engines.
• <meta charset="UTF-8"> makes letters, symbols and emoji display correctly.
• <meta name="viewport" ...> makes the page scale properly on phones.
• <title> is the text on the browser tab and in search results.
• <body> holds all visible content.

The family tree: parents, children and siblings
HTML is a hierarchy, like a family tree.

htmlCopy<body>  
  <h1>Title</h1>  
  <p>Some <strong>bold</strong> text.</p>  
</body>  
Try:Agent|Desktop

• <body> is the parent of <h1> and <p>.
• <h1> and <p> are siblings.
• <strong> is a child of <p> and a descendant of <body>.

Nesting rules

1. Close elements in the reverse order you opened them.
2. Never let elements overlap.
3. Indent each nested level by 2 or 4 spaces so the structure is easy to see.

htmlCopy<!-- Correct -->  
<p>This is <em>important</em>.</p>  
  
<!-- Wrong: tags overlap -->  
<p>This is <em>important.</p></em>  
Try:Agent|Desktop

Block vs. inline elements

Put inline elements inside block elements, not the other way round.

Comments and whitespace

• Comments are notes for humans and are not displayed: <!-- Navigation starts here -->
• Browsers collapse extra spaces and blank lines into a single space, so spacing in your code doesn't change how the page looks.

Common mistakes

• Placing visible content in <head>
• Having more than one <body> or <h1>-less pages with no clear title
• Forgetting <title>
• Leaving out lang or charset
• Misnesting tags, such as <p><strong>text</p></strong>

Key takeaways

• Every page has a <!DOCTYPE>, an <html> root, a <head> and a <body>.
• <head> is for information about the page and <body> is for visible content.
• Elements nest in a parent/child hierarchy and must close in the correct order.
• Block elements stack vertically, while inline elements flow within text.

Exercises

1. Label the parts. In the skeleton above, which elements are children of <head>?
   Answer: the two <meta> elements and <title>.
2. Spot the errors. Fix this code:

   htmlCopy<html>  
     <head>  
       <h1>My Page</h1>  
     </head>  
     <body>  
       <p>Welcome <strong>friend</p></strong>  
     </body>  
   Try:Agent|Desktop

   
   Hints: missing DOCTYPE, <h1> belongs in <body>, no <title>, and <strong> and <p> are misnested.
3. Build it. Create structure.html with the full skeleton. Set the title to "My Structure Practice", add an <h1>, and add two paragraphs, one containing a <strong> word.
4. Challenge. Draw the family tree of your page on paper. Mark which elements are parents, children and siblings.

Lesson 2 checkpoint

• I can write the page skeleton from memory.
• I know what goes in <head> and what goes in <body>.
• I can nest elements correctly.
• I can tell block elements from inline elements.