Skip to main contentSitemap
Guides — HTML elements
- Add content you could remove without losing anything
- Add text inside a formula
- Adding a table footer: totals, averages, summaries
- Adding text inside a graphic
- Allowing long text: comment, message, bio
- Applying inline styling or switching language within a sentence
- Associate a heading with its subtitle without breaking the hierarchy
- Associate a machine-readable value with human text
- Bidirectional text (Arabic, Hebrew)
- Change the tone of a sentence, the emphasis that italics alone cannot carry
- Chinese proper names (and almost nothing else)
- Close a page or section, much more than a © at the bottom
- Create a clickable link inside an SVG
- Create a matrix or system of equations
- Create an input field — and there are 20 different types
- Define a term, the first time a concept appears
- Defining headers, and the scope attribute almost nobody uses
- Delimiting a search area, the landmark that <form> doesn't create
- Display a value within a known range: score, gauge, quota
- Display an image — and why a bad alt is worse than none
- Display contact information, not in a <p>, not in a <div>
- Display source code in text
- Display the result of a calculation in real time
- Displaying what a program returned
- Divide an image into clickable zones — the technique SVG made obsolete
- Draw a free-form or complex shape
- Draw at pixel level: the only element screen readers cannot read
- Draw attention without semantic importance
- Draw shapes: circles, rectangles, lines
- Embed a generic external resource
- Embed a mathematical formula in HTML
- Embed audio: podcast, music, and accessibility pitfalls
- Embed external content with no fallback, and why that is rarely a good idea
- Embed external content: YouTube video, map, widget
- Embedding a video, with subtitles, descriptions, and no autoplay
- Embedding an accessible vector graphic directly in HTML
- Explain an acronym on its first appearance
- Filling the table body with data
- Force a line break, the rare cases where it is legitimate
- Give a table title that screen readers announce
- Giving an SVG an accessible title and description
- Group content when no semantic element fits
- Group elements for styling or identifying them together
- Group fields that belong together: address, payment, preferences
- Group fields to send data: signup, search, payment
- Group sub-expressions in a formula
- Highlight a word: search result, key passage
- Indicating a date, time, or duration readable by machines
- Introduce a page or section — and no, it's not just a logo
- Isolate content that makes sense on its own: article, post, comment
- Link an image or diagram to its description, even when you move it
- List commands or actions in a toolbar
- List steps, a ranking — order matters
- Listing items with no particular order
- Mark text in an alternative voice: technical term, inner thought
- Name a work (book, film, article), not the author
- Navigate to another page, but also download, send an email, anchor
- Not everything is a paragraph — when <p> is (and isn't) the answer
- Offering a choice from a closed list
- Open a modal window, with a built-in focus trap
- Phonetic annotations (CJK languages)
- Preparing invisible HTML, ready to appear when JavaScript decides
- Presenting data in rows and columns, not for layout
- Preserving indentation and whitespace: code, poetry, ASCII art
- Provide a navigation menu — not all navigations are equal
- Punching a hole in a component for the outside to fill
- Quote an entire passage, and signal it is not mine
- Representing a variable in a formula or code
- Reusing a symbol without duplicating it
- Running JavaScript and providing a fallback
- Saying "this word is important", and having screen readers know it
- Separate two topics visually and semantically
- Serve the right image for the screen: responsive, formats, art direction
- Show a key or keyboard shortcut
- Show or hide content, without a single line of JavaScript
- Show that text has been added: correction, update
- Show that text has been removed, and that the removal matters
- Showing the progress of a task: download, form, quiz
- Slipping a short quotation into the text flow
- Splitting a page into titled parts, and the difference with <article>
- Striking through text that is no longer accurate without deleting it
- Structure key-value pairs: glossary, order summary, FAQ, metadata
- Style entire columns without repeating CSS in every cell
- Suggest options while typing, when screen readers cooperate
- Suggesting where to break a long word without forcing the break
- Tell the browser "this is where it happens"
- Tell the user what you expect in a field — and make it clickable
- The heading hierarchy that 90% of sites get wrong
- Trigger an action, and why it is never a <a>
- Using meta, link or style in the body: microdata, resource hints, inline CSS
- Write a fraction
- Write a mathematical superscript or subscript
- Write a square root or nth root
- Write variables, numbers and operators
- Writing a chemical formula or a footnote reference
- Writing small print (copyright, terms) without burying it