WEB-HTML-001
Standards mode
Begin an HTML document with the modern doctype so browsers use standards mode.
Build with DEX · 68 reference entries
HTML reference
Build meaningful pages with document metadata, links, media, accessible forms and native interactive elements.
HTML describes what a piece of content means. Choose the element that fits the job, then use CSS for its appearance. These examples use current browser patterns and include accessibility details that short tag lists often omit.
Entry index
Choose an entry or use Find on page to look for a term. Each number identifies an educational reference; production checks need their own recorded result.
- Standards mode
- Document language
- Text direction
- Character encoding
- Mobile viewport
- Page title and description
- Stylesheet relationships
- JavaScript modules
- Deferred classic scripts
- Async scripts
- Page landmarks
- Navigation regions
- Heading hierarchy
- Articles and sections
- Related content
- Contact information
- Generic containers
- Paragraphs and line breaks
- Importance and emphasis
- Attention and idiomatic text
- Quotations and work titles
- Abbreviations
- Code and preserved spacing
- Keyboard input and output
- Dates and times
- Edits and highlights
- Subscripts, superscripts and small print
- Reserved characters
- Ordered and unordered lists
- Description lists
- Table captions and headers
- Table row groups
- Spanning table cells
- Meaningful link text
- Fragment destinations
- Email and telephone links
- New windows and downloads
- Link relationships
- Alternative text
- Image dimensions
- Image loading priority
- Responsive image candidates
- Art direction with picture
- Figure captions
- Embedded frames
- Video controls and captions
- Audio alternatives
- Explicit field labels
- Related field groups
- Input types
- Autocomplete and keyboard hints
- Required fields and help
- Text limits and patterns
- Numeric ranges
- Choices and selected values
- Checkbox and radio values
- Multiline text
- Button types
- Submission methods
- File uploads
- Validation feedback
- IDs, classes and data attributes
- Boolean attributes
- Keyboard focus order
- Hidden and inert content
- Disclosure widgets
- Dialogs
- Progress and measurements
Document
WEB-HTML-002
Document language
Set the language of the page on html. Mark passages in another language where pronunciation or language processing changes.
Example and documentation
<html lang="en-GB">
<p lang="fr">Bonjour</p>Documentation: HTML documentation
WEB-HTML-003
Text direction
Use dir for writing direction. Logical CSS properties then adapt spacing to the reading direction.
WEB-HTML-004
Character encoding
Declare UTF-8 near the beginning of head so punctuation, currency symbols and multilingual text are decoded consistently.
WEB-HTML-005
Mobile viewport
Let the layout use the device width and keep zoom available to readers.
Example and documentation
<meta name="viewport" content="width=device-width, initial-scale=1">Documentation: HTML documentation
WEB-HTML-006
Page title and description
Give each page a descriptive title and an accurate summary. A search engine may choose another snippet.
Example and documentation
<title>HTML reference | Tailored Deals</title>
<meta name="description" content="Practical HTML examples for forms, media and page structure.">Documentation: HTML documentation
WEB-HTML-007
Stylesheet relationships
Load an external stylesheet with link. Use media only when the stylesheet has a specific display purpose.
Example and documentation
<link rel="stylesheet" href="/styles.css">
<link rel="stylesheet" href="/print.css" media="print">Documentation: HTML documentation
WEB-HTML-008
JavaScript modules
A module script has its own scope and supports import. Module loading is deferred unless async is requested.
Example and documentation
<script type="module" src="/app.js"></script>Documentation: HTML documentation
WEB-HTML-009
Deferred classic scripts
Use defer for a classic script that needs the parsed document. Deferred scripts preserve their order.
Example and documentation
<script defer src="/navigation.js"></script>Documentation: HTML documentation
WEB-HTML-010
Async scripts
An async script executes when ready. Use it only when its execution order and document parsing position do not matter.
Example and documentation
<script async src="/independent-widget.js"></script>Documentation: HTML documentation
Structure
WEB-HTML-011
Page landmarks
Use a main region for the primary page content, with header and footer for the surrounding site information.
Example and documentation
<header>Site name</header>
<main id="main-content">Page content</main>
<footer>Contact details</footer>Documentation: HTML documentation
WEB-HTML-012
Navigation regions
Use nav for a significant group of navigation links. Label repeated navigation regions so their purposes are distinct.
Example and documentation
<nav aria-label="Learning topics">
<a href="/learning/web-reference/html">HTML</a>
</nav>Documentation: HTML documentation
WEB-HTML-013
Heading hierarchy
Write a descriptive page heading and organise subsections by level. Choose heading levels for structure, then style their appearance.
Example and documentation
<h1>HTML reference</h1>
<h2>Forms</h2>
<h3>Field labels</h3>Documentation: HTML documentation
WEB-HTML-014
Articles and sections
Use article for content that can stand independently. Use a section for a named thematic part of a larger page.
Example and documentation
<article>
<h2>Choosing an image format</h2>
<section><h3>Photographs</h3><p>Compare quality and size.</p></section>
</article>Documentation: HTML documentation
WEB-HTML-015
Related content
An aside holds related material that can be separated from the main discussion without breaking its meaning.
Example and documentation
<aside aria-labelledby="related-heading">
<h2 id="related-heading">Related reading</h2>
</aside>Documentation: HTML documentation
WEB-HTML-016
Contact information
Use address for contact details belonging to the nearby article or whole page, rather than for every postal address mentioned.
Example and documentation
<address>Editorial contact: <a href="mailto:editor@example.com">editor@example.com</a></address>Documentation: HTML documentation
WEB-HTML-017
Generic containers
Use div or span when no more specific element describes the content. A class changes styling without inventing semantics.
Example and documentation
<div class="card-layout"><span class="price">£12</span></div>Documentation: HTML documentation
Text
WEB-HTML-018
Paragraphs and line breaks
Use separate paragraphs for separate thoughts. Reserve br for a meaningful line break within content, such as an address.
Example and documentation
<p>Compare the full price.</p>
<p>Check the delivery date.</p>Documentation: HTML documentation
WEB-HTML-019
Importance and emphasis
Strong marks importance; em marks stress within a sentence. A visual weight change alone can be made with CSS.
Example and documentation
<p><strong>Check the total.</strong> The delivery fee is <em>additional</em>.</p>Documentation: HTML documentation
WEB-HTML-020
Attention and idiomatic text
Use b to draw attention without added importance, and i for text with a different voice or convention.
Example and documentation
<p>Search for <b>delivery</b>. The term <i lang="la">in situ</i> has a specific meaning.</p>Documentation: HTML documentation
WEB-HTML-021
Quotations and work titles
Use blockquote for a longer quotation, q for an inline quotation, and cite for the title of a referenced work.
Example and documentation
<blockquote cite="https://example.com/report"><p>A short permitted quotation.</p></blockquote>
<p>From <cite>Example Report</cite>.</p>Documentation: HTML documentation
WEB-HTML-022
Abbreviations
Expand unfamiliar abbreviations in the surrounding text. An abbr title can supplement that explanation.
Example and documentation
<p>Application programming interface (<abbr title="Application programming interface">API</abbr>)</p>Documentation: HTML documentation
WEB-HTML-023
Code and preserved spacing
Wrap inline code in code. Combine pre and code when indentation and line breaks matter.
Example and documentation
<p>Read the <code>status</code> value.</p>
<pre><code>const total = 12;</code></pre>Documentation: HTML documentation
WEB-HTML-024
Keyboard input and output
Use kbd for a key or input command and samp for output from a program.
Example and documentation
<p>Press <kbd>Enter</kbd>. The terminal displays <samp>Ready</samp>.</p>Documentation: HTML documentation
WEB-HTML-025
Dates and times
Use time with a machine-readable datetime value when the visible wording is a date, time or duration.
Example and documentation
<time datetime="2026-11-07">7 November 2026</time>Documentation: HTML documentation
WEB-HTML-026
Edits and highlights
Use del and ins to describe edits. Mark identifies a relevant passage, such as a search match.
Example and documentation
<p><del>Tuesday</del> <ins>Wednesday</ins></p>
<p>Search result: <mark>delivery</mark></p>Documentation: HTML documentation
WEB-HTML-027
Subscripts, superscripts and small print
Use sub and sup when the notation requires them. Small marks side comments or fine print while remaining legible.
Example and documentation
<p>H<sub>2</sub>O; x<sup>2</sup></p>
<small>Example amounts only.</small>Documentation: HTML documentation
WEB-HTML-028
Reserved characters
Escape reserved characters when displaying them as text. A non-breaking space should keep a meaningful pair together.
Example and documentation
<code><button></code>
<p>10 km & a return trip</p>Documentation: HTML documentation
Lists and tables
WEB-HTML-029
Ordered and unordered lists
Use an ordered list when sequence matters. Place each item inside li; nest a sublist inside the item it belongs to.
Example and documentation
<ol><li>Choose a topic.</li><li>Try its example.</li></ol>Documentation: HTML documentation
WEB-HTML-030
Description lists
Use dl with dt and dd to pair terms with descriptions or labels with values.
Example and documentation
<dl><dt>HTTP</dt><dd>A protocol for exchanging web resources.</dd></dl>Documentation: HTML documentation
WEB-HTML-031
Table captions and headers
Use a caption to identify a data table. Mark header cells with th and specify their row or column relationship.
Example and documentation
<table><caption>Plan comparison</caption>
<tr><th scope="col">Plan</th><th scope="col">Monthly price</th></tr>
<tr><th scope="row">Basic</th><td>£5</td></tr></table>Documentation: HTML documentation
WEB-HTML-032
Table row groups
Group headings, data and totals with thead, tbody and tfoot. These elements describe table structure; they do not create a scrolling panel.
Example and documentation
<table><thead><tr><th scope="col">Item</th></tr></thead>
<tbody><tr><td>Notebook</td></tr></tbody></table>Documentation: HTML documentation
WEB-HTML-033
Spanning table cells
Use colspan or rowspan only when a genuine relationship needs a spanning cell. Complex headers may need explicit headers associations.
Example and documentation
<th colspan="2" scope="colgroup">Delivery options</th>Documentation: HTML documentation
Links
WEB-HTML-034
Meaningful link text
Make the link label describe its destination. A navigation link uses href; an action such as opening a dialog uses a button.
Example and documentation
<a href="/learning/web-reference/css">Read the CSS reference</a>
<button type="button">Open preferences</button>Documentation: HTML documentation
WEB-HTML-035
Fragment destinations
Link to a unique id for navigation within a page. Account for sticky headers when styling the destination.
Example and documentation
<a href="#form-labels">Form labels</a>
<h2 id="form-labels">Form labels</h2>Documentation: HTML documentation
WEB-HTML-036
Email and telephone links
Use mailto and tel destinations for the appropriate handler. Write a human-readable label beside the machine-readable address.
Example and documentation
<a href="mailto:hello@example.com">Email the team</a>
<a href="tel:+441134960123">0113 496 0123</a>Documentation: HTML documentation
WEB-HTML-037
New windows and downloads
Tell readers when a link opens a new tab. Download is a hint with origin restrictions, so test the actual file response.
Example and documentation
<a href="https://example.com/guide" target="_blank" rel="noopener">Guide (new tab)</a>
<a href="/example.txt" download>Download the example text</a>Documentation: HTML documentation
WEB-HTML-038
Link relationships
Choose relationship tokens for the link's purpose. Sponsored links and user-generated links need different treatment from ordinary references.
Example and documentation
<a href="https://example.com/offer" rel="sponsored">Advertiser offer</a>Documentation: HTML documentation
Media
WEB-HTML-039
Alternative text
Describe an informative image's role in context. Give a purely decorative image an empty alt value so it can be skipped.
Example and documentation
<img src="/diagram.png" alt="A request passes through validation before storage">
<img src="/divider.svg" alt="">Documentation: HTML documentation
WEB-HTML-040
Image dimensions
Supply width and height that match the image's proportions. CSS can resize it while the browser reserves its layout space.
Example and documentation
<img src="/sample.webp" alt="A desk lamp" width="800" height="600" style="max-width:100%;height:auto">Documentation: HTML documentation
WEB-HTML-041
Image loading priority
Lazy-load images that start away from the initial viewport. Assess the main visible image separately so its loading is not delayed.
Example and documentation
<img src="/lower-page.webp" alt="A labelled diagram" width="800" height="600" loading="lazy">Documentation: HTML documentation
WEB-HTML-042
Responsive image candidates
Offer appropriately sized image files with srcset and describe their rendered width with sizes.
Example and documentation
<img src="/photo-800.webp" srcset="/photo-400.webp 400w, /photo-800.webp 800w" sizes="(max-width:600px) 100vw, 600px" alt="A desk setup" width="800" height="600">Documentation: HTML documentation
WEB-HTML-043
Art direction with picture
Use picture when smaller screens need a different crop or a preferred image format. Keep a fallback img with alt text.
Example and documentation
<picture><source media="(max-width:40rem)" srcset="/close-up.webp">
<img src="/wide.webp" alt="A workstation beside a window" width="1200" height="600"></picture>Documentation: HTML documentation
WEB-HTML-044
Figure captions
Group a self-contained illustration and its caption with figure and figcaption. The caption can add context beyond the alt text.
Example and documentation
<figure><img src="/chart.png" alt="Costs rise from £5 to £8" width="600" height="300"><figcaption>Monthly example costs.</figcaption></figure>Documentation: HTML documentation
WEB-HTML-045
Embedded frames
Give an iframe a meaningful title. Grant only the permissions required by the embedded content and assess loading and privacy separately.
Example and documentation
<iframe src="https://example.com/embed" title="Example location map" loading="lazy" width="600" height="400"></iframe>Documentation: HTML documentation
WEB-HTML-046
Video controls and captions
Expose video controls and provide timed captions for speech and relevant sound. A transcript supports readers who need a text version.
Example and documentation
<video controls preload="metadata"><source src="/lesson.mp4" type="video/mp4">
<track kind="captions" src="/lesson-en.vtt" srclang="en" label="English" default></video>Documentation: HTML documentation
WEB-HTML-047
Audio alternatives
Provide controls for audio and a nearby transcript that carries its information. Avoid starting sound before the reader chooses to play it.
Example and documentation
<audio controls preload="metadata" src="/lesson.mp3"></audio>
<a href="/lesson-transcript">Read the transcript</a>Documentation: HTML documentation
Forms
WEB-HTML-048
Explicit field labels
Associate a visible label with its field using for and id. A placeholder can show an example but does not replace the label.
Example and documentation
<label for="contact-email">Email address</label>
<input id="contact-email" name="email" type="email" autocomplete="email">Documentation: HTML documentation
WEB-HTML-049
Related field groups
Use fieldset and legend when several controls answer one question, particularly radio buttons and related checkboxes.
Example and documentation
<fieldset><legend>Preferred format</legend><label><input type="radio" name="format" value="text">Text</label><label><input type="radio" name="format" value="audio">Audio</label></fieldset>Documentation: HTML documentation
WEB-HTML-050
Input types
Choose an input type that matches the value, such as email, date or search. Telephone numbers and identifiers should not be treated as quantities.
Example and documentation
<label for="phone">Telephone</label><input id="phone" name="phone" type="tel" autocomplete="tel">Documentation: HTML documentation
WEB-HTML-051
Autocomplete and keyboard hints
Use recognised autocomplete tokens and an appropriate inputmode. Inputmode requests a keyboard; validation still needs its own rules.
Example and documentation
<label for="postcode">Postcode</label><input id="postcode" name="postcode" autocomplete="postal-code">
<label for="one-time-code">One-time code</label><input id="one-time-code" name="code" inputmode="numeric" autocomplete="one-time-code">Documentation: HTML documentation
WEB-HTML-052
Required fields and help
Identify required values in visible text and with required. Connect supplementary instructions using aria-describedby.
Example and documentation
<label for="name">Name (required)</label><input id="name" name="name" required aria-describedby="name-help">
<p id="name-help">Use the name you want us to address.</p>Documentation: HTML documentation
WEB-HTML-053
Text limits and patterns
Set useful length limits and explain a required pattern. Client-side constraints help users; validate submitted data again on the server.
Example and documentation
<label for="code">Reference: 4 digits</label><input id="code" name="code" pattern="[0-9]{4}" minlength="4" maxlength="4" inputmode="numeric">Documentation: HTML documentation
WEB-HTML-054
Numeric ranges
Use min, max and step for numeric or date constraints. Test empty values and boundary values as well as a typical value.
Example and documentation
<label for="quantity">Quantity</label><input id="quantity" name="quantity" type="number" min="1" max="20" step="1" required>Documentation: HTML documentation
WEB-HTML-055
Choices and selected values
Use select and option for a compact choice list. Provide a label and set submitted values independently of the displayed wording.
Example and documentation
<label for="topic">Topic</label><select id="topic" name="topic"><option value="html">HTML</option><option value="css">CSS</option></select>Documentation: HTML documentation
WEB-HTML-056
Checkbox and radio values
An unchecked checkbox is normally absent from submitted form data. Give related radio buttons the same name to make one choice.
Example and documentation
<label><input type="checkbox" name="updates" value="yes">Send learning updates</label>Documentation: HTML documentation
WEB-HTML-057
Multiline text
Use textarea for a multiline value. Put initial text between its tags and give the field a visible label.
Example and documentation
<label for="question">Your question</label><textarea id="question" name="question" rows="5" maxlength="2000"></textarea>Documentation: HTML documentation
WEB-HTML-058
Button types
Set a button's type explicitly inside a form. Use submit to send the form and button for a separate scripted action.
Example and documentation
<button type="submit">Send question</button>
<button type="button">Show guidance</button>Documentation: HTML documentation
WEB-HTML-059
Submission methods
GET places form values in the URL and suits a public search. POST sends values in the body and suits state changes.
Example and documentation
<form action="/search" method="get"><label for="q">Search</label><input id="q" name="q"><button type="submit">Search</button></form>Documentation: HTML documentation
WEB-HTML-060
File uploads
Use multipart/form-data for a traditional file upload. The accept attribute is a picker hint, so inspect and limit uploaded files on the server.
Example and documentation
<form method="post" enctype="multipart/form-data"><label for="attachment">Image</label><input id="attachment" name="attachment" type="file" accept="image/png,image/jpeg"></form>Documentation: HTML documentation
WEB-HTML-061
Validation feedback
Describe the problem beside the affected field and associate the message. Preserve entered values so people can correct a submission.
Example and documentation
<label for="email">Email address</label>
<input id="email" name="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error">Enter an email address with a domain.</p>Documentation: HTML documentation
Attributes and interaction
WEB-HTML-062
IDs, classes and data attributes
Keep ids unique within the document. Reuse classes for styling and data attributes for non-sensitive application data.
Example and documentation
<article id="lesson-html" class="lesson" data-topic="html">HTML lesson</article>Documentation: HTML documentation
WEB-HTML-063
Boolean attributes
A boolean attribute is enabled by its presence. Writing false as its string value does not turn it off.
Example and documentation
<button disabled>Saving</button>
<!-- Remove disabled to enable the button. -->Documentation: HTML documentation
WEB-HTML-064
Keyboard focus order
Use native interactive elements. A tabindex of zero joins the normal focus order; minus one permits programmatic focus without a tab stop.
Example and documentation
<h2 id="results-heading" tabindex="-1">Search results</h2>Documentation: HTML documentation
WEB-HTML-065
Hidden and inert content
Hidden removes irrelevant content from presentation. Inert prevents interaction with a subtree, which can help manage temporarily inactive interface regions.
Example and documentation
<section hidden>Content for a later step</section>
<div inert>Inactive panel</div>Documentation: HTML documentation
WEB-HTML-066
Disclosure widgets
Use details and summary for a native expandable explanation. Keep essential instructions visible before the disclosure.
Example and documentation
<details><summary>How this example works</summary><p>The browser manages the open state.</p></details>Documentation: HTML documentation
WEB-HTML-067
Dialogs
Use dialog with showModal for a modal interaction. Provide an accessible name, a close action and sensible focus handling.
Example and documentation
<dialog aria-labelledby="dialog-title"><h2 id="dialog-title">Preferences</h2><form method="dialog"><button>Close</button></form></dialog>Documentation: HTML documentation
WEB-HTML-068
Progress and measurements
Use progress for work moving towards completion. Use meter for a measurement within a known range, with a visible label.
Example and documentation
<label for="upload">Upload progress</label><progress id="upload" value="40" max="100">40%</progress>
<label for="capacity">Capacity used</label><meter id="capacity" min="0" max="100" value="65">65%</meter>Documentation: HTML documentation
Continue learning
Reviewed . Send a correction through contact and corrections, including the entry number and supporting documentation.