Lesson Outcomes

After completing this lesson, learners will be able to:

• Identify different HTML text elements.
• Explain how text is structured in HTML.
• Use headings and paragraphs correctly.
• Apply basic text formatting tags.
• Understand the importance of readable content.

Overview

Text is one of the most important parts of any web page. HTML provides various elements to structure and format text so that it is clear, readable, and meaningful.

Using proper text elements helps:

• Organise content
• Improve readability
• Enhance user experience
• Support accessibility

This lesson introduces the basic HTML tags used for displaying and formatting text.

1. Text Elements in HTML

HTML provides different elements to display text content.

Common text elements include:

• Headings
• Paragraphs
• Inline text formatting

These elements help organise and present information clearly.

2. Headings

Headings are used to define titles and section headings.

HTML provides six levels of headings:

• <h1> → Main heading
• <h2> → Subheading
• <h3> → Smaller heading
• <h4> → Smaller heading
• <h5> → Smaller heading
• <h6> → Smallest heading

Example

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>

Key Points

• <h1> is the most important heading
• <h6> is the least important
• Headings help structure content

3. Paragraphs

Paragraphs are used to display blocks of text.

The <p> tag is used for paragraphs.

Example

<p>This is a paragraph of text.</p>

Key Points

• Used for writing content
• Automatically adds spacing
• Improves readability

4. Text Formatting Tags

HTML provides tags to format text.

4.1 Bold Text

• <strong> → Important text
• <b> → Bold text

Example:

<strong>Important</strong>

4.2 Italic Text

• <em> → Emphasised text
• <i> → Italic text

Example:

<em>Emphasised text</em>

4.3 Line Break

• <br> → Adds a line break

Example:

Line 1<br>Line 2

4.4 Horizontal Line

• <hr> → Adds a horizontal line

Example:

<hr>

5. Organising Text Content

Text should be organised properly for clarity.

Good practices include:

• Using headings for sections
• Writing clear paragraphs
• Keeping content structured
• Avoiding long blocks of text

Benefits

1. Easier reading
2. Better navigation
3. Improved user experience

6. Importance of Text Structure

Proper text structure is important because it:

• Improves readability
• Helps users understand content
• Supports accessibility tools
• Enhances search engine optimisation (SEO)

Key Notes

• HTML uses tags to structure and format text.
• Headings range from <h1> to <h6>.
• Paragraphs are created using <p>.
• Formatting tags include <strong>, <em>, <br>, and <hr>.
• Proper text structure improves readability and usability.
• Organised content enhances user experience.