TodayTools

HTML flashcards

The structure of every web page: semantics, forms, media and the native widgets that save you JavaScript.

Donate
Beginner friendly, starts from zero
Section
How to study
0
HTMLStart from zero · 1 of 12

What is HTML, in one plain sentence?

HTML is the language that tells a what each part of a web page is: this is a heading, this is a paragraph, this is a link, this is a picture.

HTML names the parts; it does not paint them.
Show again
12 left
Got it

Tap to turn over. Swipe right if you know it, left to see it again.

All topics

What you will learn

  1. Start from zero

    • What HTML is4 cards
    • How the web fits together3 cards
    • Tags, elements and attributes3 cards
    • Getting started2 cards

  2. Core basics

    • Page structure and head4 cards
    • Writing correct markup5 cards
    • Headings and text meaning3 cards
    • Links and images2 cards
    • Lists and display2 cards
    • Comments and semantic controls2 cards

  3. Next steps

    • Page landmarks2 cards
    • Form controls and labels4 cards
    • Form submission and validation4 cards
    • Tables2 cards
    • Audio, video and images3 cards
    • Data attributes and disclosure2 cards
    • Sharing and search metadata2 cards

  4. Go deeper

    • Responsive images2 cards
    • Dialogs and popovers3 cards
    • Accessibility in depth2 cards
    • Scripts and resource hints4 cards
    • Templates and web components3 cards
    • Structured data and parsing rules2 cards
    • Security2 cards

Final test and certificate

10 questions drawn fresh from the whole topic, about 15 minutes. Sign in, score 80% or more and get a free certificate with your name and a public check link anyone can open, such as an employer or a teacher. Not signed in? Try a practice test from the cards.

Take the final test

About these cards

  • Reviewed 26 October 2026
  • CoversHTML Living Standard (October 2026)WCAG 2.2Evergreen browsers: Chrome, Edge, Firefox, Safari
How these cards are made

HTML at a glance

HTML is the language that tells a browser what each part of a web page is.

HTML is the frame of a house: walls and rooms. CSS is the paint, and JavaScript is the lights and switches.

Words you will meet

Tag
A label in angle brackets, like <p>, that says what a piece of content is
Element
An opening tag, its content and its closing tag together
Attribute
Extra detail inside a tag, like where a link goes
Browser
The app that shows web pages, like Chrome or Safari
Head
The part of a page with facts about it, like its title
Screen reader
An app that reads pages aloud for people who cannot see the screen
CSS
The language that sets colours, sizes and layout
DOM
The browser's live map of every element on the page

The steps

  1. 1. Start from zero (12 cards): What HTML is, how a page is built from tags, and what you need for your first page.
  2. 2. Core basics (18 cards): Elements, attributes, links, images and the parsing rules that trip up beginners.
  3. 3. Next steps (19 cards): Landmarks, forms that work on phones, tables, media and the meta tags that drive search and sharing.
  4. 4. Go deeper (18 cards): Responsive images, native dialogs and popovers, loading priority, components, parsing and security.
All 12 cards in Start from zero
What is HTML, in one plain sentence?
HTML is the language that tells a browser what each part of a web page is: this is a heading, this is a paragraph, this is a link, this is a picture.
What problem does HTML solve? What would a page be without it?
Without HTML a page would be one long blob of plain text: no headings, no links to click, no pictures. HTML adds the structure that lets the browser lay it out neatly.
Where do you already meet HTML every day?
Every website you open, and most emails you get, are HTML underneath. Right-click a page and choose View page source to see the HTML that made it.
What everyday thing is HTML like?
Like the frame of a house. HTML is the walls and rooms, CSS is the paint and furniture, and JavaScript is the lights and switches that do things.
What are a browser, a web page and a server?
A browser, like Chrome, Safari or Firefox, is the app that shows web pages. A web page is just a text file ending in .html. A server is a computer that stores sites and sends the files.
What are a tag, content and an element?
The opening tag <p> starts a paragraph, then comes the content, then the closing tag </p> with a slash ends it. All three together make one element.
What is an attribute?
An attribute is extra detail written inside the opening tag as a name, an equals sign and a value in quotes. Here href tells the link where to go.
What are the head and the body of a page?
The head holds facts about the page that you do not see on it, like the title shown in the browser tab. The body holds everything you do see: text, pictures, buttons.
What are a screen reader and a search engine, and why do they care about HTML?
A screen reader is an app that reads pages aloud for people who cannot see the screen. A search engine is a site that finds pages for you. Both understand a page through its tags.
What do CSS, the DOM and DevTools mean?
CSS is the language for looks: colours, sizes, layout. The DOM is the browser's live map of every element on the page. DevTools is the browser's built-in inspector: right-click and choose Inspect.
What do you need, and what is your first tiny win?
A browser and a plain text editor, nothing to install. Save these two lines as hello.html and double-click it: <h1> shows a big heading and <p> a paragraph under it.
What will you be able to do after this topic?
Write a full page that works on phones, with headings, links, pictures, lists, tables and forms, built so screen readers and search engines understand it.
HTML cheatsheet

Head essentials

  • <!doctype html> Standards mode, first line
  • <html lang="en"> Page language for voices and translation
  • <meta charset="utf-8"> Within first 1024 bytes
  • <meta name="viewport" content="width=device-width, initial-scale=1"> Real phone width
  • <link rel="canonical" href> The one true URL for search
  • <meta property="og:image" content> Share preview picture, absolute URL
  • <meta name="theme-color" content> Browser bar colour on phones

Semantics

  • <header> <nav> <main> <footer> Landmarks, one <main> per page
  • <article> Stands alone: post, review, card
  • <section> + heading Themed part of a bigger thing
  • <aside> Related, not essential
  • <time datetime="2026-10-26"> Machine-readable date
  • <button type="button"> Action that is not a submit
  • <dl><dt><dd> Name and value pairs

Forms

  • <label for="id"> Names the input, enlarges click area
  • name="email" Required for the value to be sent
  • inputmode="numeric" Number keypad without type=number
  • autocomplete="one-time-code" SMS code autofill
  • autocomplete="new-password" Password manager suggests one
  • required minlength pattern Native validation, still check on server
  • <fieldset><legend> Group radios with a question
  • enterkeyhint="search" Label the phone Enter key

Media and loading

  • <img width height alt> Reserve space, describe it
  • srcset="a.jpg 400w, b.jpg 800w" sizes Right file for the slot
  • fetchpriority="high" Boost the LCP image
  • loading="lazy" Below-the-fold images and iframes only
  • <link rel="preload" as="font" crossorigin> Fetch a late-found file early
  • <script defer> Run after parse, in order
  • <video autoplay muted playsinline> Autoplay that phones allow

Native widgets

  • <dialog> + showModal() Modal with backdrop, Escape, inert page
  • <form method="dialog"> Close dialog, set returnValue
  • popover + popovertarget Top-layer menu, light dismiss
  • command="show-modal" commandfor Open dialogs without script
  • <details name="faq"> Exclusive accordion
  • inert Freeze everything behind an overlay
  • <template shadowrootmode="open"> Server-rendered shadow DOM
Donate