📘 Module 1: The Modern HTML Framework

Building the skeleton of every website – the right way!

📖 Module Introduction

Welcome to Module 1 of your HTML Level Two journey! In Level One, you learned how to write basic tags like <h1>, <p>, and <img>. You made your first web pages. That was like learning the alphabet.

Now, in Level Two, we are going to learn how to build proper, professional, and modern web pages – the kind that make search engines happy, that work on phones and computers, and that everyone can use – even people who cannot see well.

In this module, we will look at the HTML5 boilerplate – that is the special starting code that every modern webpage needs. We will also learn about semantic elements – these are special tags that give meaning to our content. And we will set up our developer tools so that we can check our work like real web developers.

Think of this module as learning how to use the right tools and the right blueprint before you build a house. You would not build a house without a good plan, right? In the same way, you should not build a website without a modern HTML framework!

🎯 Learning Objectives

By the end of this module, you will be able to:

• Explain what the HTML5 boilerplate is and why we use it.
• Write a complete HTML5 boilerplate from memory.
• Tell the difference between semantic tags (like <header>) and generic tags (like <div>).
• Use semantic tags to structure a webpage like a pro.
• Open the browser’s “Inspect Element” tool and use it to check your HTML.
• Validate your HTML using the W3C validator – just like real developers do.
• Understand why semantics matter for SEO (that means helping Google find your page) and for accessibility (helping people with disabilities use your page).

📚 Warm-up Story: Tunde’s Big Website Mistake

Tunde was a 13-year-old who loved football and computers. He had learned some HTML from his big sister and wanted to build a website for his neighbourhood football team – the Lagos Lions.

He quickly wrote some HTML using only <div> tags. He put everything inside <div> – the team name, the match scores, the pictures of players, and even the footer. When he opened it in his browser, it looked okay. But when his sister looked at the code, she laughed.

“Tunde,” she said, “this is like putting your shoes in the fridge and your milk in the wardrobe! You are using the wrong containers. The browser can read it, but it does not understand what is important. Google will not know that this part is the main story, and a blind person using a screen reader will be completely lost.”

Tunde felt sad. But his sister smiled and said, “Don’t worry. Today I will teach you the modern HTML framework. It is like having a proper tool belt. Once you learn this, you will build websites that are strong, smart, and friendly to everyone.”

And that is exactly what we are going to learn in this module. Let us begin!

🧩 Main Lessons

Lesson 1: What is a “Framework”?

Definition: A framework is a basic structure that you build upon. It is like the skeleton of a house – the beams and posts that hold everything up.

Why important: Without a good framework, your website might look messy, break on different devices, or be hard for search engines to read.

Simple explanation: Imagine you are drawing a person. You start with a stick figure – that is the framework. Then you add clothes, hair, and details. The HTML framework is like that stick figure for your web page.

Real-life example: When builders construct a house in Lagos, they first lay the foundation and put up the main pillars. Those pillars are the framework. Everything else – the walls, the roof, the windows – comes later.

School example: Before writing an essay, you make an outline: Introduction, Body, Conclusion. That outline is your framework.

Home example: Your family might have a weekly timetable – Monday is laundry, Tuesday is market day. That timetable is the framework for your week.

Nigerian example: In a typical Nigerian market, the stalls are arranged in rows – foodstuffs here, clothes there. That arrangement is the framework that helps shoppers find things easily.

Illustration (ASCII):

        HTML Framework
        ==============
        +------------------+
        |  <!DOCTYPE>      |   ← declaration
        |  <html>          |   ← root
        |    <head>        |   ← metadata (info about page)
        |    </head>       |
        |    <body>        |   ← visible content
        |    </body>       |
        |  </html>         |
        +------------------+
    

Lesson 2: The HTML5 Boilerplate – Your Starter Kit

Definition: The HTML5 boilerplate is a standard template of HTML code that includes all the essential tags a webpage needs. It is like a “starter kit” for building websites.

Why important: It ensures that your page works on all browsers, looks good on phones, and is ready for modern web features.

Simple explanation: Think of it like the “base” in a game of football – it is where you start from. Every player knows where the base is.

Real-life example: When you buy a new phone, it comes with some pre-installed apps – that is like a boilerplate. You can add more apps later.

School example: Your teacher gives you a worksheet with your name, date, and subject at the top. That is the boilerplate for your homework.

Home example: Your mum’s recipe for jollof rice has the same first steps – wash the rice, chop the onions, etc. That is the boilerplate for cooking jollof.

Nigerian example: In Nigeria, when you start a letter, you write “Dear Sir/Madam” – that is a boilerplate opening.

Here is the actual HTML5 boilerplate:

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>My Awesome Page</title>
        </head>
        <body>
            <!-- all visible content goes here -->
        </body>
        </html>
    

Lesson 3: The <!DOCTYPE html> Declaration

Definition: <!DOCTYPE html> is a special instruction that tells the browser, “Hey, this is an HTML5 document. Please read it the right way.”

Why important: Without it, the browser might use an older, more confusing way to read your page. This can cause your page to look broken.

Simple explanation: It is like telling your teacher, “I am presenting my project in English” – so the teacher knows which language to listen for.

Real-life example: Before a football match, the referee checks that both teams are wearing the right kits. The <!DOCTYPE> is like that referee check – it makes sure the browser is ready for your page.

School example: When you submit an assignment, you write “Mathematics” or “English” at the top so your teacher knows which subject it is.

Home example: You might say “Mummy, I am going to school” – that is a declaration of your activity.

Nigerian example: In Nigeria, before a traditional ceremony, the chief announces, “We are starting!” – that is the declaration.

Illustration:

        Browser reads your page:
        -----------------------
        <!DOCTYPE html>   ← "Aha! This is HTML5!"
            then reads the rest of the page normally.
    

Lesson 4: The <html> Tag and the lang Attribute

Definition: The <html> tag is the root (the very top) of your HTML document. Everything else goes inside it. The lang attribute tells the browser the main language of your page.

Why important: The lang attribute helps screen readers pronounce words correctly and helps search engines know what language your page is in.

Simple explanation: The <html> tag is like the cover of a book – it holds all the pages inside. The lang attribute is like the label that says “This book is in English.”

Real-life example: A book has a cover that holds everything together. The cover might say “English Edition” – that is the lang attribute.

School example: Your exercise book has your name and class on the cover.

Home example: A folder that holds all your school notes has a label.

Nigerian example: In Nigeria, many products have labels in English and maybe Hausa or Yoruba – the lang attribute is like saying “Primary language: English.”

Code example:

        <html lang="en">   ← "en" means English
            ... all your content ...
        </html>
    

Lesson 5: The <head> Section – Information About Your Page

Definition: The <head> section holds metadata – that is data about your page. This information is not visible on the page itself, but it is very important.

Why important: It tells the browser (and search engines) important things like the character set, the title, and how to make your page look good on phones.

Simple explanation: The <head> is like the “brain” of your page – it does a lot of thinking behind the scenes.

Real-life example: When you go to a doctor, the doctor looks at your medical file before seeing you. That file is like the <head>.

School example: Before a lesson, your teacher reads the lesson plan – that plan is like the <head> information.

Home example: Your parent might check the weather forecast before deciding what to wear – that forecast is like metadata.

Nigerian example: Before travelling from Lagos to Abuja, you check the bus schedule – that schedule is like the <head> information that helps you plan.

Illustration:

        <head>
        +-------------------------------+
        |  meta charset                 | → tells browser to use Unicode
        |  meta viewport                | → helps with mobile screens
        |  title                        | → shows in browser tab
        +-------------------------------+
        </head>
    

Lesson 6: Charset and Viewport Meta Tags

Definition: charset="UTF-8" tells the browser to use a character set that includes all letters, numbers, and emojis. viewport tells the browser how to scale your page on mobile phones.

Why important: Without these, your page might show weird symbols instead of letters, and it might look tiny on a phone.

Simple explanation: Charset is like a translator – it helps the browser understand every character you type. Viewport is like a zoom lens – it makes sure your page fits nicely on any screen.

Real-life example: A good translator can convert Yoruba, Hausa, and Igbo into English – that is like UTF-8. Viewport is like adjusting your car mirrors so you can see the road properly.

School example: Your teacher might use a projector. The projector must be adjusted to fit the screen – that is the viewport.

Home example: When you watch a movie on your phone, you can zoom in or out – that is like the viewport.

Nigerian example: In Nigeria, we use the Naira sign ₦. UTF-8 makes sure that ₦ shows up correctly, not as a strange box.

Code:

        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    

Lesson 7: The <title> Tag – The Name of Your Page

Definition: The <title> tag gives your webpage a name that appears in the browser tab and in search engine results.

Why important: It is one of the most important things for SEO (Search Engine Optimisation) – it tells Google what your page is about.

Simple explanation: The title is like the name on your school notebook – it tells everyone what is inside.

Real-life example: A movie has a title – “Lion King”. That title tells you what to expect. Your webpage title does the same.

School example: Your project has a cover page with a title – “My Science Project”.

Home example: Your mum might label food containers – “Jollof Rice” or “Stew” – that is the title of that container.

Nigerian example: A popular Nigerian movie like “Wives on Strike” has a title that tells you what the story is about.

Code:

        <title>Lagos Lions – Official Website</title>
    

Lesson 8: Semantic Elements – The Meaning Makers

Definition: Semantic elements are HTML tags that clearly describe their meaning to both the browser and the developer. For example, <header> means “this is the top part of my page”.

Why important: They help search engines understand your content and help people with disabilities navigate your page.

Simple explanation: Instead of using generic boxes (<div>), you use special labels like <header>, <nav>, and <footer> – it is like labelling your school bag compartments: “books”, “lunch”, “stationery”.

Real-life example: A library has sections: Fiction, Non-fiction, Children’s books. That is semantic organisation.

School example: Your timetable says “Mathematics”, “English”, “Break” – each has a meaning.

Home example: Your kitchen has a cupboard for plates, a drawer for cutlery – each has a specific purpose.

Nigerian example: A market in Lagos has sections – “Foodstuffs”, “Clothing”, “Electronics” – that is semantic layout!

Illustration:

        Semantics in HTML:
        -----------------
        <header>   →   top part (logo, title)
        <nav>     →   navigation links
        <main>    →   the main content
        <article> →   a self-contained piece of content
        <section> →   a group of related content
        <aside>   →   side content (like ads or related links)
        <footer>  →   bottom part (copyright, contact)
    

Lesson 9: The <header> and <footer> Elements

Definition: <header> is the top section of a page or a section. <footer> is the bottom section.

Why important: They organise your page into clear top and bottom areas.

Simple explanation: <header> is like the head of a person – it is at the top. <footer> is like the feet – they are at the bottom.

Real-life example: A newspaper has a header (the name of the newspaper) and a footer (the page number and date).

School example: Your exercise book has your name at the top (header) and the class at the bottom (footer).

Home example: A letter has the date at the top (header) and your signature at the bottom (footer).

Nigerian example: A Nigerian wedding invitation has the couple’s names at the top (header) and the venue address at the bottom (footer).

Code:

        <header>
            <h1>Lagos Lions FC</h1>
            <p>The pride of Lagos</p>
        </header>

        <footer>
            <p>© 2026 Lagos Lions. All rights reserved.</p>
        </footer>
    

Lesson 10: The <nav> Element – Your Website’s Compass

Definition: <nav> is used for the main navigation links on your page – the links that help users move around your site.

Why important: It tells the browser, “These are the most important links for getting around.” Screen readers can also jump straight to the navigation.

Simple explanation: <nav> is like the map or signpost in a mall that shows you where the shops are.

Real-life example: A university campus has signposts that show “Library”, “Cafeteria”, “Lecture Halls” – that is navigation.

School example: Your school has a notice board with arrows pointing to different classrooms.

Home example: In your house, you have doors that lead to the kitchen, bedroom, and toilet – those are like navigation links.

Nigerian example: In a typical Nigerian bus park, there are signs saying “Abuja”, “Ibadan”, “Benin” – that is navigation for travellers.

Code:

        <nav>
            <a href="index.html">Home</a>
            <a href="about.html">About Us</a>
            <a href="matches.html">Matches</a>
            <a href="contact.html">Contact</a>
        </nav>
    

Lesson 11: The <main> Element – The Star of the Show

Definition: <main> holds the main content of your page – the unique stuff that is not repeated across pages (like sidebars or footers).

Why important: It helps screen readers jump straight to the main content, and it tells search engines, “This is the most important part of the page.”

Simple explanation: Think of a movie – the <main> is the movie itself. The trailers and advertisements are like the sidebar or footer.

Real-life example: In a newspaper, the main story on the front page is the main content. The weather forecast on the side is extra.

School example: In your textbook, the main chapter is the lesson – the glossary at the back is extra.

Home example: At dinner, the main dish is the jollof rice – the salad and drinks are extra.

Nigerian example: At a Nigerian wedding, the couple is the main focus – the guests and decorations are around them.

Code:

        <main>
            <article>
                <h2>Our Big Win against Ibadan United</h2>
                <p>The Lagos Lions scored three goals...</p>
            </article>
        </main>
    

Lesson 12: The <section> and <article> Elements

Definition: <section> groups related content together. <article> is for self-contained content that could stand alone, like a blog post or a news story.

Why important: They help break your page into logical blocks, making it easier to read and style.

Simple explanation: A <section> is like a chapter in a book. An <article> is like a complete story within that chapter.

Real-life example: In a magazine, each story is an article. The magazine is divided into sections like “Fashion”, “Sports”, “Food”.

School example: Your textbook is divided into sections (units) and each unit has articles (sub-topics).

Home example: Your family photo album might have sections for each holiday, and each holiday has separate articles (like Christmas 2023).

Nigerian example: A Nigerian newspaper like “The Punch” has sections like “News”, “Sports”, “Business”. Each section has articles.

Code:

        <section>
            <h2>Match Reports</h2>
            <article>
                <h3>Lagos Lions vs Ibadan United</h3>
                <p>The Lions won 3-1...</p>
            </article>
            <article>
                <h3>Lagos Lions vs Abuja Eagles</h3>
                <p>A tough match ended in a draw...</p>
            </article>
        </section>
    

Lesson 13: The <aside> Element – The Sidekick

Definition: <aside> holds content that is related to the main content but not part of it – like sidebars, ads, or related links.

Why important: It tells the browser, “This is extra information that might be useful, but it is not the main thing.”

Simple explanation: Think of a superhero movie – the main hero is the main content; the sidekick is the <aside> – helpful, but not the star.

Real-life example: On a news website, the main story is in the middle, and there is a sidebar with “Most Read” or “Ads” – that is an aside.

School example: In your notebook, the main notes are in the centre, and you might have little margin notes – those are like asides.

Home example: In your living room, the main sofa is the main furniture, and a small side table is the aside.

Nigerian example: In a Nigerian restaurant, the main food is the main content, and the small pepper sauce container on the side is the aside.

Code:

        <aside>
            <h3>Related Links</h3>
            <ul>
                <li><a href="#">Buy Lagos Lions Jersey</a></li>
                <li><a href="#">Upcoming Matches</a></li>
            </ul>
        </aside>
    

Lesson 14: Putting It All Together – A Semantic Webpage

Definition: A semantic webpage uses the right tags for the right parts, making it clear, organised, and accessible.

Why important: It makes your page beautiful to read, easy for search engines to understand, and friendly to people with disabilities.

Simple explanation: It is like having a well-organised wardrobe – shirts go here, trousers there, shoes here – everything has its place.

Real-life example: A well-designed library is easy to navigate because it has clear sections and signs.

School example: A well-written essay has paragraphs, headings, and a clear structure – that is semantic writing.

Home example: Your kitchen is organised with labelled containers – that is semantic organisation.

Nigerian example: A well-organised market in Lagos has sections clearly marked – that is semantic market design!

Illustration (complete semantic structure):

        <body>
        +------------------------------------------+
        |  <header>                                |
        |    <h1>Lagos Lions</h1>                |
        |    <nav> Home | About | Matches </nav> |
        |  </header>                               |
        +------------------------------------------+
        |  <main>                                  |
        |    <section>                             |
        |      <article> ... </article>          |
        |      <article> ... </article>          |
        |    </section>                            |
        |    <aside> Related links </aside>      |
        |  </main>                                 |
        +------------------------------------------+
        |  <footer>                                |
        |    © 2026 Lagos Lions                    |
        |  </footer>                               |
        +------------------------------------------+
        </body>
    

Lesson 15: Developer Tools – Your Secret Weapon

Definition: Developer Tools (DevTools) are built into your browser. They let you inspect the HTML, CSS, and JavaScript of any webpage.

Why important: They help you see exactly what is happening on your page, find mistakes, and learn from other websites.

Simple explanation: It is like having X-ray vision for websites – you can see the code behind the page.

Real-life example: A mechanic lifts the bonnet of a car to see the engine – DevTools lets you look under the bonnet of a webpage.

School example: In science class, you use a microscope to see tiny things – DevTools is like a microscope for code.

Home example: Your mum might open the back of a remote control to check the batteries – that is inspecting the device.

Nigerian example: In Nigeria, a mechanic in Nnewi might check the engine of a bus – DevTools is like that for websites.

How to open DevTools:

• Chrome: Right-click → Inspect, or press Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac).
• Firefox: Right-click → Inspect.
• Edge: Right-click → Inspect.

📖 Key Vocabulary

• Framework: A basic structure that you build upon.
• Boilerplate: A standard template that is used as a starting point.
• Declaration: A statement that tells the browser something important.
• Semantic: Having meaning. Semantic tags describe their purpose.
• Metadata: Data about data – information about your webpage.
• Charset: The set of characters (letters, numbers, symbols) the browser should use.
• Viewport: The visible area of a web page on a device.
• SEO: Search Engine Optimisation – helping people find your page on Google.
• Accessibility: Making your website usable by everyone, including people with disabilities.
• Validate: To check that your code is correct and follows the rules.

🧠 Important Concepts

• Separation of concerns: The idea that HTML (structure), CSS (style), and JavaScript (behaviour) should be kept separate.
• Progressive enhancement: Start with a solid HTML foundation, then add CSS and JavaScript to make it better.
• Mobile-first design: Design for small screens first, then add for larger screens.
• Semantic web: Using tags that mean something, so computers and humans understand your content.

🪜 Step-by-step Explanations

How to write a complete HTML5 boilerplate:

1. Open your code editor (like Visual Studio Code).
2. Create a new file and save it as index.html.
3. Type <!DOCTYPE html> on the first line.
4. Add <html lang="en"> on the second line.
5. Inside the <html> tag, add <head> and <body>.
6. Inside <head>, add <meta charset="UTF-8" />.
7. Add <meta name="viewport" content="width=device-width, initial-scale=1.0" />.
8. Add <title>Your Page Title</title>.
9. Inside <body>, add your visible content.
10. Close all your tags properly.

🌍 Real-life Examples

• Example 1: A newspaper uses a header (the name), a main section (the stories), and a footer (the page number).
• Example 2: A shopping mall has a navigation map, sections (stores), and a footer (contact information).
• Example 3: A school website uses a header (school name), navigation (classes, contact), main (news), and footer (address).

🇳🇬 Nigerian Examples

• Example 1: A Nigerian bank website – header (logo and menu), main (account services), footer (contact and legal).
• Example 2: A Lagos real estate site – header (company name), nav (properties, about), main (listings), aside (agent profiles).
• Example 3: A Nigerian food blog – header (blog name), nav (recipes, ingredients), main (recipe articles), footer (social links).

🎮 Fun Examples Children Can Relate To

• Example 1: Your favourite video game character – the header is their name, the main is their quest, the aside is their inventory.
• Example 2: A school project – the header is your name and class, the main is the project content, the footer is your references.
• Example 3: A birthday party – the header is “Happy Birthday”, the main is the party activities, the footer is “Thanks for coming!”

🏠 Everyday Examples

• Example 1: Your school bag – the main compartment holds your books (main), the small pocket holds your lunch (aside), the top flap has your name (header).
• Example 2: Your phone – the home screen is the main, the app drawer is the aside, the settings are the meta information.
• Example 3: Your room – your bed is the main furniture, your desk is the aside, your wardrobe is the navigation.

👨‍👩‍👧 Parent Tips

• Tip 1: Encourage your child to think about structure before they code – just like planning a story.
• Tip 2: Sit with them and inspect a few websites together using DevTools – it is like a treasure hunt for code.
• Tip 3: Remind them that mistakes are okay – even professional developers use validators to check their work.
• Tip 4: Relate HTML semantics to everyday organisation – everything has its place.

💡 Interesting Facts

• Fact 1: The very first website ever built is still online! It was created by Tim Berners-Lee in 1991.
• Fact 2: HTML5 was officially released in 2014, but it is still being updated.
• Fact 3: More than 90% of websites use HTML5 today.
• Fact 4: The <main> element was introduced in HTML5 to help screen readers.

🤔 Did You Know?

• Did you know? That the lang attribute can be set to ha for Hausa, yo for Yoruba, and ig for Igbo? You can build websites in Nigerian languages!
• Did you know? That using semantic HTML can improve your Google ranking? Google loves meaningful tags!
• Did you know? That screen readers read the <title> first – so your title is like a handshake with your visitor.

🧠 Remember This

• 1. Always start with <!DOCTYPE html>.
• 2. Always include the lang attribute in <html>.
• 3. Always include charset and viewport meta tags in <head>.
• 4. Use semantic tags (<header>, <nav>, <main>, etc.) instead of generic <div>.
• 5. Validate your HTML – it is like proofreading your essay.

❌ Common Mistakes

✅ Best Practices

📊 ASCII Illustrations

HTML5 Boilerplate Structure

        +---------------------------+
        |  <!DOCTYPE html>         |
        |  <html lang="en">        |
        |    <head>                |
        |      <meta charset>      |
        |      <meta viewport>     |
        |      <title>...</title> |
        |    </head>               |
        |    <body>                |
        |      (your content)      |
        |    </body>               |
        |  </html>                 |
        +---------------------------+
    

Semantic Layout Flow

        Header
           |
           V
        Navigation
           |
           V
        +------------------+
        |      Main        |
        |  +------------+  |
        |  |  Article   |  |
        |  |  Article   |  |
        |  +------------+  |
        |  |   Aside    |  |
        |  +------------+  |
        +------------------+
           |
           V
        Footer
    

How a Browser Reads Your HTML

        Your HTML file
              |
              V
        Browser receives file
              |
              V
        Reads <!DOCTYPE html> → "Ah, HTML5!"
              |
              V
        Builds the DOM (Document Object Model)
              |
              V
        Renders the page on screen
              |
              V
        🎉 Page is visible!
    

📋 Comparison Tables

Semantic vs. Non-Semantic Tags

Semantic Tag	Non-Semantic Equivalent	What it means
<header>	<div class="header">	Top part of page or section
<nav>	<div class="nav">	Navigation links
<main>	<div class="main">	Main content of the page
<section>	<div class="section">	Group of related content
<article>	<div class="article">	Self-contained content
<aside>	<div class="aside">	Side content (related but extra)
<footer>	<div class="footer">	Bottom part of page or section

Meta Tags Comparison

Meta Tag	Purpose	Example
charset	Sets the character encoding	UTF-8
viewport	Controls layout on mobile	width=device-width, initial-scale=1.0
description	Page summary for search engines	Lagos Lions official website
keywords	Keywords for SEO (less used now)	football, Lagos, Lions
author	Name of the page author	Tunde Adebayo

📚 End-of-Module Summary

❓ Frequently Asked Questions

• Q1: Do I always need to write the whole boilerplate?
  A: Yes! It is the standard starting point. You can save it as a template so you do not have to type it every time.
• Q2: What if I forget the <!DOCTYPE>?
  A: Your page might still work, but it could look different in some browsers. Always include it!
• Q3: Can I use <div> instead of <header>?
  A: You can, but you should not. Semantic tags are better for accessibility and SEO.
• Q4: What does UTF-8 mean?
  A: It is a standard that includes almost all characters from every language, including emojis! 😄
• Q5: Why is the lang attribute important?
  A: It helps screen readers pronounce words correctly and helps search engines know your page’s language.
• Q6: How many times can I use <main> on a page?
  A: Only once! It holds the main content unique to that page.
• Q7: What is the difference between <section> and <article>?
  A: A <section> is a group of related content. An <article> is a self-contained piece that could stand alone.
• Q8: Do I need to know CSS to use semantic HTML?
  A: No! HTML is structure, CSS is style. They work together, but you can write perfect HTML without any CSS.
• Q9: What does “SEO” stand for?
  A: Search Engine Optimisation – it means making your page easy for search engines like Google to find and understand.
• Q10: Why do we use “semantic” tags?
  A: Because they give meaning to your content. They help everyone – people, browsers, and search engines – understand your page better.

🔗 Matching Exercises

Match the tag on the left with its correct description on the right.

Tag	Description
<header>	A. Holds the main navigation links
<nav>	B. Contains the main content of the page
<main>	C. The top part of a page or section
<aside>	D. Self-contained content like a blog post
<article>	E. Side content, like ads or related links
<footer>	F. The bottom part of a page or section

(Answers: 1-C, 2-A, 3-B, 4-E, 5-D, 6-F)

📝 Scenario-based Exercises

👥 Group Activity

Activity: In groups of 3–4 students, choose a local business in your area (like a supermarket, a salon, or a pharmacy). Discuss and write down the semantic structure for that business’s website. Decide together:

• What goes in the <header>?
• What links are in the <nav>?
• What is the <main> content?
• What could be in the <aside>?
• What goes in the <footer>?

Then, draw the layout on paper using boxes and labels.

🧑‍💻 Individual Activity

Activity: Write a complete HTML5 boilerplate from memory. Then, add a <header> with your name, a <nav> with three fake links, a <main> with a short paragraph about your favourite hobby, and a <footer> with “Made with 💖 by [your name]”. Save it as index.html and open it in your browser.

🛠️ Mini Project

📋 Practical Assignment

Assignment: Create a semantic HTML page for your favourite Nigerian food (e.g., Jollof Rice, Egusi Soup, or Suya). Your page should have:

• A <header> with the food name.
• A <nav> with links to “Recipe”, “Ingredients”, “History”.
• A <main> with the recipe steps (use <article> or <section>).
• An <aside> with serving suggestions.
• A <footer> with a fun fact about the food.
• A <figure> with a description of the food.

Submit your HTML file.

🔑 Key Takeaways

• 1. Every modern webpage starts with the HTML5 boilerplate.
• 2. Semantic tags give meaning to your content – they are not just for show.
• 3. Use the right tag for the right job – <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>.
• 4. Developer Tools help you inspect and learn from any website.
• 5. Good HTML is the foundation of a great website – it helps SEO and accessibility.
• 6. Always validate your HTML to catch mistakes early.

💬 Classroom Discussion Questions

• 1. Why do you think it is important to use semantic tags instead of generic <div> tags?
• 2. How would you explain the <main> element to someone who has never coded before?
• 3. Can you think of any other everyday examples that are like a <header>, <nav>, <main>, and <footer>?
• 4. Why do you think Google cares about semantic HTML?
• 5. If you were teaching HTML to a younger student, what would be your favourite analogy for the boilerplate?

🚀 Preparation for Module 2

Congratulations on finishing Module 1! You have built a strong foundation. In Module 2, we will go deeper into Advanced Text & Content Structuring. You will learn about:

• How to use <figure> and <figcaption> for images with captions.
• How to make collapsible content with <details> and <summary>.
• How to use <em>, <strong>, <blockquote>, and <cite> to add meaning to your text.
• How to create definition lists and nested lists.

Before you start Module 2, make sure you can write the complete HTML5 boilerplate without looking it up. Practice it a few times. Also, try to explain semantic tags to a friend or family member – teaching others is the best way to learn!

Keep up the great work. You are on your way to becoming a web developer! 💻🌟

---

Module 1: The Modern HTML Framework • Written with 💖 for young coders in Nigeria and around the world.

📝 Module 2: Advanced Text & Content Structuring

Making your content meaningful, beautiful, and fun!

📖 Module Introduction

Welcome to Module 2 of your HTML Level Two journey! In Module 1, you learned how to build the modern HTML framework. You discovered the boilerplate, the <head> section, and the power of semantic tags like <header>, <nav>, and <footer>.

Now, in Module 2, we are going to dive deep into the content itself – the words, the pictures, the quotes, and the lists. You already know how to write a basic paragraph or a simple list. But now we will learn how to make your content rich, meaningful, and beautiful – the way professional web developers do it.

We will learn about figure and figcaption for adding captions to images. We will explore details and summary to create collapsible content – like a magic box that opens and closes. We will understand the difference between emphasis and strong importance. We will learn how to quote people properly and how to cite sources. And we will build amazing nested lists and definition lists.

Think of this module as learning the art of writing beautiful, meaningful content for the web. It is not just about putting words on a page – it is about giving those words power, meaning, and structure.

Let us begin our adventure into the world of advanced text and content structuring!

🎯 Learning Objectives

By the end of this module, you will be able to:

• Use <figure> and <figcaption> to add captions to images and other media.
• Create collapsible content using <details> and <summary>.
• Tell the difference between <em> and <i> – and know when to use each.
• Tell the difference between <strong> and <b> – and know when to use each.
• Use <blockquote>, <q>, and <cite> to quote sources properly.
• Create definition lists using <dl>, <dt>, and <dd>.
• Build complex nested ordered lists with custom numbering.
• Understand why each of these tags matters for accessibility and SEO.

📚 Warm-up Story: Chidi’s Amazing Recipe Blog

Chidi was a 13-year-old boy who loved cooking. His specialty was Egusi soup – a delicious Nigerian soup made with melon seeds, vegetables, and meat. His friends and family always asked him for the recipe.

One day, Chidi decided to create a recipe blog so that everyone could learn how to make his Egusi soup. He wrote the recipe using simple HTML he learned in Level One. He had headings, paragraphs, and a list of ingredients.

But his big sister, who was a web developer, looked at his blog and said, “Chidi, this is good – but it is basic. You can make it much better! You can add pictures with captions, you can make the steps collapsible, you can emphasise the important parts, and you can even add a definition list for cooking terms.”

Chidi was excited. He spent the whole weekend learning advanced text and content structuring. By the end, his recipe blog was not just a page – it was a masterpiece! People loved it, and his blog became very popular.

In this module, you will learn exactly what Chidi learned. You will learn how to make your content rich, meaningful, and professional. Let us get started!

🧩 Main Lessons

Lesson 1: The <figure> Element – Your Content’s Frame

Definition: The <figure> element is a container that holds media like images, videos, or diagrams – along with a caption that describes them.

Why important: It groups the media and its caption together, so they are always connected. This makes your page more organised and accessible.

Simple explanation: Imagine you have a beautiful picture in a frame. The frame holds the picture and the little label underneath that says what the picture is about. <figure> is the frame, and the label is the <figcaption>.

Real-life example: In a museum, each painting has a frame and a small card next to it with the artist’s name and the title. That card is like a caption.

School example: In your science textbook, diagrams have labels underneath them – those are captions.

Home example: Your family photo album has pictures with little notes like “Christmas 2025” – those are captions.

Nigerian example: In a Nigerian newspaper, photos of events have captions that say “Governor at the Lagos Book Fair” – that is a caption.

Illustration:

        <figure>
        +----------------------------------+
        |   [Your image or media here]     |
        |   <img src="egusi.jpg">        |
        |   <figcaption>                 |
        |     A bowl of delicious Egusi   |
        |     soup with meat and fish.    |
        |   </figcaption>                |
        +----------------------------------+
        </figure>
    

Code example:

        <figure>
            <img src="egusi-soup.jpg" alt="A bowl of Egusi soup" />
            <figcaption>My famous Egusi soup – ready to eat!</figcaption>
        </figure>
    

Lesson 2: The <figcaption> Element – The Label

Definition: <figcaption> is the caption or label for the content inside a <figure>.

Why important: It provides a clear description of the media, which helps people understand it – especially people who cannot see the image.

Simple explanation: The <figcaption> is like the name tag on your school bag. It tells everyone what is inside (or what it is).

Real-life example: In a zoo, each animal enclosure has a sign that says the animal’s name and where it comes from. That sign is like a figcaption.

School example: In your art class, you might put a label under your drawing that says “My Self-Portrait”.

Home example: Your mum might label a jar in the kitchen as “Sugar” – that is a caption for that jar.

Nigerian example: In a Nigerian market, a seller might have a sign that says “Fresh Tomatoes” – that is like a caption for the tomatoes.

Illustration:

        <figure>
            <img src="plantain.jpg" alt="Fried plantain" />
            <figcaption>Sweet fried plantain – a Nigerian favourite!</figcaption>
        </figure>
    

Lesson 3: The <details> Element – The Magic Box

Definition: <details> creates a section that the user can open and close to reveal hidden content.

Why important: It helps you hide extra information that might be too long or distracting. Users can click to see it only when they want to.

Simple explanation: Imagine a magic box that is closed. You can click on it, and it opens to reveal a surprise inside! <details> is like that box.

Real-life example: In a restaurant, the menu might have a “Click to see ingredients” button – that is like the details element.

School example: Your textbook might have “Click to see the answer” for practice questions – that is using details and summary.

Home example: Your family might have a “What’s for dinner?” section that you can click to see the menu.

Nigerian example: On a Nigerian news website, there might be a “Click to read more” section – that is the details element.

Illustration:

        <details>
        +----------------------------------+
        |  <summary>Click to see recipe</summary>   ← visible part
        |  (hidden content appears here)   |
        |  Step 1: Wash the rice...        |
        |  Step 2: Cook the chicken...     |
        +----------------------------------+
        </details>
    

Code example:

        <details>
            <summary>📖 Click to see the full recipe</summary>
            <p>Step 1: Wash the rice thoroughly.</p>
            <p>Step 2: Cook the chicken with spices.</p>
            <p>Step 3: Add the rice and cook until soft.</p>
        </details>
    

Lesson 4: The <summary> Element – The Title of the Box

Definition: <summary> is the clickable heading or title of a <details> element. It is always visible.

Why important: It tells the user what is inside the <details> box before they click it.

Simple explanation: The <summary> is like the title on the cover of a book – it tells you what the book is about before you open it.

Real-life example: A DVD case has a title on the cover – that is the summary. You open the case to see the DVD inside.

School example: Your exercise book has a subject written on the cover – that is like a summary.

Home example: A storage box in your room might have a label that says “Toys” – that is the summary.

Nigerian example: In a Nigerian market, a shop might have a sign that says “Phones and Accessories” – that is like a summary.

Code example:

        <details>
            <summary>🍲 Egusi Soup Recipe (click to expand)</summary>
            <p>Ingredients: melon seeds, vegetables, meat...</p>
        </details>
    

Lesson 5: <em> vs <i> – Emphasis vs Italics

Definition: <em> means emphasis – it changes the meaning of the sentence. <i> just makes the text italic for style.

Why important: <em> tells screen readers to stress the word, which changes how it is understood. <i> is just for visual style (like a book title).

Simple explanation: <em> is like raising your voice to stress a word. <i> is like writing in a special font just for style – it does not change the meaning.

Real-life example: If you say “I really want to go” – the word “really” is stressed. But if you write “The book is called Things Fall Apart” – that is just a title.

School example: Your teacher might say, “You must submit your homework” – that is emphasis. The name of your textbook is in italics.

Home example: Your mum says, “You must finish your vegetables” – that is emphasis. The name of your favourite movie is in italics.

Nigerian example: A Nigerian chef might say, “You must use fresh pepper” – that is emphasis. The name of a restaurant might be in italics.

Illustration:

        <em>I really want to go</em>   → stress on "really"
        <i>Things Fall Apart</i>      → just a book title in italics
    

Code example:

        <p>I <em>really</em> love Egusi soup.</p>
        <p>My favourite book is <i>Things Fall Apart</i>.</p>
    

Lesson 6: <strong> vs <b> – Strong Importance vs Bold

Definition: <strong> indicates that content is very important or urgent. <b> just makes text bold for style.

Why important: <strong> tells screen readers to say it with more force. <b> is just visual – it does not add meaning.

Simple explanation: <strong> is like shouting a warning. <b> is like making text darker to catch your eye – but it is not a warning.

Real-life example: A sign that says “DANGER: DO NOT ENTER” – that is strong. A menu that says “Today’s Special” – that is just bold.

School example: Your teacher writes “This will be on the exam” – that is strong. The title of a chapter is bold – that is just style.

Home example: A note on the fridge says “Milk expires tomorrow!” – that is strong. A recipe title is bold – that is just style.

Nigerian example: A road sign says “SPEED LIMIT 40” – that is strong. A shop name might be in bold – that is just style.

Illustration:

        <strong>DANGER: DO NOT ENTER</strong>  → very important warning
        <b>Today's Special</b>               → just a bold title
    

Code example:

        <p><strong>Warning:</strong> The soup is very hot!</p>
        <p><b>Ingredients:</b> Melon seeds, vegetables, meat.</p>
    

Lesson 7: The <blockquote> Element – Long Quotes

Definition: <blockquote> is used for long quotations – like a whole paragraph from a book or an interview.

Why important: It tells the browser, “This is a quote from someone else.” It usually indents the text and helps with accessibility.

Simple explanation: <blockquote> is like a speech bubble in a comic strip. It shows that these words are coming from someone else.

Real-life example: In a news article, when they quote the President, they put that quote in a blockquote.

School example: In your English essay, you might quote a famous poem – you would put that in a blockquote.

Home example: If your grandma says something wise, you might write it as a quote on the wall.

Nigerian example: A Nigerian newspaper quoting the Governor – “The Governor said, ‘We will build more schools.’”

Illustration:

        <blockquote>
        +------------------------------------------+
        |  "Education is the most powerful weapon   |
        |  which you can use to change the world." |
        |  — Nelson Mandela                        |
        +------------------------------------------+
        </blockquote>
    

Lesson 8: The <q> Element – Short Quotes

Definition: <q> is used for short quotations that are placed inside a sentence.

Why important: It tells the browser that this is a quote, and browsers automatically add quotation marks around it.

Simple explanation: <q> is like a small speech bubble that fits inside a sentence.

Real-life example: Your friend says, “I am coming,” and you tell someone, “My friend said I am coming.”

School example: Your teacher says, “The answer is 42,” and you write in your notes, “The teacher said the answer is 42.”

Home example: Your mum says, “Dinner is ready,” and you tell your sibling, “Mum said dinner is ready.”

Nigerian example: A news headline might say, “The minister said we will fix the roads.”

Code example:

        <p>My friend said <q>I love Egusi soup!</q></p>
    

Lesson 9: The <cite> Element – Giving Credit

Definition: <cite> is used to cite (give credit to) a source – like the title of a book, a movie, a song, or a website.

Why important: It tells the reader where the quote or idea came from. It is like giving thanks to the original author.

Simple explanation: <cite> is like the footnote in a book that says “Source: Wikipedia”.

Real-life example: When you write an essay and you mention a book, you write the book’s title in italics – that is a citation.

School example: In your project, you write “Information from Wikipedia” – that is citing.

Home example: Your dad might say, “As they say in Lion King, ‘Hakuna Matata!’”

Nigerian example: A blog post might say, “According to Punch Newspaper...”

Code example:

        <p>As mentioned in <cite>Things Fall Apart</cite> by Chinua Achebe.</p>
    

Lesson 10: The <abbr> Element – Short Forms

Definition: <abbr> is used for abbreviations – like “HTML”, “CSS”, or “Nigerian”. It can also show the full meaning when you hover over it.

Why important: It helps people understand what the abbreviation means, especially if they are new to the topic.

Simple explanation: <abbr> is like a translation guide – it tells you what the short form stands for.

Real-life example: On a form, you might see “NG” – the title explains that NG stands for Nigeria.

School example: Your teacher writes “Maths” on the board – the title explains that Maths stands for Mathematics.

Home example: Your mum might write “MOH” – the title explains it.

Nigerian example: On a government website, you might see “NYSC” – the title explains it.

Code example:

        <p>I am learning <abbr title="HyperText Markup Language">HTML</abbr>.</p>
    

Lesson 11: Definition Lists – <dl>, <dt>, and <dd>

Definition: A definition list is a list of terms and their definitions. It uses <dl> (the list), <dt> (the term), and <dd> (the definition).

Why important: It is perfect for glossaries, dictionaries, or any time you need to explain a term.

Simple explanation: Think of your school dictionary – it has words and their meanings. A definition list is exactly like that, but on a webpage.

Real-life example: A cooking website might have a definition list for cooking terms – “Blanch: to boil briefly”.

School example: Your science textbook has a glossary at the end – that is a definition list.

Home example: Your family might have a list of nicknames – “Chidi: the jollof master” – that is like a definition list.

Nigerian example: A website about Nigerian food might have a definition list – “Egusi: melon seed soup”.

Illustration:

        <dl>
        +----------------------------------+
        |  <dt>HTML</dt>                  |  ← term
        |  <dd>HyperText Markup Language</dd> |  ← definition
        |  <dt>CSS</dt>                   |
        |  <dd>Cascading Style Sheets</dd> |
        +----------------------------------+
        </dl>
    

Code example:

        <dl>
            <dt>Egusi</dt>
            <dd>A soup made from melon seeds, popular in Nigeria.</dd>
            <dt>Jollof Rice</dt>
            <dd>A one-pot rice dish cooked with tomatoes and spices.</dd>
        </dl>
    

Lesson 12: Nested Ordered Lists with Custom Numbering

Definition: A nested ordered list is a list inside another list – like a sub-list. You can customise the numbering with the type and start attributes.

Why important: It helps you show step-by-step instructions that have sub-steps – like a recipe or a project plan.

Simple explanation: Imagine you are writing a recipe. Step 1 is “Prepare ingredients”. Under Step 1, you have sub-steps: “a) Wash the rice”, “b) Chop the onions”. That is a nested list.

Real-life example: A project plan – the main steps are numbered 1, 2, 3, and each main step has sub-steps like a, b, c.

School example: Your essay outline – Roman numerals (I, II, III) with letters (A, B, C) underneath.

Home example: Your weekend plan – “1. Saturday: a) Wake up, b) Eat breakfast, c) Go to the market”.

Nigerian example: A Nigerian party planning list – “1. Food: a) Jollof, b) Fried rice, c) Chicken”.

Illustration:

        <ol>
          <li>Prepare ingredients
            <ol type="a">
              <li>Wash the rice</li>
              <li>Chop the onions</li>
            </ol>
          </li>
          <li>Cook the soup
            <ol type="i">
              <li>Boil the meat</li>
              <li>Add the vegetables</li>
            </ol>
          </li>
        </ol>
    

Code example:

        <ol>
            <li>Prepare the Egusi soup
                <ol type="a">
                    <li>Soak the melon seeds</li>
                    <li>Grind the seeds into a paste</li>
                </ol>
            </li>
            <li>Cook the soup
                <ol type="i">
                    <li>Add the meat and fish</li>
                    <li>Stir and let it simmer</li>
                </ol>
            </li>
        </ol>
    

Lesson 13: The type and start Attributes for Lists

Definition: The type attribute changes the numbering style (like 1, A, a, I, i). The start attribute changes the starting number.

Why important: They let you customise your lists to match any style you need – like Roman numerals for an outline or letters for sub-steps.

Simple explanation: type is like choosing the font for your numbers – numbers, letters, or Roman numerals. start is like choosing where to begin – like starting at 5 instead of 1.

Real-life example: A legal document might use Roman numerals (i, ii, iii) for sections.

School example: Your exam paper might have questions numbered 1, 2, 3, but sub-questions are a, b, c.

Home example: You might number your chores starting from 1, but if you have a list of tasks, you might use letters.

Nigerian example: A Nigerian constitution might use Roman numerals for articles.

Illustration:

        <ol type="A" start="3">
          <li>This will be C</li>   (because it starts at 3 → A=1, B=2, C=3)
          <li>This will be D</li>
        </ol>
    

Code example:

        <ol type="I" start="5">
            <li>This is V (5)</li>
            <li>This is VI (6)</li>
        </ol>
    

📖 Key Vocabulary

• Figure: A container for media (like images) and its caption.
• Figcaption: The caption or label for the media inside a figure.
• Details: A collapsible section that users can open and close.
• Summary: The clickable title of a details element.
• Emphasis: Stressing a word to change its meaning (<em>).
• Strong: Indicating that content is very important or urgent (<strong>).
• Italics: A visual style that slants the text (<i>).
• Bold: A visual style that makes text darker and thicker (<b>).
• Blockquote: A long quotation that is indented.
• Quote: A short quotation inside a sentence (<q>).
• Cite: Giving credit to a source (<cite>).
• Abbr: An abbreviation (like HTML).
• Definition List: A list of terms and their definitions (<dl>).
• Nested List: A list inside another list.

🧠 Important Concepts

• Meaning vs. Style: Some tags add meaning (<em>, <strong>), while others are just for style (<i>, <b>). Always choose meaning when you can.
• Accessibility: Semantic tags like <figure> and <details> help people with disabilities understand your content better.
• Organisation: Grouping related content (like media and captions) makes your page cleaner and easier to maintain.
• Interactivity: The <details> element adds simple interactivity without needing JavaScript – users can click to open and close.

🪜 Step-by-step Explanations

How to create a figure with a caption:

1. Start with <figure>.
2. Add your media (like an <img> tag).
3. Add <figcaption> with your description.
4. Close with </figure>.

How to create a collapsible section:

1. Start with <details>.
2. Add <summary> with a clickable title.
3. Add the hidden content (like paragraphs, lists, etc.).
4. Close with </details>.

How to create a definition list:

1. Start with <dl>.
2. Add <dt> for each term.
3. Add <dd> for each definition.
4. Close with </dl>.

🌍 Real-life Examples

• Example 1: A cooking blog uses <figure> for each recipe photo with a caption describing the dish.
• Example 2: A news website uses <blockquote> to quote politicians and <cite> to give credit to the source.
• Example 3: A dictionary website uses <dl> to define words.

🇳🇬 Nigerian Examples

• Example 1: A Nigerian food blog uses <figure> for pictures of Jollof rice with captions like “A plate of Jollof rice with chicken”.
• Example 2: A Nigerian news site quotes the President using <blockquote> and cites the source using <cite>.
• Example 3: A Nigerian education site uses <dl> to define terms like “WAEC”, “JAMB”, and “NYSC”.

🎮 Fun Examples Children Can Relate To

• Example 1: Your favourite video game – a <figure> for the game cover with a caption “My favourite game!”
• Example 2: A homework assignment – a <details> element that hides the answers so you can try it yourself first.
• Example 3: A list of your friends – a definition list with each friend’s name and their favourite food.

🏠 Everyday Examples

• Example 1: Your school bag – a <figure> for a photo of your bag with a caption “My school bag”.
• Example 2: Your weekly timetable – a nested list with days of the week and subjects under each day.
• Example 3: Your recipe collection – use <details> to hide the full recipe until you click.

👨‍👩‍👧 Parent Tips

• Tip 1: Encourage your child to use <figure> and <figcaption> whenever they add images – it is a great habit.
• Tip 2: Ask them to create a <details> element for a fun fact about themselves – it teaches interactivity.
• Tip 3: Help them understand the difference between meaning (<em>, <strong>) and style (<i>, <b>) by giving everyday examples.

💡 Interesting Facts

• Fact 1: The <details> and <summary> elements were introduced in HTML5 and are supported by all modern browsers.
• Fact 2: Screen readers treat <em> and <strong> differently – they change the tone of voice.
• Fact 3: The <blockquote> element automatically adds margins on both sides to make it stand out.
• Fact 4: Definition lists are perfect for glossaries and are used by many educational websites.

🤔 Did You Know?

• Did you know? That you can nest <details> elements inside each other – like a box inside a box?
• Did you know? That <figure> can also hold videos, code snippets, and even diagrams – not just images?
• Did you know? That the <cite> element is often used in bibliographies and academic writing?

🧠 Remember This

• 1. Always use <figure> and <figcaption> together for media with captions.
• 2. Use <details> and <summary> for content you want to hide or show.
• 3. Use <em> and <strong> for meaning, not just for style.
• 4. Use <blockquote> for long quotes and <q> for short ones.
• 5. Always give credit with <cite> when you quote or refer to a source.
• 6. Use definition lists (<dl>) for glossaries and word lists.

❌ Common Mistakes

✅ Best Practices

📊 ASCII Illustrations

Figure with Figcaption

        <figure>
        +---------------------------+
        |   [Image]                 |
        |   <img src="egusi.jpg"> |
        |   <figcaption>           |
        |     Egusi soup – my     |
        |     favourite dish!     |
        |   </figcaption>          |
        +---------------------------+
        </figure>
    

Details and Summary – The Magic Box

        <details>
        +----------------------------------+
        |  <summary>📖 Click to reveal</summary>  ← always visible
        |  +----------------------------+   |
        |  |  Hidden content appears   |   |
        |  |  here when you click.     |   |
        |  |  Surprise! 🎉             |   |
        |  +----------------------------+   |
        +----------------------------------+
        </details>
    

Nested Ordered List

        1. Step 1
           a. Sub-step A
           b. Sub-step B
        2. Step 2
           i. Sub-step i
           ii. Sub-step ii
    

Definition List Structure

        <dl>
          <dt>HTML</dt>
          <dd>HyperText Markup Language</dd>
          <dt>CSS</dt>
          <dd>Cascading Style Sheets</dd>
        </dl>
    

📋 Comparison Tables

Meaning vs. Style Tags

Meaning Tag	Style Tag	When to use
<em>	<i>	Use <em> to stress a word. Use <i> for book titles, foreign words, or style.
<strong>	<b>	Use <strong> for importance. Use <b> for visual boldness.
<blockquote>	<q>	Use <blockquote> for long quotes. Use <q> for short quotes inside a sentence.

List Types

List Type	Tags	Best used for
Unordered List	<ul> and <li>	Bullet points – things with no specific order
Ordered List	<ol> and <li>	Step-by-step instructions or rankings
Definition List	<dl>, <dt>, <dd>	Glossaries, terms and definitions
Nested List	Any list inside another list	Sub-steps, outlines, detailed plans

📚 End-of-Module Summary

❓ Frequently Asked Questions

• Q1: What is the difference between <figure> and just using <div> with an image?
  A: <figure> is semantic – it tells the browser that the content is a figure with a caption. <div> is generic and has no meaning.
• Q2: Can I use <details> without a <summary>?
  A: Yes, but it will show a default title like “Details”. It is better to always use a <summary> so users know what is inside.
• Q3: Does <em> and <strong> affect SEO?
  A: Yes, search engines consider them important, but do not overuse them – only use them when they add real meaning.
• Q4: What is the difference between <blockquote> and just using quotation marks?
  A: <blockquote> is a semantic tag – it tells the browser “this is a quote”. It also helps screen readers and search engines.
• Q5: Can I use <cite> inside a <blockquote>?
  A: Yes! You can put <cite> inside to show the source of the quote.
• Q6: What is the purpose of a definition list?
  A: It is perfect for glossaries, dictionaries, or any list of terms and their definitions.
• Q7: Can I have a list inside a definition list?
  A: Yes, you can put any HTML inside a <dd>, including lists!
• Q8: How do I change the numbering in an ordered list?
  A: Use the type attribute (e.g., type="A") and the start attribute (e.g., start="5").
• Q9: Can I use <abbr> for any abbreviation?
  A: Yes, but it is especially useful for uncommon abbreviations or acronyms that people might not know.
• Q10: Why is it important to add meaning with tags instead of just using style?
  A: Because it helps everyone – including people with disabilities and search engines – understand your content better.

🔗 Matching Exercises

Match the tag on the left with its correct description on the right.

Tag	Description
<figure>	A. A collapsible section that can be opened and closed
<figcaption>	B. The caption or label for media inside a figure
<details>	C. A container for media and its caption
<summary>	D. The clickable title of a details element
<em>	E. Adds emphasis to a word
<strong>	F. Indicates very important content
<blockquote>	G. A long quotation
<cite>	H. Gives credit to a source
<dl>	I. A definition list

(Answers: 1-C, 2-B, 3-A, 4-D, 5-E, 6-F, 7-G, 8-H, 9-I)

📝 Scenario-based Exercises

👥 Group Activity

Activity: In groups of 3–4 students, choose a topic you are all interested in – like “Nigerian Food”, “Football”, or “Movies”. Create a webpage together that includes:

• At least one <figure> with a <figcaption>.
• At least one <details> element with a <summary>.
• At least one <blockquote> with a <cite>.
• A definition list (<dl>) with at least 3 terms.
• A nested ordered list with custom numbering.

Present your code to the class and explain how each tag adds meaning.

🧑‍💻 Individual Activity

Activity: Create a one-page “About Me” website that includes:

• A <figure> with your photo (or a placeholder) and a caption.
• A <details> section that hides your favourite hobby (with a summary that says “Click to see my hobby”).
• A quote from your favourite book or movie using <blockquote> and <cite>.
• A definition list of 3 new words you have learned recently.
• A nested ordered list of your top 3 goals, with 2 sub-steps for each goal.

Save it as about-me.html and open it in your browser.

🛠️ Mini Project

📋 Practical Assignment

Assignment: Write a complete HTML page about “My Favourite Nigerian Musician”. Your page should include:

• A <figure> with the musician’s name and a caption.
• A <details> section with a summary like “Click to see my favourite song lyrics” – and inside, a <blockquote> with the lyrics and a <cite>.
• A definition list of 3 music-related terms (like “Afrobeats”, “Highlife”, “Juju”).
• A nested ordered list of the musician’s top 3 albums, with 2 songs for each album.
• Use <em> and <strong> at least twice each.
• Use <abbr> for at least one abbreviation.

Submit your HTML file.

🔑 Key Takeaways

• 1. Use <figure> and <figcaption> to add captions to images and media.
• 2. Use <details> and <summary> to create collapsible content – it is like a magic box!
• 3. <em> and <strong> add meaning; <i> and <b> are just for style.
• 4. Use <blockquote> for long quotes and <q> for short ones.
• 5. Always give credit with <cite> – it shows respect.
• 6. Use definition lists (<dl>) for glossaries and word lists.
• 7. Nested lists and custom numbering (type, start) help you organise complex information.

💬 Classroom Discussion Questions

• 1. Why do you think it is better to use <em> instead of <i> for emphasising words?
• 2. Can you think of a situation where using <details> would be very helpful on a website?
• 3. Why is it important to give credit with <cite> when you quote someone?
• 4. How would you explain the difference between <blockquote> and <q> to a younger student?
• 5. In what ways do you think using semantic tags like <figure> makes a website better for people with disabilities?

🚀 Preparation for Module 3

Fantastic work on Module 2! You have made your content rich and meaningful. In Module 3, we will move on to Mastering Hyperlinks & Navigation. You will learn how to:

• Create absolute and relative paths – the secret to linking pages together.
• Use advanced link attributes like target="_blank" and download.
• Create email and telephone links.
• Build a table of contents using fragment identifiers (# links).
• Organise your website folders like a pro.

Before you start Module 3, make sure you can:

• Create a <figure> with a <figcaption>.
• Use <details> and <summary> correctly.
• Tell the difference between <em> and <i>, and between <strong> and <b>.
• Create a definition list.

Keep practising, and remember – the more you code, the better you become! You are doing a brilliant job. 💻🌟

---

Module 2: Advanced Text & Content Structuring • Written with 💖 for young coders in Nigeria and around the world.

🔗 Module 3: Mastering Hyperlinks & Navigation

Connecting your pages and guiding your visitors!

📖 Module Introduction

Welcome to Module 3 of your HTML Level Two journey! In Module 1, you learned how to build the modern HTML framework. In Module 2, you learned how to make your content rich and meaningful with figures, details, quotes, and lists.

Now, in Module 3, we are going to learn one of the most important things about the web: how to connect pages together. The web is called a web because everything is linked together, like a spider's web. Without links, the web would not be a web – it would just be a collection of separate pages.

In this module, we will master the anchor tag (<a>) – the tag that creates hyperlinks. We will learn about absolute paths and relative paths – the secret to linking files correctly. We will explore advanced link attributes like target="_blank" (to open links in new tabs) and download (to let people download files). We will also learn how to create email links, telephone links, and page jumps (fragment identifiers) to create a table of contents.

Think of this module as learning how to build bridges between your web pages. By the end, you will be able to create a complete, multi-page website with a proper navigation menu that works like a charm.

Let us begin our journey into the world of hyperlinks!

🎯 Learning Objectives

By the end of this module, you will be able to:

• Explain the difference between absolute and relative paths.
• Write absolute and relative URLs correctly.
• Use target="_blank" to open links in a new tab.
• Use the download attribute to let users download files.
• Create email links using mailto:.
• Create telephone links using tel:.
• Build a table of contents using fragment identifiers (#).
• Organise your website files in a clean folder structure.
• Create a navigation menu that connects all pages.

📚 Warm-up Story: Amara’s School Website

Amara was a 13-year-old girl who loved learning. Her school, Unity Academy, wanted to create a simple website to share news and information with students and parents.

Amara volunteered to help. She had learned HTML in Level One and knew how to create a single page. She made a beautiful homepage with the school logo, a welcome message, and some pictures.

But the school said, “Amara, we need more than one page! We need a page for news, a page for events, and a page for contact. And we need a navigation menu so people can move between these pages easily.”

Amara was excited but a little nervous. She had never linked multiple pages together before. She called her big brother, who was a web developer, for help.

Her brother said, “Amara, you need to learn about hyperlinks and navigation. You need to understand paths – how to tell your browser where to find other pages. Once you learn that, you can build a complete website with many pages, just like the big websites you see online!”

In this module, you will learn exactly what Amara learned. You will learn how to connect pages and guide visitors through your website. Let us get started!

🧩 Main Lessons

Lesson 1: What is a Hyperlink?

Definition: A hyperlink (or link) is a reference in a web page that lets you jump to another page, file, or section.

Why important: Links are the glue of the web. Without links, you would not be able to move from one page to another.

Simple explanation: A hyperlink is like a doorway in a building. You click on it, and it takes you to a different room (or a different building!).

Real-life example: In a library, you have a catalogue that tells you which shelf a book is on. That catalogue entry is like a link.

School example: Your teacher gives you a reading list. Each book title is a link to the book in the library.

Home example: Your phone contacts list – you tap on a name, and it links you to their phone number.

Nigerian example: In a Nigerian market, a shop owner might say, “Go to the next shop for tomatoes” – that is like a link to the next shop.

Illustration:

        Hyperlink flow:
        -------------
        User reads text: "Click here to see the news"
                 |
                 V
        User clicks the link
                 |
                 V
        Browser goes to the news page
                 |
                 V
        User sees the news page! 🎉
    

Code example:

        <a href="news.html">Click here to see the news</a>
    

Lesson 2: The <a> Tag – The Anchor

Definition: The <a> tag (short for anchor) is the HTML tag used to create hyperlinks.

Why important: It is the only tag that creates links. Without it, you cannot connect pages.

Simple explanation: The <a> tag is like a magic rope that ties two pages together. You hold one end, and the other end is tied to another page.

Real-life example: A bridge connects two islands – the bridge is like the <a> tag.

School example: Your locker has a combination lock – the lock is like a link that connects you to your belongings.

Home example: The remote control connects you to your TV – it is like a link.

Nigerian example: A road connects Lagos to Ibadan – that road is like a hyperlink.

Illustration:

        <a href="destination.html">Click to go to destination</a>
           |                    |
           |                    +-- the destination (where you go)
           +-- the link text (what you click)
    

Code example:

        <a href="about.html">Learn more about us</a>
    

Lesson 3: The href Attribute – The Destination

Definition: The href attribute (short for hypertext reference) tells the browser where the link should go.

Why important: Without href, the link does not go anywhere. It is like a door with no room behind it.

Simple explanation: href is like the address you write on an envelope. It tells the postman where to deliver the letter.

Real-life example: When you send a parcel, you write the address on the box – that is the href.

School example: You write your home address on a form – that is like an href.

Home example: Your mum writes a shopping list with the shop’s address – that is the href.

Nigerian example: In Nigeria, you might write “No. 10, Lagos Road” – that is an address, like an href.

Code example:

        <a href="https://www.google.com">Go to Google</a>
    

Lesson 4: Absolute vs. Relative Paths

Definition: An absolute path is a full web address (URL) that includes everything – like https://example.com/page.html. A relative path is a partial address that depends on where the current page is.

Why important: Relative paths make your website portable. You can move your whole website to a new server, and the links will still work.

Simple explanation: An absolute path is like giving your full home address: “Nigeria, Lagos, Surulere, No. 10.” A relative path is like saying “next door” – it only works if you are already in the same neighbourhood.

Real-life example: If you are in Lagos and you want to go to Abuja, you say “Abuja” – that is an absolute address. If you are in Surulere and you want to go to the shop next door, you say “next door” – that is a relative path.

School example: Your classroom number is “Room 201” – that is absolute. If you are in Room 201 and you want to go to Room 202, you say “the room next door” – that is relative.

Home example: Your house number is “12” – that is absolute. If you are in your house and you want to go to your neighbour’s house, you say “next door” – that is relative.

Nigerian example: In Nigeria, you might say “I live in Lagos” – that is absolute. If you are in Lagos and you want to go to the market, you say “the market down the road” – that is relative.

Illustration:

        Absolute path:
        https://example.com/folder/page.html
        ^^^^^^^^^^    ^^^^^^ ^^^^
        full address  folder file

        Relative path (if current page is in the same folder):
        page.html

        Relative path (if current page is in the parent folder):
        ../page.html
    

Lesson 5: Root-Relative Paths

Definition: A root-relative path starts with a forward slash (/) and begins from the root folder of your website.

Why important: It is a good way to link to pages from anywhere on your site, no matter which folder you are currently in.

Simple explanation: Think of your website as a tree. The root is the base of the tree. A root-relative path is like saying “from the roots, go up to the branch that has the leaf”.

Real-life example: In a large office building, the root is the ground floor. A root-relative path is like saying “from the ground floor, go to the 3rd floor”.

School example: Your school has a main entrance (the root). From there, you can go to the library, the hall, or the classrooms – that is like root-relative paths.

Home example: Your house has a front door (the root). From there, you can go to the kitchen, the bedroom, or the living room – that is root-relative.

Nigerian example: In a Nigerian market, the main gate is the root. From there, you go to the food section, the clothing section, or the electronics section.

Illustration:

        Website folder structure:
        /
        ├── index.html
        ├── about.html
        ├── news/
        │   └── latest.html
        └── images/
            └── logo.png

        Root-relative path from index.html to latest.html:
        /news/latest.html

        Root-relative path from latest.html to index.html:
        /index.html
    

Lesson 6: The target="_blank" Attribute – New Tab

Definition: target="_blank" tells the browser to open the link in a new tab or window.

Why important: It lets visitors stay on your page while also opening another page. This is useful for links to other websites.

Simple explanation: target="_blank" is like opening a new door while keeping the old door open. You can go into the new room, but you can also come back to the old room easily.

Real-life example: In a shopping mall, you might go into a shop (your page) and then click a link to open another shop in a new window – that is like target="_blank".

School example: In the library, you might look at one book (your page) and then open another book (the link) next to it – both are open at the same time.

Home example: You might be watching TV (your page) and then use your phone to check something (the new tab) – both are happening at the same time.

Nigerian example: In a Nigerian market, you might be at one shop (your page) and then send your friend to another shop (the new tab) while you stay at the first shop.

Security Note: Always add rel="noopener noreferrer" for security when using target="_blank".

Code example:

        <a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
            Go to Google in a new tab
        </a>
    

Lesson 7: The download Attribute – Download Files

Definition: The download attribute tells the browser to download the linked file instead of opening it.

Why important: It lets you offer files for download – like PDFs, images, or documents.

Simple explanation: download is like saying “save this to your computer” instead of “open this in your browser”.

Real-life example: When you download a song to your phone, you are “saving” it – that is the download attribute.

School example: Your teacher gives you a PDF homework file – you download it to your computer.

Home example: You download a game to your tablet – that is a download.

Nigerian example: In Nigeria, you might download a concert poster from a website to print it.

Code example:

        <a href="report.pdf" download>Download the report (PDF)</a>
    

Lesson 8: Email Links – mailto:

Definition: mailto: is a special link that opens the user’s email program with a new message ready to send.

Why important: It makes it easy for visitors to contact you by email.

Simple explanation: mailto: is like having a stamped envelope ready to go. You just click, and the email is pre-addressed.

Real-life example: On a business card, you have an email address – that is like a mailto link.

School example: Your teacher’s email address on the notice board – you can email them easily.

Home example: Your mum’s email address on a family group chat.

Nigerian example: A Nigerian company’s website has a “Contact Us” link that opens an email.

Code example:

        <a href="mailto:hello@mysite.com">Send me an email</a>
    

Lesson 9: Telephone Links – tel:

Definition: tel: is a special link that lets you dial a phone number directly from a webpage.

Why important: On mobile phones, clicking a tel: link opens the phone app and starts dialing.

Simple explanation: tel: is like having a phone number on a webpage that you can tap to call – just like tapping a contact in your phone.

Real-life example: On a restaurant website, you tap the phone number to call and book a table.

School example: The school’s contact page has a phone number you can tap to call the office.

Home example: Your mum’s phone number on a family website – you can tap to call her.

Nigerian example: A Nigerian business website has “Call us: 080-1234-5678” – you tap it to call.

Code example:

        <a href="tel:+2348012345678">Call us: 080-1234-5678</a>
    

Lesson 10: Fragment Identifiers – Page Jumps

Definition: A fragment identifier (or anchor link) uses # to link to a specific part of a page.

Why important: It lets you create a table of contents that jumps to different sections of a long page.

Simple explanation: A fragment identifier is like a bookmark in a book. You can jump straight to a specific chapter without flipping through all the pages.

Real-life example: In a long document, you have a table of contents. Each item in the table of contents is a link that jumps to that section.

School example: Your textbook has chapters. The table of contents lets you jump to Chapter 5 directly.

Home example: Your recipe book has an index that tells you where to find the jollof rice recipe.

Nigerian example: A Nigerian newspaper website has “Top Stories” – you click and it jumps to that story.

Illustration:

        Page structure:
        ------------
        Top of page
            |
            V
        +------------------+
        | Table of Contents|
        | 1. Introduction  | ← click → jumps to #intro
        | 2. History       | ← click → jumps to #history
        | 3. Conclusion    | ← click → jumps to #conclusion
        +------------------+
            |
            V
        +------------------+
        | #intro Section   | ← this is where you land
        +------------------+
    

Code example:

        <!-- Table of contents -->
        <ul>
            <li><a href="#intro">Introduction</a></li>
            <li><a href="#history">History</a></li>
            <li><a href="#conclusion">Conclusion</a></li>
        </ul>

        <!-- Sections with IDs -->
        <section id="intro">
            <h2>Introduction</h2>
            <p>...</p>
        </section>

        <section id="history">
            <h2>History</h2>
            <p>...</p>
        </section>

        <section id="conclusion">
            <h2>Conclusion</h2>
            <p>...</p>
        </section>
    

Lesson 11: Creating a Table of Contents

Definition: A table of contents is a list of links that jump to different sections of a long page.

Why important: It helps visitors navigate long pages quickly.

Simple explanation: A table of contents is like a map of your page. It shows all the main sections and lets you jump straight to the one you want.

Real-life example: A long report has a table of contents at the beginning – you can jump to the section you need.

School example: Your textbook has a table of contents – it shows all the chapters and their page numbers.

Home example: Your recipe book has a list of recipes – you can jump to the page of the recipe you want.

Nigerian example: A Nigerian government document has a table of contents – you can jump to the section you need.

Code example:

        <nav>
            <h2>Table of Contents</h2>
            <ul>
                <li><a href="#intro">Introduction</a></li>
                <li><a href="#chapter1">Chapter 1: HTML Basics</a></li>
                <li><a href="#chapter2">Chapter 2: Links</a></li>
                <li><a href="#chapter3">Chapter 3: Media</a></li>
            </ul>
        </nav>
    

Lesson 12: Folder Organisation – Best Practices

Definition: Folder organisation is how you arrange your files and folders in your website project.

Why important: Good organisation makes it easy to find files, update pages, and keep your project clean.

Simple explanation: Folder organisation is like keeping your room tidy. You put books on the shelf, clothes in the cupboard, and toys in the box. Everything has its place.

Real-life example: In a office, files are stored in labelled folders – that is organisation.

School example: Your school bag has compartments – one for books, one for lunch, one for stationery.

Home example: Your kitchen has a drawer for cutlery, a cupboard for plates, and a shelf for spices.

Nigerian example: In a Nigerian market, shops are grouped – food in one area, clothes in another.

Illustration:

        Good folder structure:
        --------------------
        my-website/
        ├── index.html
        ├── about.html
        ├── contact.html
        ├── css/
        │   └── style.css
        ├── images/
        │   ├── logo.png
        │   └── team.jpg
        ├── js/
        │   └── script.js
        └── pages/
            ├── news.html
            └── events.html

        Bad folder structure (all files in one folder):
        ---------------------------------------------
        my-website/
        ├── index.html
        ├── about.html
        ├── contact.html
        ├── logo.png
        ├── team.jpg
        ├── style.css
        ├── script.js
        ├── news.html
        └── events.html
    

Lesson 13: Building a Navigation Menu

Definition: A navigation menu is a set of links that appear on every page of your website, allowing visitors to move between pages.

Why important: It is the compass of your website. It helps visitors find their way around.

Simple explanation: A navigation menu is like a map that is always visible. It shows you where you are and where you can go.

Real-life example: A shopping mall has a directory map at the entrance – that is like a navigation menu.

School example: Your school has a notice board with arrows pointing to different classrooms – that is navigation.

Home example: Your house has doors with labels – “Kitchen”, “Bedroom”, “Bathroom” – that is navigation.

Nigerian example: A Nigerian bus park has signs – “Abuja”, “Ibadan”, “Benin” – that is navigation.

Code example:

        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="news.html">News</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    

📖 Key Vocabulary

• Hyperlink: A clickable link that takes you to another page or section.
• Anchor: The HTML tag (<a>) that creates hyperlinks.
• href: The attribute that tells the link where to go.
• Absolute Path: A full web address (e.g., https://example.com/page.html).
• Relative Path: A partial address that depends on the current page (e.g., page.html).
• Root-Relative Path: A path that starts from the root of your website (e.g., /page.html).
• target="_blank": Opens a link in a new tab.
• download: Tells the browser to download the file instead of opening it.
• mailto: Opens the user's email program.
• tel: Opens the phone app to dial a number.
• Fragment Identifier: A link that jumps to a specific part of a page (e.g., #section).
• Navigation Menu: A set of links that helps users move around a website.

🧠 Important Concepts

• Portability: Use relative paths so your website works when you move it to a new server.
• User Experience: A good navigation menu makes visitors happy and keeps them on your site.
• Accessibility: Make sure your links are clearly visible and describe where they go.
• Security: Use rel="noopener noreferrer" when using target="_blank" to protect your visitors.

🪜 Step-by-step Explanations

How to link to another page in the same folder:

1. Write <a href="filename.html">.
2. Add the link text (what users will click).
3. Close with </a>.

How to link to a page in a subfolder:

1. Write <a href="folder/filename.html">.
2. Add the link text.
3. Close with </a>.

How to create a table of contents:

1. Add an id to each section (e.g., <section id="intro">).
2. Create a list of links with # and the id (e.g., <a href="#intro">Introduction</a>).

🌍 Real-life Examples

• Example 1: A news website has a navigation menu at the top – Home, World, Technology, Sports.
• Example 2: An online store has a “Contact Us” page with a mailto: link.
• Example 3: A long blog post has a table of contents that jumps to different sections.

🇳🇬 Nigerian Examples

• Example 1: A Nigerian news site like “Punch” has a navigation menu – News, Politics, Sports, Entertainment.
• Example 2: A Nigerian business website has a tel: link so customers can call them.
• Example 3: A Nigerian recipe blog has a table of contents – Jollof, Egusi, Suya, and more.

🎮 Fun Examples Children Can Relate To

• Example 1: Your favourite video game has a menu – Start, Options, Credits – that is navigation.
• Example 2: Your school project website – a navigation menu with “Home”, “About”, “Projects”.
• Example 3: A table of contents for your favourite book – Chapter 1, Chapter 2, etc.

🏠 Everyday Examples

• Example 1: Your house has rooms – the door to each room is like a link.
• Example 2: Your school has a timetable – each subject is like a link to that class.
• Example 3: Your phone has contacts – each contact is like a link to call or message.

👨‍👩‍👧 Parent Tips

• Tip 1: Help your child understand paths by using real-world examples like “next door” and “across town”.
• Tip 2: Encourage them to create a small multi-page website – it is a great way to practise.
• Tip 3: Remind them to always test their links – a broken link is like a broken bridge!

💡 Interesting Facts

• Fact 1: The first hyperlink was created by Tim Berners-Lee in 1990.
• Fact 2: There are billions of hyperlinks on the web – each one is a connection between pages.
• Fact 3: Search engines like Google follow links to discover new pages – links help them crawl the web.

🤔 Did You Know?

• Did you know? That mailto: links can also pre-fill the subject and body of the email? Like this: mailto:me@example.com?subject=Hello&body=Hi.
• Did you know? That tel: links work on mobile phones and in apps like WhatsApp?
• Did you know? That fragment identifiers are also used in URLs to track user behaviour – like #section1?

🧠 Remember This

• 1. Always use meaningful link text – “Click here” is not as good as “Read the full article”.
• 2. Use relative paths for pages inside your own website.
• 3. Use absolute paths for links to other websites.
• 4. Use target="_blank" for external links, and always add rel="noopener noreferrer".
• 5. Use fragment identifiers for tables of contents.
• 6. Organise your files in folders – it makes everything easier to find.

❌ Common Mistakes

✅ Best Practices

📊 ASCII Illustrations

Navigation Menu Structure

        <nav>
        +------------------------------------------+
        |  Home  |  About  |  News  |  Contact    |  ← each is a link
        +------------------------------------------+
        </nav>
    

File Structure (Root-Relative)

        Website root (/)
        ├── index.html
        ├── about.html
        ├── contact.html
        ├── news/
        │   └── latest.html
        └── images/
            └── logo.png

        From index.html to latest.html:
        <a href="/news/latest.html">Latest News</a>
    

Absolute vs. Relative Paths

        Absolute path:
        https://example.com/folder/page.html

        Relative path (same folder):
        page.html

        Relative path (subfolder):
        folder/page.html

        Relative path (parent folder):
        ../page.html

        Root-relative path:
        /folder/page.html
    

Table of Contents Flow

        User sees Table of Contents
                |
                V
        Clicks a link (e.g., "#chapter2")
                |
                V
        Browser scrolls to the element with id="chapter2"
                |
                V
        User sees the chapter 🎉
    

📋 Comparison Tables

Path Types

Path Type	Example	When to use
Absolute	https://example.com/page.html	Linking to other websites
Relative (same folder)	page.html	Linking to pages in the same folder
Relative (subfolder)	folder/page.html	Linking to pages in a subfolder
Relative (parent folder)	../page.html	Linking to pages in the parent folder
Root-relative	/page.html	Linking from any page to any page

Link Types

Link Type	Example	Purpose
Page link	<a href="about.html">About</a>	Go to another page
External link	<a href="https://google.com">Google</a>	Go to another website
Email link	<a href="mailto:me@example.com">Email</a>	Open email program
Phone link	<a href="tel:+2348012345678">Call</a>	Open phone app
Fragment link	<a href="#section">Section</a>	Jump to a part of the page
Download link	<a href="file.pdf" download>Download</a>	Download a file

📚 End-of-Module Summary

❓ Frequently Asked Questions

• Q1: What is the difference between an absolute path and a relative path?
  A: An absolute path is a full web address (like https://example.com/page.html). A relative path is a shorter address that depends on where the current page is (like page.html).
• Q2: When should I use target="_blank"?
  A: Use it for links to other websites. It keeps your page open in the background while the new page opens in a new tab.
• Q3: What is the download attribute used for?
  A: It tells the browser to download the linked file instead of opening it. It is useful for PDFs, images, and documents.
• Q4: How do I create an email link?
  A: Use mailto: in the href attribute – e.g., <a href="mailto:me@example.com">Email me</a>.
• Q5: How do I create a telephone link?
  A: Use tel: in the href attribute – e.g., <a href="tel:+2348012345678">Call us</a>.
• Q6: What is a fragment identifier?
  A: It is a link that uses # to jump to a specific part of a page – like #intro.
• Q7: What is the difference between ./ and ../?
  A: ./ means “the same folder”. ../ means “the parent folder” (one folder up).
• Q8: Why should I use rel="noopener noreferrer"?
  A: It improves security when using target="_blank". It protects your page from being hijacked.
• Q9: What is a navigation menu?
  A: A set of links that appears on every page of your website, helping visitors move between pages.
• Q10: How do I link to a page in a subfolder?
  A: Use a relative path like folder/page.html or a root-relative path like /folder/page.html.

🔗 Matching Exercises

Match the path type on the left with its correct example on the right.

Path Type	Example
Absolute path	A. ../about.html
Relative path (same folder)	B. /folder/page.html
Relative path (subfolder)	C. https://example.com/page.html
Relative path (parent folder)	D. page.html
Root-relative path	E. folder/page.html

(Answers: 1-C, 2-D, 3-E, 4-A, 5-B)

📝 Scenario-based Exercises

👥 Group Activity

Activity: In groups of 3–4 students, create a small website with 3 pages: index.html, about.html, and contact.html.

• Create a navigation menu that appears on all three pages.
• On the index.html page, add a table of contents that jumps to different sections (at least 3).
• On the contact.html page, add a mailto: link and a tel: link.
• Use a relative path to link to an image in an images folder.

Present your website to the class.

🧑‍💻 Individual Activity

Activity: Create a one-page website about “My Favourite Nigerian City”. Include:

• A navigation menu with links to “Home”, “Attractions”, “Food”, “Contact” (they can all link to # for now).
• A table of contents that jumps to at least 3 sections (e.g., “Introduction”, “Attractions”, “Food”).
• A mailto: link to your email address.
• A tel: link to a fake phone number.
• A link to an image using a relative path (create a folder called images and put a picture there).

Save it as my-city.html and open it in your browser.

🛠️ Mini Project

📋 Practical Assignment

Assignment: Create a 3-page website for a fictional business of your choice (e.g., a bakery, a salon, or a tech company).

• Page 1: Homepage – with a navigation menu and a table of contents.
• Page 2: Services/Products – with details about what the business offers.
• Page 3: Contact – with a mailto: link, a tel: link, and a physical address.

Requirements:

• Use relative paths for all internal links.
• Use target="_blank" for at least one external link.
• Use a fragment identifier for the table of contents.
• Organise your files in folders (e.g., pages, images).
• Submit all files in a single folder (zip it).

🔑 Key Takeaways

• 1. Hyperlinks are the glue of the web – they connect everything.
• 2. The <a> tag with the href attribute creates links.
• 3. Use absolute paths for external links and relative paths for internal links.
• 4. target="_blank" opens links in a new tab – always use rel="noopener noreferrer" for security.
• 5. download lets users save files to their computer.
• 6. mailto: and tel: make it easy to contact you.
• 7. Fragment identifiers (#) create tables of contents.
• 8. Good folder organisation keeps your project clean and professional.

💬 Classroom Discussion Questions

• 1. Why do you think the web is called a “web”? What does that tell you about links?
• 2. When would you use an absolute path instead of a relative path?
• 3. Why is it important to have a navigation menu on every page?
• 4. How would you explain a fragment identifier to a 10-year-old?
• 5. Why is good folder organisation important for a website project?

🚀 Preparation for Module 4

Excellent work on Module 3! You are now a master of hyperlinks and navigation. In Module 4, we will dive into Media Integration. You will learn how to:

• Use the <picture> element for responsive images.
• Use srcset for resolution switching.
• Embed videos using the <video> element.
• Embed audio using the <audio> element.
• Use <iframe> to embed YouTube videos and maps.
• Add subtitles and fallback content for media.

Before you start Module 4, make sure you can:

• Create a link to another page using a relative path.
• Open a link in a new tab using target="_blank".
• Create a mailto: link.
• Create a fragment identifier link.

Keep building and exploring – the web is your canvas! 🎨🌐

---

Module 3: Mastering Hyperlinks & Navigation • Written with 💖 for young coders in Nigeria and around the world.

🎬 Module 4: Media Integration

Making your website come alive with images, videos, and audio!

📖 Module Introduction

Welcome to Module 4 of your HTML Level Two journey! In Module 1, you built the modern HTML framework. In Module 2, you made your content rich and meaningful. In Module 3, you mastered hyperlinks and navigation – you learned how to connect pages and guide visitors.

Now, in Module 4, we are going to make your website come alive with media – images, videos, and audio! A website with only text is like a movie with no sound – it is missing something important. Media makes your website engaging, exciting, and fun.

In this module, we will learn about responsive images using the <picture> element and srcset – these make your images look great on any device, from a tiny phone to a giant TV. We will learn how to embed videos using the <video> element, with controls and subtitles. We will learn how to embed audio using the <audio> element. And we will learn how to embed external content like YouTube videos and Google Maps using the <iframe> element.

Think of this module as adding the colour, sound, and motion to your website. By the end, you will be able to create web pages that are not just informative but also beautiful and interactive.

Let us begin our journey into the world of media!

🎯 Learning Objectives

By the end of this module, you will be able to:

• Use the <picture> element for responsive images (art direction).
• Use the srcset attribute for resolution switching.
• Use the loading="lazy" attribute to improve performance.
• Embed videos using the <video> element with controls.
• Add subtitles to videos using the <track> element.
• Embed audio using the <audio> element.
• Embed YouTube videos and maps using <iframe>.
• Understand why media accessibility matters.

📚 Warm-up Story: Ade’s Travel Blog

Ade was a 13-year-old boy who loved travelling. He had visited many places in Nigeria – Lagos, Abuja, Calabar, and even the beautiful beaches in Lagos. He wanted to share his adventures with the world, so he decided to start a travel blog.

Ade wrote amazing stories about his trips. He described the sights, the sounds, and the food. But his blog looked a bit boring. It was all text – no pictures, no videos, no music. His friends told him, “Ade, your blog is good, but it needs some life!”

Ade’s big sister, who was a web developer, said, “Ade, you need to add media to your blog! Add pictures of the places you visited. Add videos of the local dances. Add audio of the sounds of the market. Your readers will love it!”

Ade was excited. He spent the week learning about media integration. He learned how to make his images look great on phones, how to embed videos with controls, and how to add audio. By the end, his travel blog was spectacular – it had pictures, videos, and even a podcast!

In this module, you will learn exactly what Ade learned. You will learn how to make your website come alive with media. Let us get started!

🧩 Main Lessons

Lesson 1: Why Media Matters

Definition: Media includes images, videos, audio, and other non-text content that makes a website more engaging.

Why important: People remember 80% of what they see, but only 20% of what they read. Media makes your website memorable and fun.

Simple explanation: Think of a movie – you would not want to watch a movie with only text, right? Media adds colour, sound, and motion to your website.

Real-life example: A travel blog with photos of beautiful beaches is much more exciting than one with only text.

School example: A science project with diagrams and videos is more interesting than one with only words.

Home example: A family photo album is more meaningful than a list of names.

Nigerian example: A Nigerian food blog with pictures of Jollof rice and videos of cooking is much more popular.

Illustration:

        Text-only page:   boring 😴
        Page with media:  exciting 🎉
    

Lesson 2: The <img> Tag – Quick Recap

Definition: The <img> tag is used to embed images in a webpage.

Why important: It is the simplest way to add images to your page.

Simple explanation: <img> is like a picture frame on the wall – it holds the picture.

Code example:

        <img src="logo.png" alt="My website logo" />
    

Lesson 3: The srcset Attribute – Resolution Switching

Definition: srcset lets you provide different image files for different screen sizes, so the browser chooses the best one.

Why important: It makes your images look sharp on any device – from a small phone to a large monitor.

Simple explanation: srcset is like having different sizes of the same picture. You give the browser a small picture for small screens, a medium picture for medium screens, and a large picture for large screens.

Real-life example: A clothing store has different sizes of the same shirt – small, medium, large. The browser chooses the right size for your device.

School example: Your teacher gives you a worksheet with different font sizes – small for your notebook, large for the projector.

Home example: You have different sizes of the same photo on your phone – thumbnail, medium, full-size.

Nigerian example: A Nigerian market has different sizes of bags – small, medium, large – you choose the one that fits your needs.

Code example:

        <img
            srcset="image-small.jpg 480w,
                    image-medium.jpg 800w,
                    image-large.jpg 1200w"
            sizes="(max-width: 600px) 480px,
                   (max-width: 1000px) 800px,
                   1200px"
            src="image-medium.jpg"
            alt="A beautiful landscape"
        />
    

Lesson 4: The <picture> Element – Art Direction

Definition: <picture> lets you provide different images for different situations – like a different crop of the same scene for mobile vs. desktop.

Why important: It lets you do art direction – you can show a different image entirely based on the screen size, not just a smaller version.

Simple explanation: <picture> is like having different photos of the same scene. For a small screen, you show a close-up. For a large screen, you show the full scene.

Real-life example: A movie poster – on a small screen, you show just the actor’s face. On a large screen, you show the whole poster.

School example: A diagram – on a phone, you show a simplified version. On a computer, you show the full detailed version.

Home example: A family photo – on a phone, you show a crop of the family. On a TV, you show the full photo.

Nigerian example: A Nigerian flag – on a small screen, you show just the green and white stripes. On a large screen, you show the full flag with the details.

Code example:

        <picture>
            <source media="(max-width: 600px)" srcset="landscape-small.jpg" />
            <source media="(max-width: 1000px)" srcset="landscape-medium.jpg" />
            <img src="landscape-large.jpg" alt="A beautiful landscape" />
        </picture>
    

Lesson 5: The loading="lazy" Attribute – Lazy Loading

Definition: loading="lazy" tells the browser to only load the image when the user scrolls near it.

Why important: It makes your page load faster because the browser does not load all images at once – it only loads the ones the user can see.

Simple explanation: loading="lazy" is like not opening all your presents at once. You open them one by one, as you need them.

Real-life example: In a long magazine, you flip through pages – you only look at the pictures on the pages you are reading.

School example: In a textbook, you read one page at a time – you do not look at all the pictures at once.

Home example: You watch a movie – you do not watch all the scenes at once; you watch one scene after another.

Nigerian example: At a Nigerian market, you look at one shop at a time – you do not look at all the shops at once.

Code example:

        <img src="large-image.jpg" alt="A large image" loading="lazy" />
    

Lesson 6: The <video> Element – Adding Videos

Definition: <video> is used to embed video content in a webpage.

Why important: Videos are one of the most engaging types of media. They can explain, entertain, and inform.

Simple explanation: <video> is like a TV screen inside your webpage. You can play videos right on the page.

Real-life example: A cooking website has a video of the chef making Jollof rice – you can watch it right there.

School example: A science website has a video of a volcano erupting – you can watch it to learn.

Home example: A family website has a video of a birthday party – you can watch the fun moments.

Nigerian example: A Nigerian music website has a video of a musician performing – you can watch the performance.

Code example:

        <video src="video.mp4" controls width="640" height="360">
            Your browser does not support the video tag.
        </video>
    

Lesson 7: Video Attributes – Controls, Autoplay, Loop, Muted

Definition: Attributes that control how the video behaves – like controls, autoplay, loop, and muted.

Why important: They let you customise the video experience for your users.

Simple explanation: These attributes are like buttons on a remote control – they let you control how the video plays.

Code example:

        <video src="video.mp4" controls autoplay muted loop>
            Your browser does not support the video tag.
        </video>
    

Lesson 8: Multiple Video Sources – Fallback

Definition: You can provide multiple video sources (different formats) so the browser can choose one that it supports.

Why important: Different browsers support different video formats. Providing multiple sources ensures your video works for everyone.

Simple explanation: It is like having different keys for different doors. If one key does not work, you try another.

Code example:

        <video controls width="640" height="360">
            <source src="video.mp4" type="video/mp4" />
            <source src="video.webm" type="video/webm" />
            Your browser does not support the video tag.
        </video>
    

Lesson 9: Adding Subtitles with <track>

Definition: <track> is used to add subtitles, captions, or descriptions to a video.

Why important: It makes your video accessible to people who are deaf or hard of hearing, and to people who speak different languages.

Simple explanation: <track> is like subtitles on a movie – they show the dialogue as text on the screen.

Code example:

        <video controls>
            <source src="video.mp4" type="video/mp4" />
            <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English" />
            <track src="subtitles-ha.vtt" kind="subtitles" srclang="ha" label="Hausa" />
        </video>
    

Lesson 10: The <audio> Element – Adding Audio

Definition: <audio> is used to embed audio content in a webpage.

Why important: Audio can add atmosphere to your page – like background music, podcasts, or sound effects.

Simple explanation: <audio> is like a radio inside your webpage. You can play audio right on the page.

Real-life example: A music website has a player for a song – you can listen to it right there.

School example: A language learning website has audio for pronouncing words – you can listen and repeat.

Home example: A family website has a recording of a grandmother telling a story.

Nigerian example: A Nigerian podcast website has audio episodes you can listen to.

Code example:

        <audio controls>
            <source src="audio.mp3" type="audio/mpeg" />
            <source src="audio.ogg" type="audio/ogg" />
            Your browser does not support the audio tag.
        </audio>
    

Lesson 11: The <iframe> Element – Embedding External Content

Definition: <iframe> (inline frame) is used to embed another webpage or external content inside your page.

Why important: It lets you embed YouTube videos, Google Maps, social media posts, and other external content.

Simple explanation: <iframe> is like a window into another webpage. You can see other content right inside your page.

Real-life example: A blog embeds a YouTube video so readers can watch it without leaving the blog.

School example: A school website embeds a Google Map showing the school’s location.

Home example: A family website embeds a YouTube video of a family event.

Nigerian example: A Nigerian news website embeds a YouTube video of an interview with a politician.

Code example (YouTube):

        <iframe
            width="560"
            height="315"
            src="https://www.youtube.com/embed/dQw4w9WgXcQ"
            title="YouTube video player"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
        ></iframe>
    

Code example (Google Map):

        <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3964.0!2d3.0!3d6.0"
            width="600"
            height="450"
            style="border:0;"
            allowfullscreen=""
            loading="lazy"
        ></iframe>
    

Lesson 12: Accessibility for Media

Definition: Making sure your media is accessible to everyone, including people with disabilities.

Why important: Everyone should be able to enjoy your content, regardless of their abilities.

Simple explanation: Accessibility is like building ramps next to stairs – it lets everyone get to the same place.

Best practices:

• Always include alt text for images.
• Add subtitles to videos using <track>.
• Provide transcripts for audio content.
• Make sure videos have good contrast and captions.

📖 Key Vocabulary

• Media: Images, videos, audio, and other non-text content.
• srcset: An attribute that provides different image files for different screen sizes.
• Picture: An element that lets you provide different images for different situations (art direction).
• Lazy Loading: Loading images only when they are about to appear on the screen.
• Video: An element used to embed video content.
• Controls: An attribute that adds play/pause buttons to a video or audio player.
• Autoplay: An attribute that starts media automatically.
• Loop: An attribute that repeats media.
• Track: An element used to add subtitles to a video.
• Audio: An element used to embed audio content.
• Iframe: An element used to embed external content.
• Accessibility: Making content usable by everyone, including people with disabilities.

🧠 Important Concepts

• Responsive Images: Images that look great on any device – using srcset and <picture>.
• Performance: Lazy loading (loading="lazy") makes your page load faster.
• Accessibility: Adding alt text, subtitles, and transcripts ensures everyone can enjoy your media.
• Fallback Content: Providing multiple sources and a text fallback ensures your media works for everyone.

🪜 Step-by-step Explanations

How to add a responsive image:

1. Create different sizes of your image (small, medium, large).
2. Use the srcset attribute to list them.
3. Use the sizes attribute to tell the browser when to use each.
4. Add the loading="lazy" attribute for performance.

How to add a video with subtitles:

1. Use the <video> element with controls.
2. Add <source> tags for different video formats.
3. Add <track> tags for subtitles.

How to embed a YouTube video:

1. Go to the YouTube video and click "Share".
2. Click "Embed" and copy the <iframe> code.
3. Paste it into your HTML.

🌍 Real-life Examples

• Example 1: A news website uses <picture> to show different crops of the same image for mobile and desktop.
• Example 2: A cooking blog uses <video> to show a chef cooking, with subtitles in multiple languages.
• Example 3: A travel website uses <iframe> to embed a Google Map showing the location of a hotel.

🇳🇬 Nigerian Examples

• Example 1: A Nigerian food blog uses <picture> to show a close-up of Jollof rice on mobile and a full table setting on desktop.
• Example 2: A Nigerian music website uses <audio> to play Afrobeats samples.
• Example 3: A Nigerian school website uses <iframe> to embed a Google Map showing the school's location.

🎮 Fun Examples Children Can Relate To

• Example 1: A fan website for a video game uses <video> to show gameplay clips.
• Example 2: A school project uses <audio> to add a voice-over explaining a diagram.
• Example 3: A personal blog uses <iframe> to embed a YouTube video of a favourite song.

🏠 Everyday Examples

• Example 1: A photo album uses <img> with srcset to show images that look good on any screen.
• Example 2: A personal website uses <video> to show a birthday video.
• Example 3: A family blog uses <audio> to share a recording of a family member.

👨‍👩‍👧 Parent Tips

• Tip 1: Encourage your child to use alt text for all images – it is a great habit for accessibility.
• Tip 2: Help them understand that different devices need different image sizes – explain it like clothes sizes.
• Tip 3: Remind them to always check that their videos and audio work on different browsers.

💡 Interesting Facts

• Fact 1: The first video ever uploaded to YouTube was titled "Me at the zoo" and was uploaded in 2005.
• Fact 2: The <picture> element was introduced in HTML5 to help with responsive images.
• Fact 3: Lazy loading can improve page load speed by up to 50%.

🤔 Did You Know?

• Did you know? That you can use <picture> to show different images based on the screen orientation (portrait vs landscape)?
• Did you know? That <video> can also play audio-only files, but <audio> is better for that.
• Did you know? That <iframe> can be used to embed almost any webpage – like social media posts, Google Docs, and more?

🧠 Remember This

• 1. Always include alt text for images – it is essential for accessibility.
• 2. Use srcset and <picture> for responsive images.
• 3. Use loading="lazy" to make your page load faster.
• 4. Add controls to <video> and <audio> so users can control playback.
• 5. Add subtitles to videos using <track> – it makes your content accessible.
• 6. Use <iframe> to embed YouTube, maps, and other external content.

❌ Common Mistakes

✅ Best Practices

📊 ASCII Illustrations

Responsive Images with srcset

        Browser checks screen width
                |
                V
        Is screen < 600px? → loads image-small.jpg
                |
        Is screen < 1000px? → loads image-medium.jpg
                |
        Otherwise → loads image-large.jpg
    

<picture> Art Direction

        +----------------------------------+
        |  <picture>                       |
        |    <source media="(max-width:600px)"  |
        |            srcset="close-up.jpg" /> |
        |    <source media="(max-width:1000px)" |
        |            srcset="medium.jpg" />    |
        |    <img src="full.jpg" alt="..." /> |
        |  </picture>                       |
        +----------------------------------+
    

Video Player Structure

        <video controls>
        +----------------------------------+
        |  <source src="video.mp4">      |
        |  <source src="video.webm">     |
        |  <track src="subtitles.vtt">   |
        |  Your browser does not support  |
        |  the video tag.                 |
        +----------------------------------+
        </video>
    

Embedding YouTube with <iframe>

        <iframe
            width="560"
            height="315"
            src="https://www.youtube.com/embed/VIDEO_ID"
            frameborder="0"
            allowfullscreen
        ></iframe>
    

📋 Comparison Tables

Image Techniques

Technique	What it does	Best used for
<img> only	Shows one image	Simple pages with one fixed image
srcset	Different image files for different screen sizes	Resolution switching – same image, different sizes
<picture>	Different images for different situations	Art direction – different crop or scene

Media Types

Media Type	Element	Best used for
Images	<img>, <picture>	Photos, diagrams, illustrations
Videos	<video>	Movies, tutorials, animations
Audio	<audio>	Music, podcasts, voice-overs
External content	<iframe>	YouTube, Google Maps, social media

📚 End-of-Module Summary

❓ Frequently Asked Questions

• Q1: What is the difference between srcset and <picture>?
  A: srcset provides different sizes of the same image. <picture> allows you to show entirely different images for different situations (art direction).
• Q2: Why should I use loading="lazy"?
  A: It improves performance by loading images only when they are about to appear on the screen.
• Q3: What video formats should I use?
  A: MP4 (with H.264 codec) and WebM are widely supported.
• Q4: How do I add subtitles to a video?
  A: Use the <track> element inside <video> with a .vtt file.
• Q5: Can I use <audio> for podcasts?
  A: Yes! <audio> is perfect for podcasts and other audio content.
• Q6: What is an <iframe>?
  A: An <iframe> (inline frame) is used to embed another webpage or external content inside your page.
• Q7: Can I embed a YouTube video without an <iframe>?
  A: You can also use the <video> element if you have the video file, but <iframe> is the easiest way to embed YouTube videos.
• Q8: Why is accessibility important for media?
  A: Accessibility ensures that everyone, including people with disabilities, can enjoy your content.
• Q9: What is the controls attribute?
  A: It adds play/pause buttons and a volume slider to a video or audio player.
• Q10: How do I make an image responsive?
  A: Use srcset for resolution switching or <picture> for art direction, and include sizes to tell the browser which size to use.

🔗 Matching Exercises

Match the media element on the left with its correct description on the right.

Element/Attribute	Description
srcset	A. Provides different sizes of the same image
<picture>	B. Shows different images for different situations (art direction)
loading="lazy"	C. Loads images only when they are near the screen
<video>	D. Embeds video content
<audio>	E. Embeds audio content
<iframe>	F. Embeds external content like YouTube or maps
<track>	G. Adds subtitles to a video

(Answers: 1-A, 2-B, 3-C, 4-D, 5-E, 6-F, 7-G)

📝 Scenario-based Exercises

👥 Group Activity

Activity: In groups of 3–4 students, create a “Media Gallery” webpage that includes:

• At least 3 images using <picture> with different sources.
• At least 1 video using <video> with controls and subtitles.
• At least 1 audio using <audio> with controls.
• At least 1 <iframe> embedding a YouTube video or Google Map.

Present your media gallery to the class.

🧑‍💻 Individual Activity

Activity: Create a one-page “My Favourite Things” website that includes:

• A responsive image using srcset (different sizes of the same image).
• A <picture> element with different crops of the same scene.
• A <video> with controls (use a sample video or placeholder).
• An <audio> element with controls (use a sample audio or placeholder).
• An <iframe> embedding a YouTube video of your favourite song.

Save it as favourites.html and open it in your browser.

🛠️ Mini Project

📋 Practical Assignment

Assignment: Create a webpage about “Nigerian Music” that includes:

• A responsive image of a musician using srcset.
• A <picture> element with different crops of a concert photo.
• A <video> with controls (use a sample video).
• An <audio> element with controls (use a sample audio).
• An <iframe> embedding a YouTube video of a Nigerian music video.
• Use loading="lazy" for images to improve performance.
• Add alt text to all images.

Submit your HTML file.

🔑 Key Takeaways

• 1. Media (images, videos, audio) makes your website engaging and memorable.
• 2. Use srcset for resolution switching – different sizes of the same image.
• 3. Use <picture> for art direction – different images for different situations.
• 4. Use loading="lazy" to improve performance.
• 5. Use <video> with controls to embed videos.
• 6. Use <track> to add subtitles for accessibility.
• 7. Use <audio> with controls to embed audio.
• 8. Use <iframe> to embed external content like YouTube and maps.
• 9. Always think about accessibility – alt text, subtitles, and transcripts.

💬 Classroom Discussion Questions

• 1. Why do you think responsive images are important for mobile users?
• 2. How would you explain the difference between srcset and <picture> to a friend?
• 3. Why is it important to add alt text to images?
• 4. How can <iframe> make your website more interesting?
• 5. What are some ways you can make your videos more accessible?

🚀 Preparation for Module 5

Outstanding work on Module 4! You have made your website come alive with media. In Module 5, we will dive into HTML Forms (Intermediate Level). You will learn how to:

• Create accessible forms with <label> and for attributes.
• Use <fieldset> and <legend> to group form fields.
• Use HTML5 input types like email, tel, url, number, date, and color.
• Use dropdown menus with <select> and <optgroup>.
• Add client-side validation with required, pattern, min, and max.
• Understand the difference between GET and POST methods.

Before you start Module 5, make sure you can:

• Use <img> with src and alt attributes.
• Use <video> with controls.
• Use <iframe> to embed a YouTube video.

Keep creating and experimenting – the web is your canvas! 🎨🌐

---

Module 4: Media Integration • Written with 💖 for young coders in Nigeria and around the world.

📊 Module 6: Tables (Beyond Basic Grids)

Organising data like a pro – with structure, meaning, and accessibility!

📖 Module Introduction

Welcome to Module 6 of your HTML Level Two journey! In Module 1, you built the modern HTML framework. In Module 2, you made your content rich and meaningful. In Module 3, you mastered hyperlinks and navigation. In Module 4, you made your website come alive with media. In Module 5, you built smart, accessible forms.

Now, in Module 6, we are going to dive deep into tables. In Level One, you learned the basics – how to create a simple table with rows and columns. But now we are going to take it to the next level!

In this module, we will learn how to structure tables properly using <thead>, <tbody>, and <tfoot>. We will learn how to merge cells using colspan and rowspan – this lets you create complex tables like calendars and timetables. We will learn how to make tables accessible for screen readers using scope, caption, and aria-label. And we will build real-world tables like price charts, class timetables, and data reports.

Think of this module as learning how to build a proper filing system for your data. By the end, you will be able to create tables that are clear, meaningful, and accessible to everyone.

Let us begin our journey into the world of advanced tables!

🎯 Learning Objectives

By the end of this module, you will be able to:

• Structure tables using <thead>, <tbody>, and <tfoot>.
• Merge cells across columns using colspan.
• Merge cells across rows using rowspan.
• Use <th> with the scope attribute for accessible tables.
• Add a caption to a table.
• Use aria-label for complex data tables.
• Build real-world tables like price comparison charts and class timetables.
• Understand why accessible tables are important for people with disabilities.

📚 Warm-up Story: Chidi’s Football League Table

Chidi was a 13-year-old boy who loved football. He was the captain of his school’s football team, the Lagos Lions. He wanted to keep track of all the matches, goals, and points for the league season.

Chidi created a simple table in HTML. It had rows and columns, and it showed the team names, matches played, and points. But the table was messy – it was hard to read, and it did not look professional.

Chidi’s big sister, who was a web developer, said, “Chidi, you need to learn advanced table techniques. You need to structure your table properly with a header, body, and footer. You need to merge cells for better organisation. And you need to make it accessible so that everyone can understand it.”

Chidi spent the weekend learning about advanced tables. He learned how to use <thead>, <tbody>, and <tfoot>. He learned how to merge cells with colspan and rowspan. And he learned how to make his tables accessible with scope and caption. By the end, his league table was clean, organised, and professional – just like the tables you see on the BBC Sport website!

In this module, you will learn exactly what Chidi learned. You will learn how to build proper, structured, and accessible tables that can handle any type of data. Let us get started!

🧩 Main Lessons

Lesson 1: Why Tables Matter

Definition: A table is a way to organise data in rows and columns – like a spreadsheet.

Why important: Tables are perfect for displaying structured data – like schedules, price lists, statistics, and comparison charts.

Simple explanation: A table is like a grid of information. It is like a spreadsheet where you put data in boxes.

Real-life example: A train timetable – it shows departure times, arrival times, and platforms in a table.

School example: Your class timetable – it shows subjects for each day and period.

Home example: A shopping list – you might have columns for “Item”, “Quantity”, and “Price”.

Nigerian example: A Nigerian market price list – it shows items and their prices in a table.

Illustration:

        Table structure:
        +------------------+------------------+
        |  Header 1        |  Header 2        |  ← header row
        +------------------+------------------+
        |  Data 1          |  Data 2          |  ← data rows
        |  Data 3          |  Data 4          |
        +------------------+------------------+
    

Lesson 2: Table Structure – <table>, <tr>, <td>, <th>

Definition: <table> is the container. <tr> is a row. <td> is a cell (data). <th> is a header cell.

Why important: These are the building blocks of every table. Without them, you cannot create a table.

Simple explanation: <table> is the grid. <tr> is a row (like a line of boxes). <td> is a box that holds data. <th> is a special box for headings.

Code example:

        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Ade</td>
                <td>13</td>
            </tr>
            <tr>
                <td>Bola</td>
                <td>14</td>
            </tr>
        </table>
    

Lesson 3: The <thead> Element – The Table Header

Definition: <thead> groups the header rows of a table.

Why important: It tells the browser (and screen readers) that these rows are the table’s header.

Simple explanation: <thead> is like the title row of your table – it tells you what each column is about.

Code example:

        <table>
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Jollof Rice</td>
                    <td>₦5,000</td>
                </tr>
            </tbody>
        </table>
    

Lesson 4: The <tbody> Element – The Table Body

Definition: <tbody> groups the main data rows of a table.

Why important: It separates the main data from the header and footer, making the table easier to read and style.

Simple explanation: <tbody> is the main content of your table – it holds all the data.

Code example:

        <table>
            <thead>
                <tr><th>Name</th><th>Age</th></tr>
            </thead>
            <tbody>
                <tr><td>Ade</td><td>13</td></tr>
                <tr><td>Bola</td><td>14</td></tr>
            </tbody>
        </table>
    

Lesson 5: The <tfoot> Element – The Table Footer

Definition: <tfoot> groups the footer rows of a table – like totals or summaries.

Why important: It lets you add summary information at the bottom of the table, like total scores or averages.

Simple explanation: <tfoot> is like the summary row at the bottom of a spreadsheet – it shows totals or conclusions.

Code example:

        <table>
            <thead>
                <tr><th>Item</th><th>Price</th></tr>
            </thead>
            <tbody>
                <tr><td>Rice</td><td>₦5,000</td></tr>
                <tr><td>Beans</td><td>₦3,000</td></tr>
            </tbody>
            <tfoot>
                <tr><td>Total</td><td>₦8,000</td></tr>
            </tfoot>
        </table>
    

Lesson 6: The colspan Attribute – Merging Columns

Definition: colspan lets a cell span across multiple columns – it merges them horizontally.

Why important: It lets you create more complex table layouts – like a header that stretches across the whole table.

Simple explanation: colspan is like pushing two boxes together to make one big box that is twice as wide.

Real-life example: A calendar – the day “Monday” might span across 2 columns if there is a holiday.

School example: A timetable – “Break” might span across 2 periods.

Home example: A shopping list – a section header like “Produce” might span across 3 columns.

Nigerian example: A Nigerian market price list – a category like “Foodstuffs” might span across several columns.

Illustration:

        Before (2 columns):
        +------------+------------+
        |  A         |  B         |
        +------------+------------+

        After (colspan="2"):
        +-------------------------+
        |  A (spans 2 columns)    |
        +-------------------------+
    

Code example:

        <table>
            <tr>
                <th colspan="3">Student Information</th>
            </tr>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Class</th>
            </tr>
            <tr>
                <td>Ade</td>
                <td>13</td>
                <td>JS2</td>
            </tr>
        </table>
    

Lesson 7: The rowspan Attribute – Merging Rows

Definition: rowspan lets a cell span across multiple rows – it merges them vertically.

Why important: It lets you create more complex table layouts – like a cell that spans down several rows.

Simple explanation: rowspan is like pushing two boxes on top of each other to make one tall box.

Real-life example: A calendar – a holiday that lasts for 3 days might span 3 rows.

School example: A timetable – a subject that runs for 2 consecutive periods might span 2 rows.

Home example: A shopping list – a category like “Produce” might span 3 rows for different items.

Nigerian example: A Nigerian market price list – a shop name might span several rows for different products.

Illustration:

        Before (2 rows):
        +------------+
        |  A         |
        +------------+
        |  B         |
        +------------+

        After (rowspan="2"):
        +------------+
        |  A (spans  |
        |  2 rows)   |
        +------------+
    

Code example:

        <table>
            <tr>
                <th rowspan="2">Student</th>
                <th>Subject 1</th>
                <th>Subject 2</th>
            </tr>
            <tr>
                <td>Maths</td>
                <td>English</td>
            </tr>
        </table>
    

Lesson 8: The scope Attribute – Accessibility for Headers

Definition: scope tells screen readers whether a header applies to a column, a row, or a group.

Why important: It helps screen readers understand the relationship between headers and data cells, making tables accessible to people with visual impairments.

Simple explanation: scope is like signs that tell you which direction a header points – it is for a column, a row, or a group.

Real-life example: In a classroom, the teacher says “This column is for Maths, this row is for Monday” – the scope attribute does the same for screen readers.

School example: A timetable – the subject names in the first row have scope="col", and the days in the first column have scope="row".

Home example: A family budget – the categories have scope="col" and the months have scope="row".

Nigerian example: A Nigerian market price list – the items have scope="col" and the shops have scope="row".

Code example:

        <table>
            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Age</th>
                    <th scope="col">Class</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">Ade</th>
                    <td>13</td>
                    <td>JS2</td>
                </tr>
            </tbody>
        </table>
    

Lesson 9: The caption Element – Table Title

Definition: <caption> provides a title or description for the table.

Why important: It tells users (and screen readers) what the table is about – like a title at the top of a page.

Simple explanation: <caption> is like the title on a book – it tells you what the table is about.

Real-life example: A newspaper has a headline above a table – that is like a caption.

School example: A science project has a title above a data table – that is a caption.

Home example: A family budget sheet has a title like “Monthly Expenses” – that is a caption.

Nigerian example: A Nigerian bank statement has a title like “Account Summary” – that is a caption.

Code example:

        <table>
            <caption>Class Timetable for JS2</caption>
            <thead>
                <tr>
                    <th>Day</th>
                    <th>Period 1</th>
                    <th>Period 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Monday</td>
                    <td>Maths</td>
                    <td>English</td>
                </tr>
            </tbody>
        </table>
    

Lesson 10: aria-label – Describing Complex Tables

Definition: aria-label is an accessibility attribute that provides a label for the table when a <caption> is not enough.

Why important: It provides additional context for screen readers, especially for complex or data-heavy tables.

Simple explanation: aria-label is like extra information that only screen readers can see – it helps people understand the table better.

Code example:

        <table aria-label="League standings for the 2026 season">
            <thead>
                <tr>
                    <th scope="col">Team</th>
                    <th scope="col">Matches</th>
                    <th scope="col">Points</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">Lagos Lions</th>
                    <td>10</td>
                    <td>25</td>
                </tr>
            </tbody>
        </table>
    

Lesson 11: Building a Price Comparison Table

Definition: A price comparison table compares prices of different products or services.

Why important: It helps users make informed decisions by comparing options side by side.

Simple explanation: A price comparison table is like shopping around – you see different prices in one place and choose the best one.

Real-life example: A website that compares phone plans from different networks.

School example: A student comparing prices of different school supplies.

Home example: A family comparing prices of different internet packages.

Nigerian example: A Nigerian e-commerce site comparing prices of the same phone across different sellers.

Code example:

        <table>
            <caption>Price Comparison – Data Plans</caption>
            <thead>
                <tr>
                    <th scope="col">Network</th>
                    <th scope="col">Data (GB)</th>
                    <th scope="col">Price (₦)</th>
                    <th scope="col">Validity (Days)</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">MTN</th>
                    <td>5</td>
                    <td>2,500</td>
                    <td>30</td>
                </tr>
                <tr>
                    <th scope="row">Airtel</th>
                    <td>5</td>
                    <td>2,200</td>
                    <td>30</td>
                </tr>
                <tr>
                    <th scope="row">Glo</th>
                    <td>5</td>
                    <td>2,000</td>
                    <td>30</td>
                </tr>
            </tbody>
        </table>
    

Lesson 12: Building a Class Timetable

Definition: A class timetable shows which subjects are taught on each day and period.

Why important: It helps students and teachers know where to be and when.

Simple explanation: A timetable is like a map of your school week – it shows you where to go and when.

Real-life example: A university timetable showing lectures, tutorials, and labs.

School example: Your own class timetable with subjects for each day.

Home example: A family weekly planner – it shows who is doing what on each day.

Nigerian example: A Nigerian school’s timetable – it shows subjects like Maths, English, and Social Studies.

Code example:

        <table>
            <caption>JS2 Class Timetable</caption>
            <thead>
                <tr>
                    <th scope="col">Day</th>
                    <th scope="col">Period 1</th>
                    <th scope="col">Period 2</th>
                    <th scope="col">Period 3</th>
                    <th scope="col">Period 4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">Monday</th>
                    <td>Maths</td>
                    <td>English</td>
                    <td>Science</td>
                    <td>History</td>
                </tr>
                <tr>
                    <th scope="row">Tuesday</th>
                    <td>English</td>
                    <td>Maths</td>
                    <td>Art</td>
                    <td>Music</td>
                </tr>
                <tr>
                    <th scope="row">Wednesday</th>
                    <td colspan="4">Sports Day! 🏃</td>
                </tr>
            </tbody>
        </table>
    

📖 Key Vocabulary

• Table: A grid of rows and columns for organising data.
• Row: A horizontal line of cells (made with <tr>).
• Cell: A single box in a table (made with <td>).
• Header: A cell that labels a column or row (made with <th>).
• thead: Groups the header rows of a table.
• tbody: Groups the main data rows of a table.
• tfoot: Groups the footer rows of a table (like totals).
• colspan: Merges cells horizontally (across columns).
• rowspan: Merges cells vertically (across rows).
• scope: Tells screen readers whether a header applies to a column or row.
• caption: A title for the table.
• aria-label: An extra description for screen readers.

🧠 Important Concepts

• Structure: Use <thead>, <tbody>, and <tfoot> to organise your table.
• Accessibility: Use scope, caption, and aria-label to make your tables usable by everyone.
• Complexity: Use colspan and rowspan to create complex table layouts like calendars and timetables.
• Clarity: Always add a caption to explain what the table shows.

🪜 Step-by-step Explanations

How to create a structured table with thead, tbody, and tfoot:

1. Start with <table>.
2. Add <caption> with a title.
3. Add <thead> with <th> headers.
4. Add <tbody> with <td> data cells.
5. Add <tfoot> with summary information (if needed).
6. Close with </table>.

How to merge cells with colspan and rowspan:

1. In a <td> or <th>, add colspan="X" to span X columns.
2. In a <td> or <th>, add rowspan="Y" to span Y rows.
3. Adjust the number of cells in the next row/column to account for the merge.

🌍 Real-life Examples

• Example 1: A train timetable – showing departure and arrival times.
• Example 2: A sports league table – showing teams, matches, and points.
• Example 3: A product comparison table – comparing features of different products.

🇳🇬 Nigerian Examples

• Example 1: A Nigerian market price list – showing items and their prices.
• Example 2: A Nigerian school timetable – showing subjects and periods.
• Example 3: A Nigerian bank statement – showing transactions and balances.

🎮 Fun Examples Children Can Relate To

• Example 1: A video game leaderboard – showing player names and scores.
• Example 2: A movie schedule – showing movie titles and showtimes.
• Example 3: A party guest list – showing names and RSVP status.

🏠 Everyday Examples

• Example 1: A family budget – showing categories and expenses.
• Example 2: A shopping list – showing items, quantities, and prices.
• Example 3: A weekly planner – showing days and activities.

👨‍👩‍👧 Parent Tips

• Tip 1: Encourage your child to use <caption> for every table – it is a good habit.
• Tip 2: Help them understand the importance of accessibility – ask them how a blind person would read the table.
• Tip 3: Remind them to always test their tables – check that the data is correct and easy to read.

💡 Interesting Facts

• Fact 1: The first HTML table was introduced in 1995 by Netscape.
• Fact 2: Tables were originally used for layout before CSS became popular.
• Fact 3: The scope attribute was introduced to improve accessibility for tables.

🤔 Did You Know?

• Did you know? That you can nest tables inside tables? But it is not recommended – it makes them hard to read.
• Did you know? That colspan and rowspan can be used together to create very complex table layouts?
• Did you know? That aria-label is part of the ARIA (Accessible Rich Internet Applications) specification?

🧠 Remember This

• 1. Always use <thead>, <tbody>, and <tfoot> for structure.
• 2. Use scope to make tables accessible.
• 3. Add a caption to explain what the table is about.
• 4. Use colspan and rowspan to merge cells.
• 5. Use aria-label for complex tables.

❌ Common Mistakes

✅ Best Practices

📊 ASCII Illustrations

Table Structure with thead, tbody, tfoot

        +------------------------------------------+
        |  <caption>Table Title</caption>          |
        +------------------------------------------+
        |  <thead>                                 |
        |  +------------+------------+             |
        |  |  Header 1  |  Header 2  |             |
        |  +------------+------------+             |
        |  </thead>                                |
        +------------------------------------------+
        |  <tbody>                                 |
        |  +------------+------------+             |
        |  |  Data 1    |  Data 2    |             |
        |  |  Data 3    |  Data 4    |             |
        |  +------------+------------+             |
        |  </tbody>                                |
        +------------------------------------------+
        |  <tfoot>                                 |
        |  +------------+------------+             |
        |  |  Total 1   |  Total 2   |             |
        |  +------------+------------+             |
        |  </tfoot>                                |
        +------------------------------------------+
    

colspan and rowspan Illustration

        colspan (horizontal merge):
        +-------------------------+
        |  A (spans 2 columns)    |
        +------------+------------+
        |  B         |  C         |
        +------------+------------+

        rowspan (vertical merge):
        +------------+------------+
        |  A (spans  |  B         |
        |  2 rows)   +------------+
        |            |  C         |
        +------------+------------+
    

Accessible Table with scope

        +------------------+------------------+
        |  <th scope="col">Name</th>         |
        |  <th scope="col">Age</th>          |
        +------------------+------------------+
        |  <th scope="row">Ade</th>          |
        |  <td>13</td>                      |
        +------------------+------------------+
        |  <th scope="row">Bola</th>         |
        |  <td>14</td>                      |
        +------------------+------------------+
    

📋 Comparison Tables

Table Elements

Element	Purpose	Example
<table>	Container for the table	<table>...</table>
<tr>	Defines a row	<tr><td>Data</td></tr>
<td>	Defines a data cell	<td>Text</td>
<th>	Defines a header cell	<th>Header</th>
<thead>	Groups header rows	<thead>...</thead>
<tbody>	Groups data rows	<tbody>...</tbody>
<tfoot>	Groups footer rows	<tfoot>...</tfoot>
colspan	Merges cells horizontally	colspan="2"
rowspan	Merges cells vertically	rowspan="2"
scope	Accessibility for headers	scope="col"

Accessibility Features

Feature	Purpose	When to use
scope	Associates headers with data cells	All tables with headers
<caption>	Provides a title for the table	All tables
aria-label	Provides extra description	Complex or data-heavy tables

📚 End-of-Module Summary

❓ Frequently Asked Questions

• Q1: Why should I use <thead>, <tbody>, and <tfoot>?
  A: They organise your table into logical sections, making it easier to read and style.
• Q2: What is the difference between colspan and rowspan?
  A: colspan merges cells horizontally (across columns). rowspan merges cells vertically (across rows).
• Q3: What is scope used for?
  A: It tells screen readers whether a header applies to a column (scope="col") or a row (scope="row").
• Q4: Why should I add a caption to my table?
  A: It explains what the table is about, which helps everyone understand it.
• Q5: What is aria-label used for?
  A: It provides an extra description for screen readers, especially for complex tables.
• Q6: Can I use colspan and rowspan together?
  A: Yes, you can use them together to create very complex table layouts.
• Q7: What is the difference between <th> and <td>?
  A: <th> is for headers (labels). <td> is for data (values).
• Q8: Can I add images or links inside a table?
  A: Yes, you can put almost any HTML element inside a <td> or <th>.
• Q9: Why is table accessibility important?
  A: It helps people with visual impairments understand the table using screen readers.
• Q10: How do I test if my table is accessible?
  A: Use a screen reader or a browser extension like WAVE to test accessibility.

🔗 Matching Exercises

Match the table element on the left with its correct description on the right.

Element	Description
<thead>	A. Merges cells horizontally
<tbody>	B. Merges cells vertically
<tfoot>	C. Groups header rows
colspan	D. Groups data rows
rowspan	E. Groups footer rows
scope	F. Provides a title for the table
<caption>	G. Associates headers with data cells

(Answers: 1-C, 2-D, 3-E, 4-A, 5-B, 6-G, 7-F)

📝 Scenario-based Exercises

👥 Group Activity

Activity: In groups of 3–4 students, choose a topic and create a data table. Some ideas:

• A league table for a sports tournament (teams, matches, points).
• A price list for a shop (items, prices, discounts).
• A class timetable (subjects for each day).
• A student grade report (subjects and scores).

Your table must include:

• <thead>, <tbody>, and <tfoot>.
• scope for accessibility.
• A caption.
• At least one colspan or rowspan.

Present your table to the class.

🧑‍💻 Individual Activity

Activity: Create a table showing the "Top 10 Nigerian Football Clubs". Include columns for:

• Rank (row header).
• Club Name.
• City/State.
• Founded Year.
• Number of League Titles.

Use <thead>, <tbody>, scope, and a caption. Add a <tfoot> with a summary (e.g., "Total clubs listed: 10").

Save it as clubs.html and open it in your browser.

🛠️ Mini Project

📋 Practical Assignment

Assignment: Create a "School Report Card" table for 5 students. The table should include:

• Student Name (row headers).
• Subjects: Maths, English, Science, Social Studies.
• Scores for each subject.
• Total score (use <tfoot> for the total).
• A caption explaining the report card.
• scope on all headers.
• Use colspan to merge the "Subjects" header across all subjects.

Submit your HTML file.

🔑 Key Takeaways

• 1. Tables organise data in rows and columns – they are perfect for structured information.
• 2. Use <thead>, <tbody>, and <tfoot> for structure.
• 3. Use colspan and rowspan to merge cells.
• 4. Use scope to make tables accessible for screen readers.
• 5. Add a caption to explain what the table is about.
• 6. Use aria-label for complex tables.
• 7. Always test your tables to ensure they are clear and accessible.

💬 Classroom Discussion Questions

• 1. Why do you think it is important to use scope in tables?
• 2. How would you explain colspan and rowspan to a 10-year-old?
• 3. When would you use <tfoot> instead of just adding a row at the bottom?
• 4. Why is a caption important for a table?
• 5. Can you think of a situation where a table might not be the best way to present data?

🚀 Preparation for Module 7

Excellent work on Module 6! You are now a master of building structured and accessible tables. In Module 7, we will dive into Accessibility, SEO, and Best Practices. You will learn how to:

• Use ARIA landmarks (like role="main") to help screen readers.
• Improve your SEO with proper heading hierarchy and meta tags.
• Use the lang attribute correctly.
• Test your website using the W3C Validator and Lighthouse.

Before you start Module 7, make sure you can:

• Create a table with <thead>, <tbody>, and <tfoot>.
• Use colspan and rowspan to merge cells.
• Add scope and a caption to a table.

Keep learning and experimenting – every table you build is a step towards becoming a great developer! 💻🌟

---

Module 6: Tables (Beyond Basic Grids) • Written with 💖 for young coders in Nigeria and around the world.

♿ Module 7: Accessibility, SEO & Best Practices

Building websites that work for everyone – and rank high on Google!

📖 Module Introduction

Welcome to Module 7 – the final module of your HTML Level Two journey! In the previous six modules, you learned how to build the modern HTML framework, make your content rich and meaningful, master hyperlinks, add media, build forms, and create structured tables. You have come a long way!

Now, in Module 7, we are going to bring everything together and learn about the most important qualities of a great website: Accessibility, SEO, and Best Practices.

Accessibility means making your website usable by everyone, including people with disabilities – like people who cannot see well or cannot use a mouse. SEO (Search Engine Optimisation) means helping search engines like Google find and understand your page, so people can find it when they search. Best Practices are the rules that good developers follow to write clean, reliable code.

Think of this module as polishing your masterpiece. You have built a beautiful website – now we are going to make it shine for everyone and be easy to find.

Let us begin our final journey!

🎯 Learning Objectives

By the end of this module, you will be able to:

• Understand why accessibility matters and how to make your website accessible.
• Use ARIA landmarks (like role="main") to help screen readers.
• Understand SEO and why it is important for your website.
• Use proper heading hierarchy (h1 to h6) for SEO and accessibility.
• Use the lang attribute correctly.
• Validate your HTML using the W3C Validator.
• Test your website using Lighthouse in Chrome DevTools.
• Apply best practices for writing clean, maintainable HTML.

📚 Warm-up Story: Ade’s Invisible Visitors

Ade was a 13-year-old boy who loved building websites. He had just finished creating a beautiful website for his school, Unity Academy. It had a homepage, a news page, a contact form, and even a gallery of photos. He was very proud of his work.

But one day, his teacher said, “Ade, I cannot read your website.” Ade was confused. “Why not?” he asked. “Because I am blind,” the teacher replied. “I use a screen reader to read web pages. Your website does not work with my screen reader.”

Ade was shocked. He had never thought about people with disabilities. He also noticed that his website was not showing up on Google when he searched for it. His friends could not find it!

Ade’s big sister, who was a web developer, said, “Ade, you need to learn about accessibility and SEO. You need to make your website work for everyone – including people with disabilities – and make it easy to find on Google. Let me teach you the best practices.”

In this module, you will learn exactly what Ade learned. You will learn how to make your website accessible, discoverable, and polished. Let us get started!

🧩 Main Lessons

Lesson 1: What is Accessibility?

Definition: Accessibility (often called a11y) is the practice of making your website usable by everyone, including people with disabilities.

Why important: About 15% of the world’s population has some form of disability. If your website is not accessible, you are excluding millions of people.

Simple explanation: Accessibility is like building ramps next to stairs. Ramps let everyone enter the building – including people in wheelchairs, people with strollers, and people with heavy luggage.

Real-life example: A library has a ramp at the entrance so that everyone can enter. A website with good accessibility is like that library – everyone can use it.

School example: Your school has signs in Braille for students who cannot see. That is accessibility.

Home example: Your TV has subtitles for people who are hard of hearing – that is accessibility.

Nigerian example: In Nigeria, many buildings are being built with ramps for wheelchair users – that is accessibility.

Illustration:

        Without accessibility:
        +------------------+
        |  Website         |
        |  (not accessible)|
        +------------------+
        Some people cannot use it.

        With accessibility:
        +------------------+
        |  Website         |
        |  (accessible)    |
        +------------------+
        Everyone can use it! 🎉
    

Lesson 2: ARIA Landmarks – Helping Screen Readers

Definition: ARIA (Accessible Rich Internet Applications) landmarks are special attributes that help screen readers understand the structure of your page.

Why important: They allow screen reader users to jump directly to the main content, navigation, or other important sections of your page.

Simple explanation: ARIA landmarks are like signposts in a building. They tell a blind person, “This is the entrance,” “This is the main hall,” and “This is the exit.”

Real-life example: In a shopping mall, there are signs that say “Food Court,” “Restrooms,” and “Exit” – those are landmarks.

School example: Your school has signs that say “Library,” “Cafeteria,” and “Classrooms” – those are landmarks.

Home example: Your house has rooms labelled “Kitchen,” “Bedroom,” and “Bathroom” – those are landmarks.

Nigerian example: A Nigerian market has sections labelled “Foodstuffs,” “Clothing,” and “Electronics” – those are landmarks.

Code example:

        <header role="banner">...</header>
        <nav role="navigation">...</nav>
        <main role="main">...</main>
        <aside role="complementary">...</aside>
        <footer role="contentinfo">...</footer>
    

Lesson 3: Redundant ARIA – When Not to Use It

Definition: Sometimes, semantic HTML tags already provide the same information as ARIA landmarks. Using both is redundant and can confuse screen readers.

Why important: Modern HTML tags like <header> and <nav> already have built-in roles. You only need ARIA when you are using non-semantic elements.

Simple explanation: It is like putting two labels on the same door – it confuses people. Use one label that is clear.

Code example (redundant):

        <header role="banner">...</header>  <!-- redundant -->
        <nav role="navigation">...</nav>    <!-- redundant -->
        <main role="main">...</main>        <!-- redundant -->
    

Code example (correct):

        <header>...</header>   <!-- semantic HTML is enough -->
        <nav>...</nav>         <!-- semantic HTML is enough -->
        <main>...</main>       <!-- semantic HTML is enough -->
    

Lesson 4: SEO – Search Engine Optimisation

Definition: SEO is the practice of making your website easy for search engines like Google to find and understand.

Why important: Without SEO, your website might be invisible – no one will find it when they search.

Simple explanation: SEO is like putting a bright sign on your shop so people can find it easily.

Real-life example: A restaurant puts a big sign on the road – that is like SEO. People see the sign and come in.

School example: Your school has a big name on the gate – that is like SEO. People can find the school easily.

Home example: Your house has a house number – that is like SEO. People can find your house easily.

Nigerian example: A Nigerian business has a sign outside its shop – that is like SEO.

Key SEO factors:

• <title> – the page title.
• <meta name="description"> – a short description of the page.
• Proper heading hierarchy (h1 to h6).
• Semantic HTML.
• Fast loading speed.

Lesson 5: The <title> Tag – SEO’s Best Friend

Definition: <title> is the text that appears in the browser tab and is used by search engines to understand your page.

Why important: It is one of the most important SEO factors. A good title helps your page rank higher.

Simple explanation: The <title> is like the name of a book. It tells you what the book is about.

Code example:

        <title>Unity Academy – Best School in Lagos | News & Events</title>
    

Lesson 6: Meta Descriptions – Your Page’s Summary

Definition: A meta description is a short paragraph that summarises your page. It appears below the title in search results.

Why important: It tells people what your page is about and encourages them to click on it.

Simple explanation: A meta description is like the blurb on the back of a book – it tells you what the story is about.

Code example:

        <meta name="description" content="Unity Academy is the best school in Lagos. We offer quality education, sports, and extracurricular activities for students aged 5–18." />
    

Lesson 7: Heading Hierarchy – h1 to h6

Definition: Heading hierarchy is the correct order of headings on a page – h1 (most important) to h6 (least important).

Why important: It helps search engines understand your content structure and helps screen reader users navigate your page.

Simple explanation: Headings are like the chapters of a book. h1 is the title of the book, h2 is the chapter title, and h3 is the subheading.

Code example (correct):

        <h1>Unity Academy</h1>
        <h2>About Us</h2>
        <h3>Our Mission</h3>
        <h2>Our Programs</h2>
        <h3>Academic Programs</h3>
        <h3>Sports Programs</h3>
    

Code example (incorrect):

        <h2>Unity Academy</h2>  <!-- should be h1 -->
        <h3>About Us</h3>
        <h1>Our Mission</h1>   <!-- skipped h2 -->
    

Lesson 8: The lang Attribute – Language Matters

Definition: The lang attribute tells the browser and screen readers what language your page is in.

Why important: It helps screen readers pronounce words correctly and helps search engines understand your page.

Simple explanation: The lang attribute is like telling someone, “I am speaking English” – so they know what to expect.

Code example:

        <html lang="en">   <!-- English -->
        <html lang="ha">   <!-- Hausa -->
        <html lang="yo">   <!-- Yoruba -->
        <html lang="ig">   <!-- Igbo -->
    

Lesson 9: W3C Validator – Checking Your Code

Definition: The W3C Validator is a tool that checks your HTML code for errors and ensures it follows the official standards.

Why important: Valid code works better, loads faster, and is more accessible. It also helps you catch mistakes early.

Simple explanation: The W3C Validator is like a spell-checker for your HTML. It finds typos and mistakes in your code.

How to use it:

• Go to validator.w3.org.
• Enter your URL or paste your HTML code.
• Click “Check” and see the results.

Lesson 10: Lighthouse – Your Website’s Report Card

Definition: Lighthouse is a tool in Chrome DevTools that scores your website on performance, accessibility, SEO, and best practices.

Why important: It gives you a clear report on how good your website is and tells you exactly what to fix.

Simple explanation: Lighthouse is like a report card for your website. It gives you grades in different areas and tells you how to improve.

How to use it:

• Open your page in Chrome.
• Open DevTools (right-click → Inspect).
• Click on the “Lighthouse” tab.
• Click “Generate report”.

Lesson 11: Best Practices – Writing Clean HTML

Definition: Best practices are the rules that good developers follow to write clean, maintainable, and reliable code.

Why important: Clean code is easier to read, easier to debug, and easier to share with others.

Simple explanation: Best practices are like good habits – they make you a better developer and make your code easier to work with.

Key best practices:

• Indent your code – use spaces or tabs to show structure.
• Use semantic tags – they are better for accessibility and SEO.
• Always close your tags – <p> needs </p>.
• Use lowercase for tag names – <div> not <DIV>.
• Add comments – <!-- this is a comment --> to explain your code.
• Validate your code – use the W3C Validator.

Lesson 12: Testing Your Website

Definition: Testing means checking your website to make sure it works correctly on different devices, browsers, and for different users.

Why important: It ensures that everyone can use your website, regardless of their device or ability.

Simple explanation: Testing is like checking your homework before you submit it – you want to catch any mistakes.

How to test:

• Screen reader testing: Use a screen reader (like NVDA or VoiceOver) to navigate your site.
• Device testing: Check your site on a phone, tablet, and computer.
• Browser testing: Check your site in Chrome, Firefox, and Edge.
• Validator testing: Use the W3C Validator to check your code.
• Lighthouse testing: Use Lighthouse to score your site.

📖 Key Vocabulary

• Accessibility: Making your website usable by everyone, including people with disabilities.
• ARIA: Accessible Rich Internet Applications – attributes that help screen readers.
• Landmark: A region of a page that has a specific role (e.g., main, navigation, header).
• SEO: Search Engine Optimisation – helping search engines find your site.
• Heading Hierarchy: The correct order of headings from h1 to h6.
• Meta Description: A short summary of your page that appears in search results.
• lang: An attribute that tells the browser the language of your page.
• W3C Validator: A tool that checks your HTML for errors.
• Lighthouse: A tool in Chrome that scores your website.
• Best Practices: Rules for writing clean, reliable code.

🧠 Important Concepts

• Inclusivity: Accessibility is not optional – it is a right. Everyone should be able to use the web.
• Discoverability: SEO helps people find your website. Without it, your site is invisible.
• Quality: Best practices make your code clean, maintainable, and reliable.
• Continuous Improvement: Use tools like Lighthouse and the W3C Validator to keep improving your site.

🪜 Step-by-step Explanations

How to make a page accessible:

1. Use semantic HTML (header, nav, main, footer).
2. Add alt text to all images.
3. Add lang to the <html> tag.
4. Use proper heading hierarchy.
5. Add aria-label where needed.
6. Test with a screen reader.

How to optimise a page for SEO:

1. Add a descriptive <title>.
2. Add a <meta name="description">.
3. Use proper heading hierarchy.
4. Use semantic HTML.
5. Add alt text to images.
6. Make sure your site loads fast.

🌍 Real-life Examples

• Example 1: A government website – it must be accessible to all citizens, including those with disabilities.
• Example 2: An e-commerce site – SEO helps it rank high on Google, bringing in more customers.
• Example 3: A news website – it uses semantic HTML to help screen readers and search engines.

🇳🇬 Nigerian Examples

• Example 1: A Nigerian government website – it should be accessible to all citizens, including those in rural areas with slow internet.
• Example 2: A Nigerian e-commerce site – SEO helps it rank high on Google, bringing in more customers.
• Example 3: A Nigerian school website – it uses semantic HTML and proper heading hierarchy.

🎮 Fun Examples Children Can Relate To

• Example 1: A video game website – accessibility means everyone can play, even people with disabilities.
• Example 2: A school project – SEO helps your teacher find it online.
• Example 3: A blog – best practices make it easy to read and understand.

🏠 Everyday Examples

• Example 1: A family website – accessibility means grandma can use it.
• Example 2: A recipe blog – SEO helps people find your recipes.
• Example 3: A travel blog – best practices make it easy to read on any device.

👨‍👩‍👧 Parent Tips

• Tip 1: Encourage your child to test their website with a screen reader – it is a great learning experience.
• Tip 2: Help them understand the importance of SEO – it is how people find websites.
• Tip 3: Remind them that best practices are like good habits – they make coding easier.

💡 Interesting Facts

• Fact 1: The W3C (World Wide Web Consortium) was founded in 1994 by Tim Berners-Lee, the inventor of the web.
• Fact 2: Lighthouse was created by Google to help developers improve their websites.
• Fact 3: The first version of HTML was released in 1993.

🤔 Did You Know?

• Did you know? That you can write Arabic, Hausa, Yoruba, and Igbo using HTML? The lang attribute supports all of them.
• Did you know? That screen readers are used by millions of people around the world?
• Did you know? That Google uses more than 200 factors to rank websites – and accessibility is one of them?

🧠 Remember This

• 1. Accessibility is for everyone – not just people with disabilities.
• 2. SEO helps people find your website – it is like a signpost.
• 3. Use semantic HTML – it is better for accessibility and SEO.
• 4. Always validate your code – it catches mistakes.
• 5. Use Lighthouse to score your website and improve it.
• 6. Best practices make your code clean and reliable.

❌ Common Mistakes

✅ Best Practices

📊 ASCII Illustrations

ARIA Landmarks in a Page

        +------------------------------------------+
        |  <header> (banner)                       |
        |  Logo, title, etc.                       |
        +------------------------------------------+
        |  <nav> (navigation)                     |
        |  Home | About | Contact                  |
        +------------------------------------------+
        |  <main> (main)                          |
        |  Main content of the page                |
        +------------------------------------------+
        |  <aside> (complementary)                |
        |  Sidebar with related links              |
        +------------------------------------------+
        |  <footer> (contentinfo)                 |
        |  Copyright, contact info                 |
        +------------------------------------------+
    

SEO Factors Flowchart

        SEO Factors
              |
              V
        +------------------+
        |  On-page SEO     |
        |  - Title tag     |
        |  - Meta desc.    |
        |  - Headings      |
        |  - Semantic HTML |
        |  - alt text      |
        +------------------+
              |
              V
        +------------------+
        |  Off-page SEO    |
        |  - Backlinks     |
        |  - Social media  |
        +------------------+
              |
              V
        +------------------+
        |  Technical SEO   |
        |  - Page speed    |
        |  - Mobile friendly|
        |  - Valid code    |
        +------------------+
    

Heading Hierarchy

        h1 – Main title (only one)
          |
          V
        h2 – Section title
          |
          +--- h3 – Subsection title
          |      |
          |      +--- h4 – Sub-subsection title
          |
          +--- h3 – Subsection title
              |
              +--- h4 – Sub-subsection title
    

📋 Comparison Tables

Accessibility Features

Feature	Purpose	When to use
alt attribute	Describes images for screen readers	All images
lang attribute	Sets the page language	Every page
Semantic HTML	Provides meaning to content	All content
ARIA landmarks	Helps screen readers navigate	When semantic HTML is not enough
scope	Associates headers with data cells	All tables

SEO Factors

Factor	Impact	How to improve
<title>	High	Make it descriptive and include keywords
Meta description	Medium	Write a compelling summary
Heading hierarchy	High	Use h1 to h6 correctly
Semantic HTML	Medium	Use tags like <header>, <nav>
Page speed	High	Optimise images, use lazy loading

📚 End-of-Module Summary

❓ Frequently Asked Questions

• Q1: What is accessibility?
  A: Accessibility means making your website usable by everyone, including people with disabilities.
• Q2: What are ARIA landmarks?
  A: ARIA landmarks are attributes that help screen readers navigate your page.
• Q3: Why is SEO important?
  A: SEO helps people find your website on search engines like Google.
• Q4: What is heading hierarchy?
  A: It is the correct order of headings from h1 (most important) to h6 (least important).
• Q5: What does the lang attribute do?
  A: It tells the browser and screen readers the language of your page.
• Q6: What is the W3C Validator?
  A: It is a tool that checks your HTML for errors.
• Q7: What is Lighthouse?
  A: It is a tool in Chrome that scores your website on performance, accessibility, SEO, and best practices.
• Q8: Why should I use semantic HTML?
  A: It is better for accessibility and SEO.
• Q9: What are best practices?
  A: They are rules for writing clean, reliable code.
• Q10: How do I test my website?
  A: Use screen readers, devices, browsers, validators, and Lighthouse.

🔗 Matching Exercises

Match the concept on the left with its correct description on the right.

Concept	Description
Accessibility	A. Helps search engines find your website
SEO	B. A tool that checks your HTML for errors
ARIA landmarks	C. Making your website usable by everyone
Heading hierarchy	D. Signposts for screen readers
W3C Validator	E. The correct order of headings from h1 to h6
Lighthouse	F. A tool that scores your website
Best practices	G. Rules for writing clean, reliable code

(Answers: 1-C, 2-A, 3-D, 4-E, 5-B, 6-F, 7-G)

📝 Scenario-based Exercises

👥 Group Activity

Activity: In groups of 3–4 students, review each other's websites (from the Mini Project in Module 6). Use the following checklist:

• Is there alt text on all images?
• Is there a lang attribute on the <html> tag?
• Is there a proper heading hierarchy?
• Is there a <title> and a meta description?
• Is the code indented and clean?
• Does the page pass the W3C Validator?
• What is the Lighthouse score?

Present your findings to the class and suggest improvements.

🧑‍💻 Individual Activity

Activity: Take your favourite website (from any of the previous modules) and test it:

• Run it through the W3C Validator – fix any errors.
• Run Lighthouse – write down the scores for Performance, Accessibility, SEO, and Best Practices.
• Make at least 3 improvements based on the results.
• Test it with a screen reader (or use a screen reader extension).

Write a short report on your findings and the improvements you made.

🛠️ Mini Project

📋 Practical Assignment

Assignment: Create a new HTML page for a "Unity Academy" website. The page should include:

• A <header> with the school name and a navigation menu.
• A <main> section with the school's mission and vision.
• A <footer> with contact information.
• At least one image with alt text.
• Proper heading hierarchy (h1, h2, h3).
• A <title> and a meta description.
• The lang attribute on the <html> tag.
• Clean, indented code.

Run the page through the W3C Validator and Lighthouse. Fix any issues and submit the final HTML file along with a screenshot of your Lighthouse report.

🔑 Key Takeaways

• 1. Accessibility makes your website usable by everyone – it is a right, not a luxury.
• 2. SEO helps people find your website – without it, your site is invisible.
• 3. Semantic HTML is the foundation of accessibility and SEO.
• 4. Use tools like the W3C Validator and Lighthouse to check and improve your code.
• 5. Best practices make your code clean, reliable, and easy to maintain.
• 6. Always test your website on different devices, browsers, and with screen readers.

💬 Classroom Discussion Questions

• 1. Why do you think accessibility is often overlooked by developers?
• 2. How would you explain SEO to someone who has never heard of it?
• 3. Why is it important to use semantic HTML instead of generic <div> tags?
• 4. What is the most surprising thing you learned about accessibility or SEO?
• 5. How can you encourage other developers to care about accessibility?

🚀 What's Next?

Congratulations! You have completed HTML Level Two – all 7 modules! You have learned so much:

• Module 1: The Modern HTML Framework
• Module 2: Advanced Text & Content Structuring
• Module 3: Mastering Hyperlinks & Navigation
• Module 4: Media Integration
• Module 5: HTML Forms (Intermediate Level)
• Module 6: Tables (Beyond Basic Grids)
• Module 7: Accessibility, SEO & Best Practices

You are now ready to take the next step in your web development journey. Here are some suggestions:

• Learn CSS: Make your websites beautiful with styles and colours.
• Learn JavaScript: Make your websites interactive and dynamic.
• Build a portfolio: Create a website to showcase all your projects.
• Start a blog: Share what you have learned with the world.
• Join a community: Connect with other young developers.

Keep learning, keep building, and remember – you have the power to create amazing things on the web! 🌐💻🌟

---

Module 7: Accessibility, SEO & Best Practices • Written with 💖 for young coders in Nigeria and around the world.