HTML from the ground up
Learn markup by writing it
- Beginner
- 13 chapters
- 196 min read
A hands-on introduction to HTML, from your first tag to structured data: every idea comes with an example you can edit and run in the page, a few checks on your own code, and a short quiz at the end of each chapter. Markup only — the page you build here says what things are.
What You'll Learn
- Write a well-formed HTML document from an empty editor
- Choose the element that means what you mean, instead of a box that merely looks right
- Structure text, links, images, lists, tables and forms so they survive being read aloud
- Label and validate a form the way the browser and a screen reader expect
- Embed media and third-party content deliberately, knowing what each choice costs
- Give a page landmarks and names that a screen reader can navigate
- Reserve an image’s space and load it at the right time
- Draw crisp, colour-following icons with inline SVG
- Reach for the widgets the browser already ships before building your own
- Declare what a page is with structured data a search engine can read
Prerequisites
- No prior programming experience — the whole course is markup
- Any modern browser; the editor and the preview run everything for you
Vocabulary
The terms the chapters assume, in plain words.
- accessible name
- What a browser tells a screen reader an element is called, taken from its text, its label, or an alternative description.
- aria-label
- An attribute that gives a control an accessible name when no visible text can serve as one.
- attribute
- A name, sometimes with a value, inside an opening tag that describes the element further, such as where a link goes.
- control
- An interactive part of a page, such as a text box, checkbox, or button, that a person can operate.
- element
- One complete piece of a page: an opening tag, its content, and a closing tag, or a single tag when it holds nothing.
- empty element
- A tag that holds nothing and has no closing partner, such as an image or a line break.
- for attribute
- An attribute on a label that names the control it describes, so clicking the text operates that control.
- form action
- The address a submitted form sends its values to, declared in the opening tag of the form.
- id attribute
- An attribute that gives one element a unique name, which a link or a label can point to.
- label
- The text attached to a control that says what it is for; clicking it focuses or operates the control it belongs to.
- landmark
- A page region with a recognised purpose, such as header, nav, or main, that a screen reader can jump to directly.
- markup
- The tags and attributes that describe the structure of a document, as opposed to its styling or behaviour.
- method
- The attribute that says whether a form's values travel in the address or in the request body.
- name attribute
- An attribute that gives a form control a key for its value when the form is submitted.
- regular expression
- A pattern of characters used to test or match text, such as the shape an email address must have.
- request body
- The part of a form submission that carries the field values, separate from the address.
- reset button
- A button that puts every control in a form back to the value it had when the page loaded.
- sandbox
- An isolated place where a page runs without reaching the rest of the site or the network.
- screen reader
- Software that speaks a page aloud or shows it in braille, so someone who cannot see the display can still use it.
- tag
- The name of an element written in angle brackets, such as p or img, which marks where that piece of the page begins or ends.
Course Content
- 01How HTML worksNot started
What markup actually is: elements, attributes and the skeleton every document shares — and what the browser does with it.
- 02Text, links and imagesNot started
The three things almost every page is made of: headings and paragraphs that carry meaning, links that go somewhere, and images that everyone can understand.
- 03Lists and page structureNot started
Lists that announce themselves, and the landmark elements that let a reader — or a screen reader — jump straight to the part they want.
- 04Tables and dataNot started
Tabular data deserves a table — and a table deserves headers. Why the markup around the numbers decides whether anyone can read them.
- 05Forms and inputsNot started
Collecting something from a visitor: the elements that make a form usable, the labels that make it accessible, and the attributes that catch mistakes before they are sent.
- 06Media and embeddingNot started
Audio, video and images that adapt to the screen — plus when a frame around someone else’s page is the right answer, and when it is not.
- 07Accessibility in depthNot started
What a screen reader actually announces, why landmarks and names carry the whole page, and how to test your own work in five minutes.
- 08Metadata and social tagsNot started
The invisible head: the title and description a search engine shows, and the tags that decide how a shared link looks.
- 09Responsive images and performanceNot started
Images are most of a page’s weight. Learn to reserve their space, load them at the right time, and serve the size that fits.
- 10SVG and iconsNot started
Pictures made of instructions rather than pixels: crisp at any size, coloured like text, and cheap to ship.
- 11Widgets without JavaScriptNot started
Interaction the browser already ships: a disclosure, suggestions for an input, and progress you can see — no script required.
- 12Structured dataNot started
Telling a search engine what the page is, not just what it says: schema.org in a JSON-LD block, and the rules that keep it honest.
- 13A complete page, end to endNot started
Everything at once: one small page that has to pass every rule the course has taught, and what to do before you ship it.