📖 Understanding Headings

HTML provides six levels of headings, from <h1> (most important) to <h6> (least important). Headings create a document outline, similar to how a book has chapters, sections, and subsections.

Heading Hierarchy Example

<h1>Main Page Title (Only one per page!)</h1>
    <h2>Major Section</h2>
        <h3>Subsection</h3>
            <h4>Sub-subsection</h4>
                <h5>Minor point</h5>
                    <h6>Fine detail</h6>
            

Visual Result

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

⚠️ SEO & Accessibility Rule: Never skip heading levels (e.g., jumping from <h2> to <h4>). Screen readers and search engines rely on proper heading hierarchy to understand your content structure.

💡 Best Practice: Use only one <h1> per page. It should describe the main topic of the entire page, like a book title.

📝 Paragraphs and Line Breaks

The <p> tag defines a paragraph. Browsers automatically add space before and after paragraphs.

Basic Paragraphs

<p>This is the first paragraph. It can contain multiple sentences and will wrap automatically when the line is too long for the browser window.</p>

<p>This is the second paragraph. Notice how browsers add space between paragraphs automatically.</p>

Line Breaks vs. Paragraphs

Use <br> for line breaks within the same paragraph (like in an address or poem). Do not use <br> to create space between paragraphs — that's what <p> is for.

<p>
    Ethioweb.net<br>
    Addis Ababa, Ethiopia<br>
    P.O. Box 1234
</p>
            

Horizontal Rules

The <hr> tag creates a horizontal line to separate thematic breaks in content:

<p>Chapter 1: The Beginning</p>
<hr>
<p>Chapter 2: The Journey</p>
            

💡 Semantic Note: In HTML5, <hr> represents a thematic break (a change of topic), not just a visual line. Screen readers announce it as a separator.

💪 Text Emphasis and Formatting

HTML provides semantic tags for text emphasis. These tell browsers and screen readers why text is special, not just how it should look.

Strong vs. Bold

Tag	Meaning	Use When	Default Look
`<strong>`	Strong importance	Text is critically important (e.g., warnings, key points)	Bold
`<b>`	Bring attention	Text should stand out visually (no special meaning)	Bold

Emphasis vs. Italic

Tag	Meaning	Use When	Default Look
`<em>`	Emphasis	Text should be stressed when read aloud	Italic
`<i>`	Alternative voice	Technical terms, foreign words, thoughts, ship names	Italic

Other Useful Text Tags

<p>
    <mark>Highlighted text</mark> for search results or key terms.<br>
    <small>Fine print, copyright, legal text</small><br>
    <del>Deleted text</del> and <ins>inserted text</ins><br>
    <sub>Subscript</sub> like H<sub>2</sub>O<br>
    <sup>Superscript</sup> like E=mc<sup>2</sup>
</p>
            

💡 Golden Rule: Prefer semantic tags (<strong>, <em>) over presentational tags (<b>, <i>). They provide meaning for screen readers and search engines.

✏️ Exercise 3.1: Format a Blog Article

Your Task

Create article.html and format the following content properly using HTML:

Title: "The History of the Internet" (use proper heading level)
Introduction paragraph about how the internet began
Section: "Key Milestones" with subsections for:
- 1969: ARPANET (make the year <strong>)
- 1989: World Wide Web (make the year <strong>)
- 1993: First Web Browser (make the year <strong>)
A horizontal rule separating sections
Section: "The Future" with a paragraph containing <em> for emphasis
A <small> footer with copyright text

📝 Module 3 Quiz

🎯 Module Summary

✅ Use <h1> through <h6> for proper document hierarchy
✅ Only one <h1> per page
✅ Use <p> for paragraphs, <br> for line breaks within text
✅ Prefer <strong> and <em> over <b> and <i>
✅ <hr> represents a thematic break

← Previous Module Next: Module 4 →