HTML - Headings, Paragraphs & Text Formatting

2.2 Headings, Paragraphs & Text Formatting

HTML provides several elements for organising and formatting textual content. Headings create a clear document hierarchy, paragraphs organise information into readable blocks, and text-formatting elements add meaning or emphasis to specific portions of text.

1. HTML Headings

HTML provides six levels of headings, from <h1> to <h6>. They are used to create a logical hierarchy within a webpage.

2. Basic Heading Example

<h1>Learning HTML</h1>
<h2>HTML Basics</h2>
<h3>HTML Elements</h3>
<h4>Heading Elements</h4>
<h5>Heading Examples</h5>
<h6>Additional Information</h6>

Each heading communicates a different level in the document hierarchy.

3. Heading Hierarchy

Headings should normally follow a logical hierarchy rather than being selected merely because of their visual size.

<h1>Web Development</h1>

    <h2>HTML</h2>

        <h3>HTML Elements</h3>

        <h3>HTML Attributes</h3>

    <h2>CSS</h2>

        <h3>Selectors</h3>

        <h3>Properties</h3>

4. The <h1> Element

The <h1> element represents the primary heading of a page or document.

<h1>Introduction to Web Development</h1>

A well-structured page should have a clear primary heading. The exact number of <h1> elements can depend on the document structure, but authors should avoid using headings simply for visual styling.

5. HTML Paragraphs

The <p> element is used to define a paragraph of text.

<p>
HTML is the standard markup language used to structure
content on webpages.
</p>

Browsers normally display paragraphs as separate blocks of text, with spacing between them determined by the browser's default styles or CSS.

6. Multiple Paragraphs

Separate paragraphs should be represented using separate <p> elements.

<p>
HTML provides the structure of a webpage.
</p>

<p>
CSS controls the presentation and appearance of the webpage.
</p>

<p>
JavaScript can add behaviour and interactivity.
</p>

7. The <br> Element

The <br> element inserts a line break within the same block of text.

<p>
CodeStep Academy<br>
Web Development Course<br>
HTML Fundamentals
</p>

The <br> element is useful when a line break is part of the content itself, such as an address or poem.

8. The <hr> Element

The <hr> element represents a thematic break between sections of content.

<h2>HTML</h2>
<p>HTML provides webpage structure.</p>

<hr>

<h2>CSS</h2>
<p>CSS controls presentation.</p>

The <hr> element is not simply a decorative horizontal line. It represents a thematic separation in the content.

9. Text Formatting in HTML

HTML provides elements that can give text semantic meaning, emphasis or special presentation.

10. <strong> — Strong Importance

The <strong> element indicates that its content has strong importance, seriousness or urgency.

<p>
<strong>Warning:</strong>
Save your work before closing the application.
</p>

Browsers commonly render <strong> text in bold, but its important feature is its semantic meaning, not simply its visual appearance.

11. <em> — Emphasis

The <em> element indicates emphasis. Browsers commonly display emphasized text in italics.

<p>
You <em>must</em> complete the assignment today.
</p>

The semantic meaning of <em> is more important than its default italic appearance.

12. <b> and <i>

<b> — Bring Attention

The <b> element draws attention to text without implying that the text has greater importance.

<p>
The next topic is <b>HTML Forms</b>.
</p>

<i> — Alternate Voice or Style

The <i> element represents text in an alternate voice or mood, or text conventionally presented in italics, such as a technical term or foreign phrase.

<p>
The term <i>responsive design</i> is widely used in web development.
</p>

13. <mark> — Highlighted Text

The <mark> element represents text that is highlighted or marked because it is relevant in the current context.

<p>
Search result:
<mark>HTML tutorial</mark>
</p>

14. <small> — Smaller Text

The <small> element represents side comments, small print or other text that is typically presented in a smaller form.

<p>
Course Fee: $100
<small>Taxes may apply.</small>
</p>

15. <del> and <ins>

These elements can be used to represent changes to a document.

<del> — Deleted Content

<p>
Original price:
<del>$120</del>
</p>

<ins> — Inserted Content

<p>
New price:
<ins>$99</ins>
</p>

<p>
Course Price:
<del>$120</del>
<ins>$99</ins>
</p>

16. <sub> — Subscript

The <sub> element displays text as subscript.

<p>Water: H<sub>2</sub>O</p>

<p>Carbon dioxide: CO<sub>2</sub></p>

The output represents chemical formulas such as H₂O and CO₂.

17. <sup> — Superscript

The <sup> element displays text as superscript.

<p>x<sup>2</sup> + y<sup>2</sup></p>

<p>10<sup>th</sup> Anniversary</p>

Superscript is commonly useful for mathematical expressions, ordinal indicators and certain references.

18. Combining and Nesting Formatting Elements

HTML elements can be nested when their meanings are logically related.

<p>
<strong>Important:
<em>Read the instructions carefully.</em>
</strong>
</p>

19. Complete Example — Article Structure

<h1>Introduction to Web Development</h1>

<p>
Web development involves creating websites and web applications.
</p>

<h2>HTML</h2>

<p>
<strong>HTML</strong> provides the structure of a webpage.
</p>

<h3>Why Learn HTML?</h3>

<p>
HTML is the <em>foundation</em> of web development.
</p>

<p>
Learn <mark>semantic HTML</mark> to create meaningful documents.
</p>

<hr>

<p>
Water is represented as H<sub>2</sub>O.
</p>

<p>
The area of a square can be represented as a<sup>2</sup>.
</p>

20. Semantic HTML vs Visual Formatting

A major principle of modern HTML is to use elements according to their meaning rather than selecting elements only because of their default visual appearance.

21. Common Beginner Mistakes

• Using headings only to make text appear larger.
• Using <br> repeatedly for page layout.
• Forgetting to close HTML elements.
• Incorrectly nesting elements.
• Using <b> when the content actually requires semantic strong importance.
• Using <i> simply because italic text looks attractive.
• Using HTML elements for visual styling that should be handled by CSS.
• Creating a confusing heading hierarchy.

22. Practical Activity

Create a webpage about Web Development using the following requirements:

1. Use one <h1> for the page title.
2. Use at least two <h2> headings.
3. Use at least two <h3> headings.
4. Add three paragraphs.
5. Use <strong> for important information.
6. Use <em> for emphasis.
7. Use <mark> to highlight a keyword.
8. Use <sub> to display H₂O.
9. Use <sup> to display x².
10. Use <hr> to create a thematic break.

23. Exam Questions

Question 1

Which HTML element is used to define the most important heading of a webpage?

Question 2

Which HTML element is used to define a paragraph?

Question 3

Differentiate between <strong> and <b>.

Question 4

Which element is used to display text as subscript?

Question 5

Which element is used to highlight text that is relevant in the current context?

Question 6

What is the purpose of the <hr> element?

24. Interview Questions

1. How many heading levels are available in HTML?

2. What is the difference between <strong> and <b>?

3. What is the difference between <em> and <i>?

4. Why should CSS be used instead of repeated <br> elements for spacing?

5. Can headings be selected only according to their visual size?

25. Competency-Based Question

A developer creates a webpage and uses <h1>, <h2> and <h4> headings, skipping <h3>. The developer says that this is acceptable because the headings look correct on the screen.

Is this a good approach? Explain your answer.

26. Think Like a Web Developer

Consider the following webpage structure:

<h1>Online Learning Platform</h1>

<h2>Courses</h2>

<h3>HTML</h3>
<h3>CSS</h3>
<h3>JavaScript</h3>

<h2>Resources</h2>

<h3>Tutorials</h3>
<h3>Practice Exercises</h3>

Identify the hierarchy of this document.

29. Exam Tips

• Remember that HTML headings range from <h1> to <h6>.
• Do not confuse <strong> with <b>.
• Do not confuse <em> with <i>.
• Remember <sub> for H₂O and <sup> for x².
• Remember that <br> creates a line break, while <p> creates a paragraph.
• For practical questions, write complete opening and closing tags wherever required.
• For semantic HTML questions, focus on the meaning of the element rather than its default appearance.

30. Frequently Asked Questions (FAQs)

Can I use <h1> just to make text large?

No. Heading elements should represent the structure of the document. Use CSS when you need to change the size of text.

What is the difference between <p> and <br>?

<p> defines a paragraph, whereas <br> inserts a line break within content.

Is <b> the same as <strong>?

No. Although both are commonly displayed in bold, their semantic purposes are different. <strong> indicates strong importance, while <b> simply draws attention to text.

Is <i> the same as <em>?

No. <em> represents emphasis, whereas <i> represents an alternate voice, mood or stylistic offset.

Which tag is used for H₂O?

Use <sub>: H₂O.

Which tag is used for x²?

Use <sup>: x².