MICKAI® Trust AgentFree AI courses

web · Level 2

HTML: build a meaningful, accessible page

Write a real web page by hand, check it with the W3C validator and your keyboard, and learn to review the HTML an AI assistant gives you.

By Mickarle Wagstaff-Irons - Micky Irons

  • Level 2Getting going
  • 130 min
  • 6 chapters
  • Free PDF, no account
Download free PDF (PDF, 2.0 MB)
The Pageweb / 02

Start with the essentials

The short answer

Write HTML that says what things are: a page title, headings in order, landmarks such as header, nav, main and footer, lists, labelled form controls, real buttons and links, and meaningful alt text. Browsers, screen readers and search engines read that structure. Check it with the W3C Nu Html Checker, a keyboard-only pass and a contrast test, knowing that tools alone cannot judge accessibility.

What you will learn

  • You will be able to write a valid HTML page with a language, title, headings, landmarks, lists, links, an image, a data table and a labelled form.
  • You will be able to choose the right element for the job, and explain why a div is not a heading, a list or a button.
  • You will be able to check a page with the W3C Nu Html Checker, read its messages and say what it cannot see.
  • You will be able to test a page with the keyboard alone and with a colour contrast calculation.
  • You will be able to say what WCAG 2.2 is, which of its criteria this course exercises, and why these checks do not make a page "WCAG compliant".
  • You will be able to review HTML that an AI assistant generated and find its common faults.

Who it is for

Beginners to web pages, comfortable with a computer, a text editor and a browser, who want to write a real page by hand and understand what an AI assistant produces when it is asked for one. No JavaScript and no frameworks are used, and CSS only lightly.

Before you start

  • None. You need a computer, a plain text editor and a web browser.

Keep learning

The complete workbook

This workbook teaches HTML as structure and meaning, not looks. You will build a small invented community event page with a heading outline, navigation, an image, a programme table and a sign-up form that sends nothing anywhere, then check it with the W3C Nu Html Checker, your keyboard and a colour contrast calculation. You will also learn what WCAG 2.2 is and how to review HTML written by an AI assistant.

  1. 01
    Meaning first: the smallest valid page

    HTML says what each part of a page is. Write the smallest valid page, then meet the checker.

    In the workbook · 1 exercise
  2. 02
    Build the event page

    Type in a small, real page for an invented community event, then see why each part is there.

    In the workbook · 1 exercise
  3. 03
    Links, images and tables

    Vague links, useless alt text and fake tables are three easy faults to make.

    In the workbook · 1 exercise
  4. 04
    Forms and buttons

    A form is where people give you something, so every control must say what it is for.

    In the workbook · 1 exercise
  5. 05
    Test it like a user

    Tools find some problems. Your own hands and eyes find others.

    In the workbook · 1 exercise
  6. 06
    WCAG 2.2, and reviewing what an assistant writes

    Put a name to what you have been checking, then use it on HTML you did not write.

    In the workbook · 1 exercise

Also inside: a 10-point checklist, a glossary of 11 terms and 10 questions and answers to test yourself. 6 hands-on exercises, each with a worked answer at the back where the workbook gives one.

Download all 6 chapters as PDF (PDF, 2.0 MB)

No login, no card, no account. Before the download we ask you to follow Mickai (two quick links). Free to download and use for personal learning, study groups and inside your own team. Please do not resell the workbooks or republish them as your own. Link people to trust-agent.ai instead.

Test yourself

Questions and answers

What is semantic HTML?

HTML that uses the element matching the meaning of the content: h1 for a main heading, nav for a menu, button for a button, table for data. Browsers, screen readers and search engines can then tell what each part is. A div or span says nothing, so use one only when no meaningful element fits.

Does valid HTML mean an accessible page?

No. The Nu Html Checker tests whether markup follows the rules, not whether it is meaningful or usable. In this workbook's tests a snippet built mostly from divs, a form with no labels and an image with a useless alt text all passed with no messages. Use the checker to catch mistakes, then test with a keyboard and read the accessibility tree.

When should alt be empty?

When the image adds nothing the page does not already say, such as a decorative flourish, or an icon beside text that says the same. Write alt="", with the attribute present, so software skips it. Never leave the attribute out, and never use an empty alt for an image that carries information or is the only content of a link.

What should link text say?

Where the link goes or what it does, in words that make sense when read alone, such as "See the programme". Avoid "click here": people using screen readers can pull up a list of a page's links, and a list of identical vague phrases tells them nothing.

Should I use a link or a button?

Use a link (a with href) to go to another page or another place on the page. Use a button to do something on the current page. Real links and buttons can be reached with Tab and operated from the keyboard without extra work, and a div styled to look like one cannot. Add type="button" unless the button should submit a form.

Why does my form do nothing?

A form only gathers what someone types. To receive it, a program on a web server must be listening at the address the form sends to, and this workbook does not build one. The practice form's button is type="button" for that reason. Do not put a form on a public page unless you know where its data goes, and never test with real personal details.

How do I test a page with only a keyboard?

Put the mouse aside. Press Tab to move through links and controls, Shift and Tab to go back, Enter for links and buttons, Space for buttons and tick boxes, and the arrow keys inside radio groups. Check that everything is reachable, that the order follows the reading order and that you can always see where the focus is.

How much contrast does text need?

WCAG 2.2 level AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18 point, or 14 point bold). The ratio runs from 1:1 to 21:1 and is worked out from the brightness of the two colours. Use a contrast tool: grey #777777 on white is 4.48:1, so it just fails.

What is WCAG 2.2, and can I call my page compliant?

WCAG 2.2 is the W3C's web accessibility standard, a W3C Recommendation since 2023. Conformance means meeting every relevant criterion at a chosen level for whole pages, judged by people as well as tools. The checks in this workbook cover only some criteria, so say what you tested instead of claiming compliance. UK public sector bodies should read GOV.UK's guidance.

Can I trust HTML written by an AI assistant?

Treat it as a draft. It can be valid and plausible while still using divs for everything, missing labels, giving vague alt text or choosing headings for their size. Run the checker, read the accessibility tree, press Tab through the page and check contrast before you use it. Never paste passwords, keys or other people's data into a prompt.

When you have finished

Get your certificate of completion

Type your name and download a certificate for this workbook as a PDF, ready to print or to add to LinkedIn. It is made on your own device, so your name is never sent to us. It is a self-declared certificate, not an accredited qualification.

Make my certificate

Learn the language

Key terms

HTML
HyperText Markup Language: text with tags that says what each part of a page is.
Element and tag
A tag such as <p> marks the start or end of an element, one piece of a page with a meaning.
Semantic element
An element whose name says what it is, such as nav, main, h1 or table, as opposed to the generic div and span.
Landmark
A region of a page, such as banner, navigation, main or contentinfo, that assistive technology can jump to. header, nav, main and footer create them.
Accessibility tree
The browser's model of a page's items, with a name, role and state for each. Screen readers and other assistive technology use it.
Alt text
The alt attribute: text that replaces an image for people and software that cannot see it. An empty alt="" marks an image that adds nothing.

6 of the workbook's 11 terms. The complete glossary is in the workbook.

Follow the evidence

Sources and checks

Facts last checked: .

Examples in this workbook were run on: Microsoft Edge 153.0.4234.48 (system install) driven by Playwright 1.59.0 for Python 3.12.10 on Windows 11 Pro; HTML and CSS checked with the W3C Nu Html Checker online service (validator.w3.org/nu, checker version 26.9.16) through its JSON API and the form submission its web page uses (2026-09-26).

These workbooks use AI assistance. See how the workbooks are made.

  1. Web Content Accessibility Guidelines (WCAG) 2.2W3C
  2. WCAG 2 OverviewW3C Web Accessibility Initiative
  3. What's New in WCAG 2.2W3C Web Accessibility Initiative
  4. Page Structure TutorialW3C Web Accessibility Initiative
  5. Page RegionsW3C Web Accessibility Initiative
  6. HeadingsW3C Web Accessibility Initiative
  7. Images TutorialW3C Web Accessibility Initiative
  8. An alt Decision TreeW3C Web Accessibility Initiative
  9. Tables TutorialW3C Web Accessibility Initiative
  10. Caption & SummaryW3C Web Accessibility Initiative
  11. Forms TutorialW3C Web Accessibility Initiative
  12. Labeling ControlsW3C Web Accessibility Initiative
  13. Grouping ControlsW3C Web Accessibility Initiative
  14. Easy Checks: A First Review of Web AccessibilityW3C Web Accessibility Initiative
  15. Page Title (Easy Checks)W3C Web Accessibility Initiative
  16. Language (Easy Checks)W3C Web Accessibility Initiative
  17. Visible Keyboard Focus (Easy Checks)W3C Web Accessibility Initiative
  18. Color Contrast (Easy Checks)W3C Web Accessibility Initiative
  19. Zoom Levels (Easy Checks)W3C Web Accessibility Initiative
  20. Selecting Web Accessibility Evaluation ToolsW3C Web Accessibility Initiative
  21. Nu Html Checker (web service)W3C
  22. About the Nu Html CheckerW3C
  23. The Nu Html Checker (vnu)Nu Html Checker project
  24. Service: Input: POST body (Nu Html Checker wiki)Nu Html Checker project, GitHub
  25. HTML: A good basis for accessibilityMDN Web Docs
  26. Accessibility treeMDN Web Docs
  27. DoctypeMDN Web Docs
  28. The Metadata element: metaMDN Web Docs
  29. The meta name="viewport" attribute valueMDN Web Docs
  30. The Image Embed element: imgMDN Web Docs
  31. The Form Label element: labelMDN Web Docs
  32. The HTML Input element: inputMDN Web Docs
  33. The Button element: buttonMDN Web Docs
  34. CSS length (including the rem unit)MDN Web Docs
  35. The Content Division element: divMDN Web Docs
  36. HTML section heading elements (h1 to h6)MDN Web Docs
  37. HTML Standard: Grouping content (the main element)WHATWG
  38. HTML Standard: Document metadata (the title element and character encoding)WHATWG
  39. HTML Standard: Images (text alternatives)WHATWG
  40. HTML Standard: Form control infrastructure (implicit submission)WHATWG
  41. Understanding accessibility requirements for public sector bodiesGOV.UK, Government Digital Service and Central Digital and Data Office
  42. Testing for accessibilityGOV.UK Service Manual
  43. Test accessibility using the Accessibility tabMicrosoft Learn, Microsoft Edge developer documentation

Created by Mickarle Wagstaff-Irons - Micky Irons with the Mickai team. Published by Mickai LTD. Last updated 26 September 2026.

NextKeep going

Where to go next