HTML Master Set

<!DOCTYPE html>

Not an element, but it goes first on every page. Tells the browser to use modern standards mode instead of old, inconsistent quirks mode.

The root element that wraps the whole page. Put lang='en' on it so screen readers pronounce things correctly and translation tools know the language.

<html>

Holds information about the page that isn't displayed: the title, meta tags, and links to stylesheets and scripts.

Holds everything that's actually displayed on the page. One per document.

The page's name, shown in the browser tab and in search results. Make it descriptive, not just 'Page'. Goes in .

Page metadata with no other element. Common uses: charset='utf-8' for character encoding, and the viewport tag so the page behaves on phones. No closing tag.

Connects the page to an outside resource, most often a stylesheet (rel='stylesheet') or a favicon. Goes in . No closing tag.

Embeds or links JavaScript. Use src='' for an external file, and add defer so it runs after the page is parsed.

Holds CSS written directly in the page. Usually goes in .

Introductory content for the page or a section, usually a logo, site title, and nav. Not the same as (page info) or (table header).

A block of major navigation links. Screen readers can jump straight to it. Not every group of links needs one, just the main ones.

The page's primary content. One per page. Lets screen reader users skip past the header and nav straight to the content.

Closing content for the page or a section: copyright, contact info, related links.

to

Headings, from most to least important. Use them as an outline: one

, then

, and don't skip levels. Control size with CSS, not by picking a smaller heading.

A paragraph of text. Don't use empty ones for spacing; that's CSS's job.

A generic block container with no meaning. Use it for layout and styling only, when no semantic element fits.

A generic inline container with no meaning. Use it to style or target a piece of text within a line.

A hyperlink. href='' sets where it goes. Link text should describe the destination, never just 'click here'.

An image. alt is required: describe the image, or leave it empty (alt='') if it's purely decorative. If the image is the only thing in a link, the alt should say where the link goes. No closing tag.

An unordered (bulleted) list, for items where order doesn't matter. Its children are

.

An ordered (numbered) list, for steps or rankings. Supports start, reversed, and type attributes.

A list item. Lives inside

,
, or .

A clickable button. Gets keyboard focus, Enter and Space, and the button role for free, unlike a div with onclick. Inside a form it defaults to type='submit', so use type='button' for buttons that shouldn't submit.

Wraps inputs that get submitted together. action='' says where the data goes; method='' says how (get or post).

A form field. type='' decides what kind: text, email, password, number, checkbox, radio, date, file, and more. Most types need a . No closing tag.

Names a form control. Connect it with for='' matching the input's id, or wrap the input inside it. Clicking the label focuses the input.

Strong importance, seriousness, or urgency. Usually shown bold. Use it instead of when the importance is the point.

Stress emphasis that changes the meaning of a sentence, like emphasis in speech. Usually shown italic.

A line break inside text, like in a poem or a postal address. Not for spacing between blocks. No closing tag.

---

A thematic break between paragraphs or sections, shown as a horizontal line by default. Use it instead of a divider image. No closing tag.

A thematic grouping of content, usually with its own heading. Use it when a

would really be a meaningful chapter of the page.

Self-contained content that would make sense on its own: a blog post, news story, comment, or product card.

Content related to but separate from the main content: sidebars, callouts, pull quotes.

Tabular data in rows and columns. For data only, never for page layout.

A table row. Contains and cells.

A standard table data cell.

A table header cell. Screen readers announce it with each data cell, like 'Price, $8.00'. Use scope='col' or scope='row'. Bold cells are not a substitute.

A multi-line text field, for comments or messages.

A dropdown list of choices. Contains and .

One choice inside a or

Groups the header rows of a table. The cells inside still need to be .

Groups the main body rows of a table.

Groups the footer rows of a table, like totals.

The title of a table. Goes right after the opening

tag. Helps everyone, especially screen reader users.

Groups related form controls, like a set of radio buttons. Its first child should be a

.

The caption for a

. Screen readers announce it along with each control in the group.

Self-contained content like an image, chart, or code sample, usually with a caption.

The caption for a

. Goes first or last inside it.

A longer quotation set apart from the main text. Use cite='' for the source URL.

Preformatted text: spaces and line breaks show exactly as written. Often wraps for code blocks.

A fragment of computer code shown inline. Wrap it in

 for multi-line blocks.

Embeds another web page inside this one, like a video player or a map. Give it a title='' describing what it is.

Embeds a video. Add the controls attribute so users can play and pause, and a for captions.

Embeds sound. Add the controls attribute so users can play, pause, and adjust volume.

An alternative media file inside ,

Wraps several options plus one , so the browser can pick the best format or size for the screen.

Side comments and fine print, like copyright notices or legal text. Not just 'smaller text'.

A date or time, with a machine-readable datetime='' attribute. Helps search engines, calendars, and scripts.

An abbreviation or acronym. You can put the full form in title='', but spelling it out in the text the first time works better for everyone.

Draws attention to text without adding importance, like keywords or product names. Purely stylistic. If it's important, use ; if it's a header, use a real heading or .

Text in an alternate voice or mood: foreign words, technical terms, thoughts, ship names. Not for emphasis; that's .

Highlighted text that's relevant in context, like search-term matches. Yellow by default.

A disclosure widget that opens and closes with no JavaScript needed. Good for FAQs.

The always-visible label of a

element. Clicking it opens and closes the content.

A dialog box or modal. Open it with showModal() in JavaScript for proper focus handling.

Embeds scalable vector graphics directly in the page. Stays sharp at any size.

A drawing surface you paint on with JavaScript, for graphics, charts, or games. Put fallback text inside, since screen readers can't see what's drawn.

Content shown only when JavaScript is turned off or unavailable.

A description list: pairs of terms and descriptions, like a glossary. Contains

and

.

A term in a description list. Followed by one or more

.

The description for the

before it.

Subscript, like the 2 in H2O.

Superscript, like exponents or footnote markers.

A short inline quotation. The browser adds the quotation marks for you.

The title of a creative work, like a book, film, or song. Not the person's name.

Captions, subtitles, or descriptions for

Groups related elements under a label inside a .

A list of suggested values for an , connected with list=''. Users can still type anything they want.

A progress bar showing how far along a task is, like a file upload.

A measurement within a known range, like disk usage or password strength. For progress, use instead.

Shows the result of a calculation or user action, like a running total.

Contact information for the person or organization behind the page or an article. Not for any random postal address.

Wraps a search form or search feature so assistive tech can find it. A newer landmark element.

Keyboard input or a key the user presses, like Ctrl+C.

Sample output from a computer program.

A variable in math or programming.

The defining instance of a term: the spot where it's actually being defined.

Ties content to a machine-readable value with value=''. Like , but for anything that isn't a date.

Text that's no longer accurate or relevant, shown struck through. For tracked edits, use .

Marks text with a non-textual annotation, like a spelling error. Avoid it for plain styling, since underlines look like links.

Text that was added to a document. Pairs with for showing edits.

Text that was removed from a document, shown struck through. Pairs with .

A word-break opportunity: a spot where the browser may break a long word or URL if it needs to. No closing tag.

Isolates text whose direction might differ from its surroundings, like a username in Arabic or Hebrew inside English text.

Forces a text direction with dir='ltr' or dir='rtl'.

Ruby annotation: small pronunciation text shown above characters, common in Japanese and Chinese. Contains and .

The pronunciation text inside a .

Fallback parentheses around , shown only by browsers that don't support ruby.

Groups table columns so you can style them together. Contains .

One column, or several with span='', inside a . No closing tag.