Web · HTML Document Structure
HTML Document Structure
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Introduction to HTML Document Structure
Every HTML document follows a standard structure that helps browsers understand and display the content correctly. Let's explore the basic structure of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Let's break down the key parts:
- The
<!DOCTYPE html>
declaration tells the browser this is an HTML5 document
- The
<html>
element is the container for all other HTML elements
- The
<head>
element contains meta-information about the document (explained below)
- The
<title>
element specifies the title of the document (shown in browser tabs)
- The
<body>
element contains the visible content of the page
Proper Nesting
HTML elements must be properly nested - meaning that elements must be closed in the reverse order of how they were opened.
Meta-information?
Meta-information are data that are not displayed on the page, but provide information about the page. Such as title, author, viewport settings. Browsers and search engines use this information to better understand the page.
Exercise 2 — HTML Structure Elements and Their Purpose
Match each HTML element with its correct purpose in the document structure:
Items to match
• <!DOCTYPE html>
• <html>
• <head>
• <body>
Definitions
• Declares the document type and HTML version
• Root element that contains all other HTML elements
• Contains meta-information about the document
• Contains the visible content of the page
Exercise 3 — Head vs Body: Where Does It Go?
Which of the following elements should be placed in the
<head>
section of an HTML document?
Options
• ```<title>My Codémon Collection</title>```
• ```<p>Welcome to my website!</p>```
• ```<h1>Codémon Types</h1>```
• ```<img src="codemon.jpg" alt="Codémon">```
Hint : Think about which elements are visible to users on the page versus elements that provide information about the page itself.
Exercise 4 — Complete the Basic HTML Structure
Fill in the missing parts to create a complete and valid HTML document structure:
<!____>
<____>
<____>
<title>My Codémon Guide</title>
</____>
<____>
<h1>Favorite Codémon</h1>
<p>Aquachu is a water type Codémon.</p>
</____>
</html>
Options: DOCTYPE html html head head body body
Hint : Remember the basic structure: DOCTYPE, html, head, and body. Each opening tag needs a corresponding closing tag.
Exercise 5 — Proper Nesting of HTML Elements
Proper nesting is crucial in HTML. Elements must be closed in the reverse order they were opened.
Think of it like stacking and unstacking boxes - the last one you put on the stack is the first one you take off.
<div>
<p>
This is <strong>properly</strong> nested.
</p>
</div>
Incorrect nesting example:
<div>
<p>
This is <strong>improperly nested.
</p></strong>
</div>
Why Proper Nesting Matters
Improper nesting can lead to unpredictable rendering in browsers. Modern browsers try to fix nesting errors, but they might not always interpret your code as intended.
Exercise 6 — Spot the Error in HTML Structure
Which of the following HTML code snippets contains a structural error?
Options
• <!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
</head>
</html>
• <!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>
• <!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>Hello world!</p>
</body>
</html>
• <!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>
Hint : Look carefully at the opening and closing tags. Are they all properly matched? Is there any tag that's opened but closed incorrectly?
Exercise 7 — Closing Tags in the Right Order
Complete this simple HTML document by adding the closing tags in the correct order. Remember that HTML elements must be closed in the reverse order they were opened.
<!DOCTYPE html>
<html>
<head>
<title>My First Codémon Page____
____
<body>
<h1>Welcome____
<p>This is a page about Aquachu____
____
____
Options: </title> </head> </h1> </p> </body> </html>
Hint : Remember the nesting rule: the last element you open must be the first one you close. Tags must be closed in the reverse order they were opened.