PNL Learn

Semantic HTML and Forms

Mark up rich content, media, tables and forms the right way.

Go past the basics and mark up everything a real site holds. You will quote and cite sources, write dates and abbreviations machines can read, show code and keyboard keys, serve responsive images, audio and video with captions, build data tables a screen reader can navigate, and build forms that work for everyone: labeled controls, the right input types, grouped choices, built-in validation with clear error messages, and the metadata that shapes search results and link previews. Every exercise runs in a live preview, is checked against the page the browser actually builds, and must pass automated accessibility checks. The course ends with four projects: a survey form, a documentation page, an event schedule and an accessible media page.

BeginnerHTML and CSS7 lessons72 exercisesAbout 4.5 h
Create a free account

What you will learn

  • Semantic HTML
  • Media and captions
  • Data tables
  • Accessible forms
  • Form validation
  • SEO metadata
  • Accessibility

Lessons

  1. 1

    Rich Text Semantics

    Quotations and citations, abbreviations, addresses, dates, code, keys, highlights, other languages and character references.

    13 exercises

  2. 2

    Media

    Responsive images, formats, lazy loading, audio and video with captions, transcripts, titled embeds and inline SVG.

    11 exercises

  3. 3

    Tables

    Data tables with captions, header cells and scope, row groups, merged cells, and why tables are never for layout.

    10 exercises

  4. 4

    Forms and Inputs

    Forms that send data, GET and POST, a label for every control, input types, autocomplete, grouped choices, select, textarea and button types.

    11 exercises

  5. 5

    Built-in Validation

    required, ranges, lengths, patterns and type checks, the validity object, error messages tied to their fields, :user-invalid, and why the server checks again.

    10 exercises

  6. 6

    Metadata, SEO and Debugging HTML

    Titles and descriptions for search results, link previews, favicons, canonical URLs, validator messages, view source and the inspector.

    10 exercises

  7. 7

    Putting It Together

    Four projects from a brief: a survey form, a technical documentation page, an event schedule and an accessible media page.

    7 exercises

How you practice

You practice in the browser and every exercise gives you feedback right away. This course uses these formats:

  • Code exercise: 23
  • Fix the bug: 15
  • Type the answer: 14
  • Multiple choice: 6
  • Match the pairs: 4
  • Spot the bug: 4
  • Fill in the blank: 3
  • Select all that apply: 2
  • Reorder lines: 1

Aligned to

CS2023ACM / IEEE-CS / AAAISource
  • Specialized Platform Development
    • SPD-WebWeb Platforms
  • Human-Computer Interaction
    • HCI-AccessibilityAccessibility and Inclusive Design
MDN Curriculum (core)MozillaSource
  • Semantic HTML
    • 2.1Basic HTML syntax
    • 2.2Structuring documents
    • 2.4Advanced text techniques
    • 2.6Media
    • 2.7Other interactive elements
    • 2.8Tables
    • 2.9Debugging HTML
  • CSS fundamentals
    • 3.9Styling form elements
  • Accessibility
    • 7.1Accessibility basics
WCAG 2.2 Level A and AAW3CSource
  • Perceivable
    • 1.2.1Audio-only and Video-only (Prerecorded)
    • 1.2.2Captions (Prerecorded)
    • 1.2.3Audio Description or Media Alternative (Prerecorded)
    • 1.2.5Audio Description (Prerecorded)
    • 1.3.1Info and Relationships
    • 1.3.5Identify Input Purpose
    • 1.4.2Audio Control
  • Operable
    • 2.5.3Label in Name
  • Understandable
    • 3.1.2Language of Parts
    • 3.3.1Error Identification
    • 3.3.2Labels or Instructions
    • 3.3.3Error Suggestion

Proto Node Labs is not affiliated with or endorsed by ACM / IEEE-CS / AAAI, Mozilla and W3C. Exam names are trademarks of their owners.