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

21. Website Authoring – Applying Text Tags

Learning Objective

By the end of this lesson you will be able to:

  • Use the fundamental HTML tags that give predefined styles to text (<h1>, <h2>, <h3>, <p>, <i>).

  • Explain the three web‑development layers (content, presentation, behaviour) and where each tag belongs.

  • Identify the purpose of the head section and all essential meta‑tags required for the IGCSE exam.

  • Distinguish between block‑level and inline elements and apply <div> and <span> correctly.

  • Insert hyperlinks, images, tables and lists using correct HTML syntax.

  • Link an external CSS stylesheet and recognise a minimal CSS rule set.

  • Produce a valid HTML5 page that meets the Cambridge IGCSE ICT assessment criteria.

Why Use Semantic Tags?

Semantic tags describe the *meaning* of the content rather than just its appearance. This benefits:

  • Search engines – clearer structure improves SEO.

  • Assistive technologies – screen readers can navigate headings and sections accurately.

  • Browsers – default styling is applied consistently.

  • Examiners – a well‑structured page scores higher for layout and accessibility.

1. The Three Web‑Development Layers

LayerPurpose (exam‑relevant)Typical Files
Content (HTML)Defines the meaning and structure of the page.index.html, about.html
Presentation (CSS)Controls visual appearance – colours, fonts, layout.css/style.css
Behaviour (JavaScript)Adds interactivity (not required for the IGCSE exam, but good to recognise).js/script.js

2. The <head> Section – Content Layer

The <head> contains information that is *not* displayed on the page but is essential for browsers, search engines and examiners.

TagPurpose (exam‑relevant)Example
<meta charset="UTF-8">Specifies character encoding – prevents garbled text.
<meta charset="UTF-8">
<meta name="description" content="…">Short summary for search engines (SEO).
<meta name="description" content="Simple IGCSE ICT example page">
<meta name="keywords" content="HTML, IGCSE, web authoring">Key words for search engines – optional but often examined.
<meta name="keywords" content="HTML, IGCSE, web authoring">
<meta name="author" content="Your Name">Identifies the page creator – useful for e‑safety records.
<meta name="author" content="Alex Taylor">
<meta name="viewport" content="width=device-width, initial-scale=1">Ensures the page scales correctly on mobile devices (responsive design).
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>…</title>Page title shown in the browser tab and search results.
<title>My First Web Page</title>
<link rel="stylesheet" href="css/style.css">Links an external CSS file – separates presentation from content.
<link rel="stylesheet" href="css/style.css">

3. Presentation Layer – A Minimal CSS Example

Even though the exam focuses on HTML, a short CSS snippet shows the link between the two layers.

/* css/style.css */
body {
font-family: Arial, sans-serif;
line-height: 1.5;
margin: 20px;
}
h1 { color: #2A6EBB; }
h2, h3 { color: #2A6EBB; margin-top: 1.2em; }
p { margin-bottom: 1em; }

In the HTML file the stylesheet is attached with the <link> tag shown above.

4. Behaviour Layer (Brief Note)

JavaScript can add interactivity (e.g., form validation). For the IGCSE you only need to recognise that behaviour is *optional* and that a <script src="…"> element would belong in the <head> or just before </body>.

5. Basic Body Tags – Structure Layer

5.1 Headings

Headings create a hierarchy of importance. Only one <h1> should appear per page, and heading levels must not be skipped.

<h1>My First Web Page</h1>
<h2>Introduction</h2>
<h3>My Favourite Book</h3>

5.2 Paragraphs

The <p> tag defines a block of text. Browsers automatically add vertical margins.

<p>Welcome to my website. Here you will find information about my hobbies and projects.</p>

5.3 Italic Text

The <i> tag renders text in italics – commonly used for titles, foreign words or emphasis.

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

5.4 Block‑level vs Inline Elements

  • Block‑level elements start on a new line and occupy the full width (e.g., <div>, <p>, headings).

  • Inline elements flow within a line of text (e.g., <span>, <i>, <a>).

Example using <div> and <span>:

<div class="intro">
<p>My name is <span class="highlight">Alex</span> and I love coding.</p>
</div>

6. HTML5 Semantic Elements

Semantic tags give meaning to sections of a page and improve accessibility.

  • <header> – introductory content or navigation.

  • <nav> – a set of navigation links.

  • <section> – a thematic grouping of content.

  • <article> – self‑contained composition (e.g., blog post).

  • <footer> – closing information, copyright, contact details.

Simple example:

<header>
<h1>My Portfolio</h1>
</header>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
</ul>
</nav>
<section id="about">
<h2>About Me</h2>
<p>…</p>
</section>
<footer>
<p>© 2026 Alex Taylor</p>
</footer>

7. Accessibility Checklist (Exam‑Relevant)

  • Declare the page language: <html lang="en">.

  • Provide meaningful alt text for every <img>.

  • Use semantic headings (<h1>–<h6>) in proper order.

  • Prefer semantic sectioning elements (<header>, <nav>, <section>, <footer>).

  • When opening links in a new tab, include rel="noopener" for security.

  • Ensure colour contrast is sufficient (if CSS is used).

8. Hyperlinks – The <a> Tag

Link typeHTMLKey attribute(s)
External website
<a href="https://www.bbc.co.uk">BBC</a>
href
Internal page (anchor)
<a href="index.html#contact">Contact section</a>
href with #id
Email link
<a href="mailto:alex@example.com">Email me</a>
mailto:
Open in new tab (secure)
<a href="https://www.wikipedia.org" target="_blank" rel="noopener">Wikipedia</a>
target="_blank" + rel="noopener"

9. Images – The <img> Tag

Images are empty elements (no closing tag). Always provide alt text for accessibility and e‑safety.

<img src="images/photo.jpg" alt="Student working on a laptop" width="300">

  • src – path to the image file (use a folder such as images/).

  • alt – concise description; essential for screen readers.

  • width/height – optional, helps the browser reserve space.

  • For responsive design use CSS, e.g., img { max-width: 100%; height: auto; }.

10. Tables – Presenting Tabular Data

Use tables only for data, never for layout.

<table>
<thead>
<tr>
<th>Day</th>
<th>Subject</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>Mathematics</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Science</td>
</tr>
</tbody>
</table>

  • <thead> and <tbody> improve accessibility and make validation easier.

  • Use colspan or rowspan only when the data truly requires merged cells.

11. Lists – Organising Information

List typeTagWhen to use
Ordered list<ol>Steps, rankings, any sequence where order matters.
Unordered list<ul>Bulleted items, features, non‑sequential information.
Definition list<dl> with <dt> (term) and <dd> (definition)Glossaries or term‑definition pairs.

Example of an ordered list:

<ol>
<li>Turn on the computer</li>
<li>Open the web browser</li>
<li>Navigate to the assignment page</li>
</ol>

12. File‑Structure & Project Organisation

Keeping files in logical folders reduces broken links and makes validation easier.

project-folder/
│
├─ index.html
├─ about.html
│
├─ css/
│   └─ style.css
│
└─ images/
├─ photo.jpg
└─ logo.png

When linking, use relative paths (e.g., href="css/style.css" or src="images/photo.jpg").

13. Validation & Testing (AO3 – Evaluate)

  • Run the page through the W3C Markup Validation Service. A green “Document checking completed” means the page is valid HTML5.

  • Common validation errors to watch for:

    • Missing closing tags (e.g., <p> without </p>).

    • Multiple <h1> elements.

    • Incorrect nesting of block‑level inside inline elements.

    • Absent alt attributes on <img>.

  • Take a screenshot of the successful validation report – this can be attached as evidence for the assessment.

14. Putting It All Together – Sample Page

The example below demonstrates every tag covered in this lesson. It is fully valid HTML5 and would pass the W3C validator.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Simple IGCSE ICT example page">
<meta name="keywords" content="HTML, IGCSE, web authoring">
<meta name="author" content="Alex Taylor">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My First Web Page</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>My First Web Page</h1>
</header>
<nav>
<ul>
<li><a href="#intro">Introduction</a></li>
<li><a href="#book">Favourite Book</a></li>
<li><a href="#links">Useful Links</a></li>
</ul>
</nav>
<section id="intro">
<h2>Introduction</h2>
<p>Welcome to my website. Here you will find information about my hobbies and projects.</p>
</section>
<section id="book">
<h3>My Favourite Book</h3>
<p>I enjoy reading <i>The Hobbit</i> by J.R.R. Tolkien.</p>
</section>
<section id="links">
<h3>Useful Links</h3>
<ul>
<li><a href="https://www.bbc.co.uk" target="_blank" rel="noopener">BBC</a></li>
<li><a href="mailto:alex@example.com">Email Alex</a></li>
</ul>
</section>
<section>
<h3>My Photo</h3>
<img src="images/photo.jpg" alt="Alex smiling while coding" width="300">
</section>
<section>
<h3>Weekly Timetable</h3>
<table>
<thead>
<tr><th>Day</th><th>Subject</th></tr>
</thead>
<tbody>
<tr><td>Monday</td><td>Mathematics</td></tr>
<tr><td>Tuesday</td><td>Science</td></tr>
</tbody>
</table>
</section>
<section>
<h3>Steps to Create This Page</h3>
<ol>
<li>Set up the <head> with meta‑tags and a title.</li>
<li>Add headings, paragraphs and italic text.</li>
<li>Insert a link, an image and a table.</li>
<li>Validate the page using the W3C validator.</li>
</ol>
</section>
<footer>
<p>© 2026 Alex Taylor</p>
</footer>
</body>
</html>

15. Practice Activity

  1. Create a new file called myprofile.html.

  2. Inside the <head> add the required meta‑tags (charset, description, keywords, author, viewport), a <title>, and link to css/style.css.

  3. Insert a <h1> containing your full name.

  4. Add a <h2> titled “Biography”.

  5. Write a short paragraph about yourself using <p>.

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

  7. Place the quote inside a paragraph and italicise it with <i>.

  8. Below the quote, create an unordered list of three hobbies.

  9. Insert an image of yourself (or a placeholder) with appropriate alt text.

  10. Validate the page at the W3C Validator and correct any errors. Save a screenshot of the successful validation report.

16. Common Mistakes to Avoid (Exam Tips)

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

  • Skipping heading levels (e.g., jumping from <h1> to <h3>).

  • Leaving tags unclosed – every opening tag must have a matching closing tag (except empty elements like <img>).

  • Placing block‑level elements (<p>, <div>) inside inline elements (<i>, <span>).

  • Omitting alt text for images – a frequent mark loss in the exam.

  • Forgetting rel="noopener" when using target="_blank" (security requirement).

  • Incorrect file paths – always check that href and src point to the right folder.

17. Assessment Checklist

SkillDemonstrated?Comments
Use of <h1> for main title
Correct hierarchy of <h2> and <h3>
Paragraphs created with <p>
Italic text using <i>
Block‑level <div> and inline <span> used appropriately
Meta‑tags (charset, description, keywords, author, viewport) present
External CSS linked correctly
Images include meaningful alt text
All links open correctly; external links use rel="noopener"
Page validates with no errors on W3C validator