HTML · HTML Examination & Practical Preparation · Lesson 30 of 32

HTML Examination & Practical Preparation

HTML Examination & Practical Preparation

HTML assessment generally evaluates two complementary skills: conceptual understanding and practical implementation.

A strong preparation strategy should therefore cover HTML terminology, document structure, elements, attributes, semantic HTML, forms, tables, multimedia, accessibility, SEO, responsive design, debugging, and practical webpage development.

Golden Rule:

Do not prepare HTML only by memorising tags. You should be able to identify, explain, write, debug, modify, and apply HTML code.

1. Complete HTML Examination Areas

Area What You Should Know
HTML Fundamentals HTML definition, elements, tags, attributes and document structure.
Text Headings, paragraphs, formatting and quotations.
Links Absolute URLs, relative URLs, anchors and navigation.
Images src, alt, dimensions, responsive images and optimization.
Lists Ordered, unordered and description lists.
Tables Rows, cells, headings, captions, spanning and accessibility.
Forms Controls, input types, labels, validation and submission.
Semantic HTML header, nav, main, section, article, aside and footer.
Multimedia Audio, video, source and embedded content.
Accessibility Semantic structure, alt text, labels, keyboard access and ARIA.
SEO Title, metadata, headings, links and semantic structure.
Responsive HTML Viewport, responsive images and mobile-friendly structure.
Advanced HTML Templates, Web Components, Shadow DOM, data attributes and native interactive elements.
Debugging Finding structural, attribute, nesting and validation errors.

2. Must-Know Definitions

These are frequently useful in short-answer, viva, and objective examinations.

Term Definition
HTML HyperText Markup Language used to structure webpages.
Element A complete HTML construct representing content or structure.
Tag Markup notation used to identify an HTML element.
Attribute Additional information or configuration associated with an element.
Semantic HTML HTML that communicates the meaning and role of content.
DOM Document Object Model representing the document as an object tree.
Accessibility Designing webpages so that people with different abilities can use them.
SEO Search Engine Optimization, improving content discoverability and interpretation.
Responsive Design Designing webpages to work effectively across different screen sizes and devices.

3. Essential HTML Document Structure

Be able to write the basic document structure without referring to notes. 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>HTML Practical</title>

</head>

<body>

    <h1>HTML Practical Examination</h1>

    <p>
        Welcome to the practical assessment.
    </p>

</body>

</html>
Exam Tip:

Memorise the structure, but understand the purpose of each section. Examiners may ask you to identify what belongs in <head> and what belongs in <body>.

4. Important Theory Questions

Q1. What is HTML?

Answer

HTML stands for HyperText Markup Language and is used to structure content on webpages.

Q2. Differentiate between an element and an attribute.

Answer

An element represents a complete HTML structure, while an attribute provides additional information or configuration for an element. 

<a
    href="https://example.com">

    Visit Website

</a>

Here, <a>...</a> is the element and href is an attribute.

Q3. What is semantic HTML?

Answer

Semantic HTML uses elements that communicate the meaning and purpose of their content, such as <header>, <nav>, <main>, and <article>.

Q4. Why is the alt attribute important?

Answer

It provides alternative text for images and is important for accessibility, particularly for users who cannot perceive the image.

Q5. What is the difference between GET and POST?

Answer

GET commonly sends request parameters through the URL and is generally used for retrieval-oriented operations. POST sends submitted data in the request body and is commonly used for operations that submit or modify data.

5. Output-Based Questions

In an output-based question, carefully read the markup and determine what the browser will render.

Question 1

<h1>HTML</h1>

<p>
    Learn <strong>HTML</strong> step by step.
</p>

Expected observation: A main heading followed by a paragraph in which HTML has strong importance.

Question 2

<ol>

    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>

</ol>

Expected observation: The browser displays a numbered list.

Question 3

<ul>

    <li>Python</li>
    <li>JavaScript</li>

</ul>

Expected observation: The browser displays an unordered list, normally using bullets.

Exam Tip:

Do not assume CSS styling when the question provides only HTML. Focus on what the HTML itself contributes.

6. Code-Writing Questions

Q1. Write HTML code to create a heading and paragraph.

Answer 
<h1>Web Development</h1>

<p>
    HTML provides the structure of a webpage.
</p>

Q2. Create a hyperlink to another webpage.

Answer 
<a href="https://example.com">
    Visit Website
</a>

Q3. Insert an accessible image.

Answer 
<img
    src="images/course.jpg"
    alt="HTML learning course">

Q4. Create an ordered list containing three subjects.

Answer 
<ol>

    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>

</ol>

7. Table Practical

A common practical task is to create a structured table.

Question

Create a table displaying the names, subjects and scores of three learners.

Solution

<table>

    <caption>
        Assessment Results
    </caption>

    <thead>

        <tr>
            <th>Student</th>
            <th>Subject</th>
            <th>Score</th>
        </tr>

    </thead>

    <tbody>

        <tr>
            <td>Alex Morgan</td>
            <td>HTML</td>
            <td>92</td>
        </tr>

        <tr>
            <td>Taylor Lee</td>
            <td>HTML</td>
            <td>87</td>
        </tr>

        <tr>
            <td>Jordan Smith</td>
            <td>HTML</td>
            <td>95</td>
        </tr>

    </tbody>

</table>
Practical Tip:

For a well-structured table, understand the roles of <caption>, <thead>, <tbody>, <tr>, <th>, and <td>.

8. Form Practical

Forms are one of the most important practical areas in HTML.

Question

Create a registration form containing name, email, password, course selection and a submit button.

Solution

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

    <div>

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

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

    </div>


    <div>

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

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

    </div>


    <div>

        <label for="password">
            Password
        </label>

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

    </div>


    <div>

        <label for="course">
            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>


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

</form>

9. Form Validation Practical

HTML provides several native validation features. 

<form>

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

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


    <label for="age">
        Age
    </label>

    <input
        id="age"
        name="age"
        type="number"
        min="13"
        max="100"
        required>


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

</form>
Attribute Purpose
required Requires a value.
min Specifies a minimum value where supported.
max Specifies a maximum value where supported.
minlength Specifies minimum text length.
maxlength Specifies maximum text length.
pattern Specifies a regular-expression-based constraint.

10. Semantic HTML Practical

Convert a generic webpage structure into semantic HTML.

Preferred Structure

<header>

    <h1>Learning Portal</h1>

    <nav>
        <a href="/">Home</a>
        <a href="/courses">Courses</a>
        <a href="/contact">Contact</a>
    </nav>

</header>


<main>

    <section>

        <h2>Featured Courses</h2>

        <article>

            <h3>HTML Fundamentals</h3>

            <p>
                Learn HTML from fundamentals to advanced concepts.
            </p>

        </article>

    </section>

</main>


<footer>

    <p>
        &copy; 2026 Learning Portal
    </p>

</footer>
Assessment Point:

The examiner may award marks not only for correct rendering but also for appropriate semantic structure.

11. HTML Debugging Practice

Identify and correct the errors in the following code.

Question

<html>

<head>

    <title>My Page</title>

<body>

    <h1>Welcome</h2>

    <p>
        Learn HTML

</body>

</html>

Problems

  1. The <head> element has not been closed.
  2. The heading opens with <h1> but closes with </h2>.
  3. The paragraph should be properly closed.

Corrected Version

<html>

<head>

    <title>My Page</title>

</head>

<body>

    <h1>Welcome</h1>

    <p>
        Learn HTML
    </p>

</body>

</html>

12. Common HTML Errors in Practical Exams

Error Correct Approach
Missing closing tags where required Check element structure and nesting.
Incorrectly nested elements Close elements in the correct order.
Missing alt on meaningful images Provide appropriate alternative text.
Unlabelled form controls Associate controls with labels.
Using headings for visual size Use headings according to document hierarchy.
Using tables for page layout Use tables for tabular data and CSS for layout.
Using div for everything Prefer semantic elements where appropriate.
Broken relative paths Verify file and folder structure.
Incorrect form control type Choose the input type matching the expected data.
Forgetting the viewport metadata Include appropriate viewport configuration for responsive pages.

13. Complete Practical Examination Project

Build a small responsive course webpage using HTML.

Required Features

  1. Document structure.
  2. Page title.
  3. Header and navigation.
  4. Main heading.
  5. Course description.
  6. Course image with alternative text.
  7. Ordered or unordered list of topics.
  8. Course information table.
  9. Registration form.
  10. Native form validation.
  11. FAQ using <details>.
  12. Footer.

Suggested File Structure

html-course/
│
├── index.html
│
├── images/
│   └── course.jpg
│
└── pages/
    └── registration.html

Suggested Page Structure

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>HTML Course</title>

</head>

<body>

    <header>

        <h1>HTML Fundamentals</h1>

        <nav>
            ...
        </nav>

    </header>


    <main>

        <section>

            <h2>Course Overview</h2>

            <img
                src="images/course.jpg"
                alt="HTML course">

            <p>
                Learn HTML from fundamentals to advanced concepts.
            </p>

        </section>


        <section>

            <h2>Course Topics</h2>

            <ul>
                ...
            </ul>

        </section>


        <section>

            <h2>Course Information</h2>

            <table>
                ...
            </table>

        </section>


        <section>

            <h2>Registration</h2>

            <form>
                ...
            </form>

        </section>


        <section>

            <h2>FAQs</h2>

            <details>
                ...
            </details>

        </section>

    </main>


    <footer>

        <p>
            &copy; 2026 HTML Course
        </p>

    </footer>

</body>

</html>

14. Practical Examination Task Bank

Level Task
Basic Create a webpage containing headings, paragraphs and text formatting.
Basic Create ordered and unordered lists.
Basic Create hyperlinks between two webpages.
Basic Insert images with meaningful alternative text.
Intermediate Create a structured table containing headings and multiple records.
Intermediate Create a registration form with appropriate controls.
Intermediate Apply native form validation.
Intermediate Create a semantic webpage using HTML5 elements.
Advanced Create a responsive image using srcset or picture.
Advanced Create expandable FAQ content using details and summary.
Advanced Create a reusable HTML structure using template.
Advanced Create a simple custom element using Web Components.
Advanced Debug and correct a deliberately broken HTML document.

15. HTML Practical Viva Questions

Q1. Why did you use <main>?

Answer

It identifies the primary content of the document and provides semantic structure and accessibility benefits.

Q2. Why did you use <nav>?

Answer

It identifies a section containing important navigation links.

Q3. Why is the alt attribute present?

Answer

It provides alternative text for the image and supports accessibility.

Q4. Why did you use required?

Answer

It applies a native constraint requiring the user to provide a value before successful form submission.

Q5. Why did you use a table?

Answer

The information represents tabular data with meaningful relationships between rows and columns.

Q6. Why should a table not be used for webpage layout?

Answer

Tables are intended for tabular data. Page layout should be handled through CSS layout mechanisms so that the document remains semantic, responsive, and accessible.

Q7. Why did you choose this input type?

Answer

Input types communicate the expected kind of data and can provide appropriate browser behavior and native validation.

Q8. What happens if JavaScript is disabled?

Answer

The answer depends on the application. A well-designed page should preserve its core HTML content and essential functionality wherever practical, following progressive enhancement principles.

16. Practical Examination Marking Strategy

When completing a practical task, work systematically rather than writing the entire document randomly.

  1. Read the complete question first.
  2. Identify all required components.
  3. Create the document skeleton.
  4. Add semantic structure.
  5. Insert content and controls.
  6. Check attributes.
  7. Validate nesting and closing tags.
  8. Test every link and form control.
  9. Check accessibility requirements.
  10. Review the final output before submission.
High-Scoring Approach:

Complete the required functionality first. Then use the remaining time to check semantics, accessibility, spelling, paths, validation, and presentation.

17. Five-Minute Debugging Checklist

Check Question
Document Is <!DOCTYPE html> present?
Language Does the document specify the correct lang?
Head Is the title present?
Viewport Is appropriate viewport metadata included?
Headings Is the heading hierarchy logical?
Images Are meaningful images given appropriate alternative text?
Links Do links point to the intended destinations?
Forms Are controls labelled and named appropriately?
Tables Are rows, headings and cells correctly structured?
Nesting Are elements correctly nested?
Paths Are image, stylesheet and page paths correct?
Console Are there browser errors related to the page?

18. Common Examination Traps

Trap Correct Understanding
HTML is a programming language. HTML is a markup language.
<h1> is used simply because it looks largest. Headings should represent document hierarchy.
<br> should be repeatedly used for layout. Use CSS for layout and spacing.
Every image needs descriptive alt text. Meaningful images need appropriate alternative text; decorative images can use empty alt text.
Tables are ideal for webpage layout. Tables are for tabular data.
ARIA should always be added to semantic elements. Prefer native semantics and add ARIA only when needed.
GET and POST are interchangeable. They have different HTTP semantics and use cases.

19. Examination Question Bank

One-Mark Questions

  1. What does HTML stand for?
  2. What is the purpose of the DOCTYPE declaration?
  3. Which attribute provides alternative text for an image?
  4. Which element represents the main content of a document?
  5. Which element is used to create a hyperlink?
  6. Which element represents tabular data?
  7. Which attribute identifies a form control during submission?
  8. What is the purpose of the required attribute?
  9. What does DOM stand for?
  10. What is the purpose of the lang attribute?

Two-Mark Questions

  1. Differentiate between HTML elements and attributes.
  2. Differentiate between ordered and unordered lists.
  3. Explain semantic HTML with two examples.
  4. Differentiate between GET and POST.
  5. Explain the purpose of alternative text.
  6. Explain the difference between <section> and <article>.
  7. What is the purpose of the viewport meta tag?
  8. Explain the difference between <progress> and <meter>.

Four/Five-Mark Questions

  1. Explain the structure of a complete HTML document with suitable code.
  2. Design an accessible registration form using appropriate HTML controls and validation attributes.
  3. Explain semantic HTML and describe the purpose of major semantic elements.
  4. Explain responsive image techniques using srcset, sizes, and <picture>.
  5. Explain Web Components, Custom Elements, Shadow DOM, templates, and slots.

20. Advanced Practical Challenge

Create a complete Course Registration Portal using HTML.

Requirements

  1. Use semantic HTML5 structure.
  2. Create a navigation section.
  3. Add a course description.
  4. Add a responsive course image.
  5. Create a course information table.
  6. Create an accessible registration form.
  7. Use at least five appropriate input types.
  8. Apply native validation.
  9. Add an expandable FAQ.
  10. Add an audio or video resource.
  11. Use meaningful headings.
  12. Provide alternative text for meaningful images.
  13. Use appropriate metadata.
  14. Test the page on different viewport sizes.
Advanced Challenge:

After completing the page, inspect it using browser developer tools and identify opportunities to improve accessibility, semantics, performance, and maintainability.

21. Rapid-Fire Viva Revision

Question Answer
HTML full form? HyperText Markup Language.
HTML programming language? No.
Purpose of DOCTYPE? Declares the HTML document type and enables standards-oriented rendering.
Image alternative text? alt.
Hyperlink element? <a>.
Main content element? <main>.
Navigation element? <nav>.
Tabular data? <table>.
Form label? <label>.
Required form field? required.
DOM full form? Document Object Model.
Expandable native content? <details> and <summary>.
Task completion? <progress>.
Measurement within a range? <meter>.
Reusable HTML template? <template>.
Custom reusable component? Web Components / Custom Elements.

22. Last-Minute Examination Preparation

If only a short amount of time remains before the examination, revise in the following order:

  1. Document structure
  2. Headings and text formatting
  3. Links and images
  4. Lists and tables
  5. Forms and validation
  6. Semantic HTML5
  7. Accessibility
  8. Responsive HTML
  9. SEO fundamentals
  10. Multimedia and embedded content
  11. Debugging
  12. Advanced HTML concepts
Best Revision Method:

Spend less time rereading notes and more time writing HTML from memory, predicting output, correcting broken code, and building complete webpages.

23. Final HTML Examination Checklist

Skill Ready?
I can write a complete HTML document from memory. ☐
I can explain elements and attributes. ☐
I can create headings, paragraphs and formatted text. ☐
I can create links and navigation. ☐
I can insert accessible images. ☐
I can create ordered, unordered and description lists. ☐
I can create and structure tables. ☐
I can create accessible forms. ☐
I understand native form validation. ☐
I can use semantic HTML5 elements. ☐
I understand multimedia elements. ☐
I understand accessibility and ARIA basics. ☐
I understand HTML SEO fundamentals. ☐
I can create mobile-friendly HTML. ☐
I can debug incorrectly written HTML. ☐
I can use browser developer tools to inspect HTML. ☐
I understand templates and Web Components. ☐
I can build a complete webpage independently. ☐
Final Goal:

By the end of this preparation, you should be able to move from question → design → HTML structure → code → test → debug → improve without depending on a ready-made template.

Start This Course From the Beginning →