Foundations reference

HTML Reference

A complete reference for the structure and meaning of a web page.

Start Introduction to HTML & CSSPractise with today's challenge

Fundamentals

HTML describes what content means. CSS describes how it looks. Keeping those separate is what lets one page be restyled, read aloud, printed and indexed without being rewritten.

Document structure

Every page has the same skeleton. The head describes the document, the body holds what a visitor sees.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page title</title>
</head>
<body>
  <h1>Hello</h1>
</body>
</html>
  • The doctype tells the browser to use modern standards.
  • lang lets screen readers pronounce the page correctly.
  • Without the viewport tag, phones render the page at desktop width.

Elements and tags

An element is content plus the markup describing it. Void elements such as img and br hold no content and have no closing tag.

<p>A paragraph.</p>
<strong>Important</strong>
<img src="photo.jpg" alt="A description">
  • Tags close in the reverse order they opened, like brackets.
  • strong and em carry meaning; b and i only ask for a visual change.

Attributes

Extra information about an element, written inside the opening tag. Boolean attributes are true simply by being present.

<a href="/about">About</a>
<img src="p.jpg" alt="Portrait" width="400" height="400">
<button type="button" disabled>Unavailable</button>
  • There is no disabled="false". To make it false, remove the attribute.

Text and structure

Headings

h1 through h6 describe the outline of the page, not the size of the text.

<h1>Page topic</h1>
<h2>A major section</h2>
<h3>A subsection</h3>
  • One h1 per page.
  • Never skip a level going down.
  • Screen reader users navigate by heading, so a wrong level is a navigation problem.

Quotations and time

blockquote marks a quotation, cite names its source, and time carries a machine-readable date.

<blockquote>
  <p>It is not wrong to go back for that which you have forgotten.</p>
  <footer>Akan proverb, from <cite>the Sankofa tradition</cite></footer>
</blockquote>

<time datetime="2026-08-14">14 August 2026</time>

Lists

ul when order carries no meaning, ol when it does, dl to pair terms with descriptions.

<ul><li>Skills</li></ul>
<ol><li>Step one</li></ol>
<dl><dt>Location</dt><dd>Jackson</dd></dl>
  • A screen reader announces a list and its length, which hyphenated paragraphs cannot.

Semantic structure

These elements exist to say what a region of the page is. They render identically to a div and behave completely differently for anyone not looking at the screen.

Landmarks

header, nav, main, article, section, aside and footer name the regions of a page.

<header>
  <nav aria-label="Primary">...</nav>
</header>
<main>
  <article>...</article>
  <aside>...</aside>
</main>
<footer>...</footer>
  • Exactly one main per page.
  • Assistive technology offers a menu of landmarks, so a visitor can skip straight to the content.
  • div is not forbidden. Use it when no semantic element describes the thing.

Forms

Every control needs a label connected by for and id. That connection is the whole thing.

<label for="email">Email</label>
<input id="email" name="email" type="email" required>

<fieldset>
  <legend>How should we reply?</legend>
  <label><input type="radio" name="reply" value="email"> By email</label>
</fieldset>
  • A placeholder is not a label. It disappears the moment someone types.
  • The right input type gives phone users the right keyboard.

Want to learn how to build with this?

A reference tells you what exists. The course teaches you when to reach for it, and has you build something real while you learn.