Web · HTML Document Structure
Headings and Paragraphs
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Introduction to HTML Headings
HTML headings are used to define the structure and hierarchy of your content. They range from
<h1>
(most important) to
<h6>
(least important).
<!DOCTYPE html>
<html>
<body>
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>
</body>
</html>
Notice how each heading gets progressively smaller. This visual hierarchy helps readers understand the structure of your content.
Best Practices for Headings
None of those are mandatory, simply advices:
- Use only one <h1> per page (usually for the main title)
- Don't skip heading levels (e.g., don't go from h1 to h3)
- Use headings for structure, not for making text bigger
- Keep headings concise and descriptive
Exercise 2 — Choosing the Right Heading Level
You're creating a page about different Codémon types. Which heading would be most appropriate for the main title of the content of the page?
Options
• ```<h1>Codémon Types Guide</h1>```
• ```<h3>Codémon Types Guide</h3>```
• ```<h6>Codémon Types Guide</h6>```
• ```<title>Codémon Types Guide</title>```
Hint : Think about the hierarchy of headings and which one should be used for the main title of a page.
Exercise 3 — Heading Hierarchy and Document Structure
Headings create a natural hierarchy in your document. Think of them like an outline or table of contents for your page:
<!DOCTYPE html>
<html>
<body>
<h1>Codémon Guide</h1>
<h2>Water Types</h2>
<h3>Aquachu</h3>
<h2>Fire Types</h2>
<h3>Pyrochu, Fyrochu</h3>
</body>
</html>
Notice how the headings create a logical structure:
- The
<h1>
is the main title
- The
<h2>
elements are major sections
- The
<h3>
elements are subsections under their respective
<h2>
sections
Semantic Meaning
Headings aren't just about visual appearance. They also provide semantic meaning to your document that helps search engines and assistive technologies (like screen readers) understand your content structure.
Exercise 4 — Complete the Heading Structure
Complete the HTML code with the appropriate heading tags to create a proper hierarchical structure for this Codémon page:
<!DOCTYPE html>
<html>
<body>
____Codémon Training Guide____
____Basic Training____
</body>
</html>
Options: <h1> </h1> <h2> </h2> <h3> </h3>
Hint : Think about the main title of the page and the section titles. What heading levels would create a proper hierarchy?
Exercise 5 — Introduction to HTML Paragraphs
In HTML, paragraphs are defined with the
<p>
tag. Each paragraph element creates a block of text with space before and after it.
<!DOCTYPE html>
<html>
<body>
<h1>About Aquachu</h1>
<p>Aquachu is a water-type Codémon. It's known for its powerful water abilities.</p>
<p>Trainers love Aquachu because it's friendly and easy to train.</p>
<p>In battles, Aquachu has an advantage against fire-type Codémons.</p>
</body>
</html>
Notice how each paragraph is separated by a small gap. The browser automatically adds this spacing between paragraphs.
White Space in HTML
HTML ignores multiple spaces and line breaks in your code. If you write multiple spaces, HTML will display just one. If you want to add more spaces or line breaks in your displayed text, you'll need to use special elements or CSS.
Exercise 6 — HTML White Space Handling
Given the following HTML code, how will the text appear in the browser?
<p>
Aquachu is a water-type
Codémon.
</p>
Options
• Aquachu is a water-type Codémon.
• Aquachu is a water-type
Codémon.
• Aquachu
is
a
water-type
Codémon.
• AquachusawaterDtypeCodémon.
Hint : Think about how HTML handles white space (spaces, tabs, line breaks) within elements.
Exercise 7 — Text Formatting with Semantic Elements
HTML provides semantic elements to format text within paragraphs. The most common ones are:
-
<strong>
- To display text in bold (strong importance)
-
<em>
- To display text italicized (emphasized)
<!DOCTYPE html>
<html>
<body>
<h1>Training Tips</h1>
<p>Aquachu is <strong>very effective</strong> against fire-type Codémons.</p>
<p>Remember to <em>always</em> keep your Codémon well-rested.</p>
<p>It is <strong><em>crucial</em></strong> to train regularly for best results.</p>
</body>
</html>
These elements don't just change the appearance of text; they also add meaning. This helps readers and search engines understand the emphasis and importance of different parts of your content.
Semantic vs. Visual Formatting
Older HTML used <b> for bold and <i> for italic, but these are purely visual. Modern HTML prefers <strong> and <em> because they convey meaning, not just appearance. When you want text to be important, use <strong>; when you want emphasis, use <em>.
Exercise 8 — Format Text with Semantic Elements
Complete the HTML code by adding the appropriate semantic formatting elements:
- First sentence should be bold (strong importance).
- Second sentence should be emphasized (italics).
- Third sentence should be both bold and emphasized.
<!DOCTYPE html>
<html>
<body>
<p>____This should be bold____</p>
<p>____This should be emphasized____</p>
<p>____This should be both bold and emphasized____</p>
</body>
</html>
Options: <strong> </strong> <em> </em> <strong><em> </em></strong>
Hint : Think about which elements should be paragraphs and which text needs emphasis or strong importance.
Exercise 9 — Match HTML Elements with Their Purpose
Match each HTML element with its correct purpose or description:
Items to match
• <h1>
• <p>
• <strong>
• <em>
Definitions
• Main heading of a page
• Block of text with spacing before and after
• Text with strong importance (usually bold)
• Emphasized text (usually italic)
Exercise 10 — Proper Heading Hierarchy
Which of the following represents the correct hierarchical structure for headings in an HTML document?
Options
• <h1>Codémon Types</h1>
<h2>Water Types</h2>
<h3>Aquachu</h3>
<h2>Fire Types</h2>
<h3>Pyrochu</h3>
• <h3>Codémon Types</h3>
<h2>Water Types</h2>
<h1>Aquachu</h1>
<h2>Fire Types</h2>
<h1>Pyrochu</h1>
• <h1>Codémon Types</h1>
<h3>Water Types</h3>
<h5>Aquachu</h5>
<h3>Fire Types</h3>
<h5>Pyrochu</h5>
• <h6>Codémon Types</h6>
<h5>Water Types</h5>
<h4>Aquachu</h4>
<h5>Fire Types</h5>
<h4>Pyrochu</h4>
Hint : Consider the proper hierarchy of headings. The main title should be h1, followed by section headings (h2), then subsection headings (h3).