HTML · HTML Final Challenge & Certification Practice · Lesson 32 of 32

HTML Final Challenge & Certification Practice

HTML Final Challenge & Certification Practice

This final challenge brings together the major HTML concepts covered throughout the course. It is designed to test whether you can understand, write, analyse, debug, and apply HTML in realistic situations.

Certification Goal:

Do not focus only on remembering HTML tags. Demonstrate that you can select the correct HTML element for a requirement, structure content semantically, create accessible forms, build tables correctly, debug errors, and develop a complete webpage.

1. Certification Skill Areas

The final assessment should cover the following competency areas.

Skill Area What You Should Demonstrate
HTML Fundamentals Document structure, elements, attributes and nesting.
Text & Content Headings, paragraphs, formatting and quotations.
Navigation Internal, external, email and page-section links.
Images Correct image usage, alternative text and optimisation.
Lists Ordered, unordered and description lists.
Tables Semantic table structure, headings, captions and scope.
Forms Controls, input types, labels, validation and accessibility.
Semantic HTML Meaningful structural elements and document hierarchy.
Multimedia Audio, video and embedded content.
SEO Titles, metadata, headings, links and semantic structure.
Accessibility Semantic HTML, labels, alt text, keyboard access and ARIA.
Responsive HTML HTML structure suitable for responsive presentation.
Debugging Finding structural, path, attribute and nesting errors.
Real-World Development Building a complete multi-page website.

2. Challenge 1 — Build a Complete Webpage

Create a webpage for an imaginary organisation called Global Learning Institute.

Requirements

  1. Create a valid HTML5 document.
  2. Add an appropriate page title.
  3. Create a header containing the organisation name.
  4. Create a navigation menu.
  5. Add an introductory section.
  6. Add an image with meaningful alternative text.
  7. Create a courses section.
  8. Create a course comparison table.
  9. Create a registration form.
  10. Add a contact section.
  11. Add a footer.

Suggested Structure

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0">

    <title>
        Global Learning Institute
    </title>

</head>


<body>

    <header>

        <h1>
            Global Learning Institute
        </h1>

        <nav aria-label="Primary navigation">
            ...
        </nav>

    </header>


    <main>

        <section>

            <h2>
                Learn for the Future
            </h2>

            ...

        </section>


        <section>

            <h2>
                Our Courses
            </h2>

            ...

        </section>


        <section>

            <h2>
                Registration
            </h2>

            ...

        </section>

    </main>


    <footer>

        ...

    </footer>

</body>

</html>

3. Challenge 2 — Semantic HTML Challenge

Replace inappropriate generic elements with semantic HTML.

Given Code

<div>

    <div>
        <h1>Technology News</h1>
    </div>

    <div>
        <a href="home.html">Home</a>
        <a href="news.html">News</a>
    </div>

    <div>

        <div>

            <h2>
                Artificial Intelligence
            </h2>

            <p>
                Artificial intelligence continues to evolve.
            </p>

        </div>

    </div>

    <div>
        Copyright 2026
    </div>

</div>

Expected Improvement

<header>

    <h1>
        Technology News
    </h1>

</header>


<nav aria-label="Primary navigation">

    <a href="home.html">
        Home
    </a>

    <a href="news.html">
        News
    </a>

</nav>


<main>

    <article>

        <h2>
            Artificial Intelligence
        </h2>

        <p>
            Artificial intelligence continues to evolve.
        </p>

    </article>

</main>


<footer>

    <p>
        &copy; 2026
    </p>

</footer>
Certification Tip:

Do not use semantic elements merely because they exist. Select them according to the meaning and role of the content.

4. Challenge 3 — Table Construction

Create a table representing course information.

Requirements

  • Use a table caption.
  • Use <thead>.
  • Use <tbody>.
  • Use <th> for headings.
  • Use scope where appropriate.
  • Use <td> for data cells.
<table>

    <caption>
        Course Catalogue
    </caption>

    <thead>

        <tr>

            <th scope="col">
                Course
            </th>

            <th scope="col">
                Duration
            </th>

            <th scope="col">
                Level
            </th>

        </tr>

    </thead>


    <tbody>

        <tr>

            <td>
                HTML Fundamentals
            </td>

            <td>
                6 Weeks
            </td>

            <td>
                Beginner
            </td>

        </tr>

    </tbody>

</table>

5. Challenge 4 — Accessible Registration Form

Create a course registration form containing:

  • Full name
  • Email address
  • Telephone number
  • Date of birth
  • Course selection
  • Learning mode
  • Areas of interest
  • Additional comments
  • Terms and conditions agreement
  • Submit button

Example

<form action="/register" method="post">

    <div>

        <label for="full-name">
            Full Name
        </label>

        <input
            type="text"
            id="full-name"
            name="full_name"
            required>

    </div>


    <div>

        <label for="email">
            Email Address
        </label>

        <input
            type="email"
            id="email"
            name="email"
            required>

    </div>


    <div>

        <label for="course">
            Select Course
        </label>

        <select
            id="course"
            name="course"
            required>

            <option value="">
                Select a course
            </option>

            <option value="html">
                HTML
            </option>

            <option value="css">
                CSS
            </option>

        </select>

    </div>


    <div>

        <label for="comments">
            Comments
        </label>

        <textarea
            id="comments"
            name="comments"
            rows="5">
        </textarea>

    </div>


    <button type="submit">
        Register
    </button>

</form>

6. Challenge 5 — Debug the HTML

Identify and correct the errors in the following code. 

<html>

<head>

    <title>My Website</title>

</head>

<body>

    <h1>Welcome</h2>

    <p>
        Learn HTML <strong>the right way</p>
    </strong>

    <img src="images/logo.png">

    <a href="contact.html">
        Contact
    </p>

</body>

</html>

Issues to Find

  1. Incorrect closing heading tag.
  2. Incorrect nesting of the strong element.
  3. Missing alternative text for the image.
  4. Incorrect closing tag for the link.
  5. Missing document language declaration.
  6. Missing character encoding metadata.

7. Certification MCQs

Q1. Which element represents the primary content of a webpage?

  1. <section>
  2. <main>
  3. <article>
  4. <body>

Answer: B — <main>

Q2. Which attribute provides alternative text for an image?

  1. src
  2. title
  3. alt
  4. href

Answer: C — alt

Q3. Which element should normally be used for navigation links?

  1. <navigation>
  2. <nav>
  3. <menu>
  4. <links>

Answer: B — <nav>

Q4. Which input type is appropriate for an email address?

  1. text
  2. mail
  3. email
  4. address

Answer: C — email

Q5. Which element provides a caption for a table?

  1. <caption>
  2. <title>
  3. <label>
  4. <legend>

Answer: A — <caption>

8. Short Answer Certification Questions

Q1. What is semantic HTML?

Answer: Semantic HTML uses elements whose names communicate the meaning and role of their content, such as <header>, <nav>, <main>, <article>, and <footer>.

Q2. Why is the alt attribute important?

Answer: It provides a textual alternative for an image when the image cannot be perceived or displayed and supports accessibility.

Q3. Why should tables not be used for webpage layout?

Answer: Tables are intended to represent relationships between tabular data. Using them for layout creates structural and accessibility problems and makes documents harder to maintain.

Q4. What is the purpose of the label element?

Answer: It identifies a form control and provides an accessible textual description for that control.

Q5. Is HTML client-side validation sufficient for security?

Answer: No. Client-side validation can be bypassed. Server-side validation and appropriate security controls are required.

9. HTML Interview Questions

Q1. What is the difference between <section> and <article>?

View Answer

A <section> represents a thematic grouping of content, while an <article> represents a self-contained piece of content that could potentially stand independently.

Q2. What is the purpose of the viewport meta tag?

View Answer

It controls how a webpage's viewport is interpreted on devices such as mobile phones and is commonly used as part of responsive web development.

Q3. What is the difference between an absolute and relative URL?

View Answer

An absolute URL specifies a complete address, while a relative URL specifies a resource location relative to the current document or base URL.

Q4. Why should ARIA not replace semantic HTML?

View Answer

Native HTML elements already provide semantics and built-in browser and accessibility support. ARIA should generally be used when native HTML cannot adequately express the required semantics or state.

Q5. What is the difference between id and class?

View Answer

An id identifies a particular element, whereas a class can be shared by multiple elements.

10. Certification Practical Examination

Complete the following task without copying an existing project.

Task: Global Learning Conference

Build a complete conference website using HTML.

Mandatory Requirements

  1. Homepage with a meaningful title.
  2. Semantic header and navigation.
  3. Conference introduction.
  4. Speaker section.
  5. Event schedule.
  6. Accessible registration form.
  7. Conference location information.
  8. At least one meaningful image.
  9. FAQ section.
  10. Contact section.
  11. Semantic footer.

Advanced Requirements

  • Use appropriate metadata.
  • Use semantic HTML5 elements.
  • Use accessible form labels.
  • Use table headers correctly.
  • Include appropriate alternative text.
  • Use meaningful link text.
  • Include an accessible navigation label.
  • Use a logical heading hierarchy.
  • Test the project using browser developer tools.

11. Certification Evaluation Rubric

Area Marks Evaluation
Document Structure 10 Valid and logical HTML structure.
Semantic HTML 10 Appropriate semantic elements.
Navigation 5 Working and meaningful links.
Forms 15 Controls, labels, types and validation.
Tables 10 Correct tabular structure.
Accessibility 15 Semantic structure, labels, alt text and usability.
SEO & Metadata 5 Appropriate title and metadata.
Code Quality 10 Readable, organised and maintainable code.
Testing & Debugging 10 Identification and correction of issues.
Project Completion 10 All requirements implemented successfully.
Total 100 Certification Assessment

12. Certification Readiness Levels

Score Level Interpretation
90–100% Excellent Strong command of HTML concepts and practical implementation.
80–89% Advanced Very good understanding with minor areas for improvement.
70–79% Proficient Good practical foundation with some revision required.
60–69% Developing Core concepts understood but practical skills need strengthening.
Below 60% Needs Revision Review fundamental concepts before attempting certification again.

13. Final Self-Assessment

Before attempting certification, answer Yes to each question below.

Skill Ready?
Can I create an HTML5 document from scratch? ☐
Can I choose the correct semantic element? ☐
Can I create accessible navigation? ☐
Can I create and structure tables correctly? ☐
Can I create accessible forms? ☐
Can I use appropriate input types? ☐
Can I use images with appropriate alt text? ☐
Can I embed audio and video correctly? ☐
Can I explain basic HTML accessibility? ☐
Can I explain basic HTML SEO practices? ☐
Can I identify common HTML errors? ☐
Can I use browser developer tools for debugging? ☐
Can I build a complete multi-page website? ☐
Can I explain my HTML code during an interview? ☐

14. Final HTML Revision

Remember the complete HTML development cycle: 

Understand Requirement
        ↓
Plan Content
        ↓
Design Information Structure
        ↓
Create HTML Document
        ↓
Use Semantic Elements
        ↓
Add Content
        ↓
Add Forms / Tables / Media
        ↓
Improve Accessibility
        ↓
Review SEO Structure
        ↓
Validate
        ↓
Debug
        ↓
Test
        ↓
Publish
Final Principle:

Good HTML is not about using the maximum number of tags. It is about using the right elements for the right content, with correct structure, accessibility, maintainability, and purpose.

15. Final Certification Practice Task

Build a complete Learning Management Portal containing:

  1. Home page
  2. Course catalogue
  3. Course details
  4. Instructor profiles
  5. Learning resources
  6. Course schedule
  7. Registration form
  8. FAQ section
  9. Contact page
  10. Accessible navigation

The project should demonstrate the HTML knowledge developed throughout this course without depending on copied templates.

Certification Rule:

Build it yourself, validate it, debug it, explain it, and improve it. If you can do all five confidently, you are ready to demonstrate practical HTML proficiency.

Start This Course From the Beginning →