Cambridge Notes, Past Papers, Revision Questions

ICT 0417 – Website Authoring: Applying Text Tags

21. Website Authoring

Learning Objective

By the end of this lesson you will be able to apply the following HTML tags to text within a web page so that the text displays the predefined styles:

<h1> – Main heading

<h2> – Secondary heading

<h3> – Tertiary heading

<p> – Paragraph

<i> – Italic text

Why Use Semantic Tags?

Semantic tags give meaning to the structure of a page. Search engines, assistive technologies and browsers can interpret the content correctly, improving accessibility and SEO.

Basic Tag Syntax

All HTML tags follow the pattern <tagname>content</tagname>. The opening tag may contain attributes, but for this lesson we focus on the content only.

Examples of Each Tag

1. Heading Tags

The heading tags create a hierarchy of importance. Only one <h1> should appear per page.


<h1>Welcome to My Website</h1>
<h2>About the Author</h2>
<h3>Contact Details</h3>

2. Paragraph Tag

The <p> tag defines a block of text. Browsers automatically add a margin before and after each paragraph.


<p>This is a simple paragraph that explains the purpose of the page.</p>

3. Italic Tag

The <i> tag renders text in an italic style, typically used for titles of works, foreign words, or emphasis.


<p>The novel <i>Pride and Prejudice</i> was written by Jane Austen.</p>

Putting It All Together – Sample Web Page

The following example demonstrates how the tags combine to create a simple, well‑structured page.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Page</title>
</head>
<body>
<h1>My First Web Page</h1>
<h2>Introduction</h2>
<p>Welcome to my website. Here you will find information about my hobbies and projects.</p>
<h3>My Favourite Book</h3>
<p>I enjoy reading <i>The Hobbit</i> by J.R.R. Tolkien.</p>
</body>
</html>

Practice Activity

Create a new HTML file called myprofile.html.

Insert a <h1> with your name.

Add a <h2> titled “Biography”.

Write a short paragraph about yourself using <p>.

Include a sub‑heading <h3> called “Favourite Quote”.

Place the quote inside a paragraph and use <i> to italicise the quote.

Validate your page using the W3C validator to ensure it is correct HTML5.

Common Mistakes to Avoid

Using more than one <h1> on a single page.

Skipping heading levels (e.g., going from <h1> directly to <h3>).

Forgetting to close tags, which can cause unexpected rendering.

Placing block‑level tags (like <p>) inside inline tags (like <i>).

Assessment Checklist

Skill	Demonstrated?	Comments
Use of `<h1>` for main title
Correct hierarchy of `<h2>` and `<h3>`
Paragraphs created with `<p>`
Italic text using `<i>`
HTML validates as HTML5

Suggested diagram: A simple page layout showing where each heading level and paragraph would appear.

Be able to apply tags to text within a web page to display predefined styles including h1, h2, h3, p, i