HTML reference

Declares standards mode. It must be the very first thing in the document, before <html>.

Sets a base URL for every relative link and resource in the document. Use it once, at most.

All visible page content lives here. A page should have exactly one body.

Holds metadata: the title, character encoding, styles, scripts and social preview tags. Nothing here is rendered directly.

The document root. The lang attribute tells screen readers, search engines and translators which language the content is in.

Connects the document to an external resource: stylesheets, icons, font preloads, canonical URLs and alternate feeds.

Declares the character encoding. UTF-8 covers every language and emoji; it should appear in the first 1024 bytes of the document.

A short summary search engines may show under the title. It does not affect ranking directly but affects click-through.

Controls indexing and link following for a page. Use it to keep private or duplicate pages out of search results.

Makes the layout match the device width on mobile. Without it phones render the page at a desktop width and shrink it.

Content shown when JavaScript is disabled or fails. Use it for a short explanation, not for duplicating the whole app.

Loads or embeds JavaScript. Use defer for scripts that depend on the DOM and type="module" for modern module code.

Embeds CSS directly in the document. Fine for a single page or a demo; link a stylesheet when styles are shared.

The page title shown in the tab, search results and screen-reader announcements. Use one per page and make it specific.

Filters the file types a file input offers.

The character encodings the server accepts for the form.

The URL that receives a submitted form.

Tells the browser what kind of data the field expects so autofill works correctly.

Asks a mobile device to capture a new photo or video directly.

Preselects a checkbox or radio button.

The visible width of a textarea in characters.

Submits the text direction of an input or textarea with its value.

Turns off a control. Disabled controls are not submitted and are removed from the tab order.

The encoding for form data. File uploads require multipart/form-data.

Associates a control with a form elsewhere in the document.

Overrides the form action for the button that submits it.

Overrides the form method for one submit button.

Skips validation for a specific submit button, such as a save-draft action.

Opens the form response in a new browsing context for one button.

Connects an input to a datalist of suggested values.

The maximum value for number, range and date inputs. It also caps the latest selectable date.

The maximum number of characters for text inputs and textareas.

The HTTP method for form submission. Use post for changes and get for searches.

The minimum value for number, range and date inputs.

The minimum number of characters for text inputs and textareas.

Allows more than one value in a select or more than one file in a file input.

The field name sent to the server. A control without a name is not submitted.

Disables the browser’s built-in form validation when submitting.

A regular expression the field value must match. Always pair it with a visible hint.

A format hint inside an empty field. It is not a label and disappears on input.

Prevents editing but still submits the value and keeps it focusable.

Rejects submission while the field is empty.

The visible number of text lines in a textarea.

Preselects an option in a select element.

The visible width of a text input in characters.

The increment used by number and range inputs.

The initial or current value of a form control.

Whether textarea line breaks are submitted: soft or hard.

A clickable control. Set type explicitly: submit inside a form, button everywhere else.

Provides suggested values for an input while still allowing free text.

Groups related controls, especially radio buttons.

Collects user input and submits it. Always pair inputs with labels and choose the right input type.

A single-line control. The type decides validation, keyboard and autofill behaviour.

Choosing the correct type gives free validation, mobile keyboards and better autofill.

An accessible caption for a form control. Clicking the label focuses the control.

The caption for a fieldset. It must be the first child.

Shows a scalar measurement in a known range, such as disk usage or a score.

Groups related options inside a select with a label.

One choice inside a select or datalist.

The result of a calculation or user action. Associate it with the controls that produced it.

Shows completion of a task. Without a value it becomes indeterminate.

A drop-down list of options. Add multiple to allow more than one selection.

A multi-line text control. Set rows and cols, and let users resize when possible.

Defines a keyboard shortcut for an element. Shortcuts vary by browser and platform, so always show them in the UI.

Tells assistive technology to announce the whole live region instead of only the changed node.

Identifies the element controlled by a button or input.

Marks the current item in a set, such as the active navigation link.

Points to the element that provides an accessible description.

Announces that a custom control is disabled. It does not block interaction by itself.

Communicates whether a disclosure or menu is open.

Removes an element from the accessibility tree. Do not hide focusable content.

Marks a control whose value failed validation.

An accessible name used when visible text is missing or insufficient. Prefer a real label or visible heading.

Uses another element’s text as the accessible name.

Announces changes inside a region: polite waits, assertive interrupts.

Marks a toggle button as pressed or not pressed.

Announces that a custom form control is required.

Marks the selected item in a tab list, grid or listbox.

The current value of a custom range widget, paired with aria-valuemin and aria-valuemax.

Controls automatic capitalisation on virtual keyboards: none, sentences, words or characters.

Focuses one element when the page loads. Use it on the primary field of a focused flow, not everywhere.

One or more reusable class names used by CSS and JavaScript. Space-separated.

Makes an element’s content editable by the user. Add role="textbox" and a label for custom editors.

A custom data attribute that stores extra information on an element without inventing non-standard attributes.

Sets text direction: ltr, rtl or auto. Use it on the html element for right-to-left languages.

Marks an element as draggable. You still need dragstart and drop event handlers.

Changes the virtual keyboard’s Enter key label: go, done, next, previous, search, send.

Re-exports shadow parts with renamed public names.

Hides an element from rendering and from assistive technology. Prefer it over display:none when toggled by script.

A unique identifier for one element in the document. Used by CSS, labels, anchors and JavaScript.

Makes an element and its descendants non-interactive and hidden from assistive technology. Useful for background content behind a modal.

Hints the kind of virtual keyboard to show: none, text, decimal, numeric, tel, email, url, search.

Upgrades a built-in element to a customized built-in custom element.

A unique identifier for an item described with microdata.

Names a property in a microdata item.

References additional elements that belong to a microdata item.

Declares that the element is a microdata item with properties.

The vocabulary URL that describes the item.

Declares the content language. Helps screen readers pronounce text and helps search engines.

A one-time value that allows an inline script or style under a Content-Security-Policy.

Exposes an element inside a shadow tree so outside CSS can style it with ::part().

Overrides the accessibility role of an element. Use native elements first; roles cannot add keyboard behaviour.

Assigns content to a named slot inside a web component.

Enables or disables spelling and grammar checking on editable content.

Applies inline CSS to one element. Prefer classes because inline styles beat stylesheet rules and are hard to theme.

Changes keyboard focus order. Use 0 to include an element in the natural order; avoid positive numbers.

Advisory information shown as a tooltip. Do not put required instructions here because touch users never see it.

Tells translation tools to leave content alone, such as brand names or code identifiers.

Controls whether the virtual keyboard shows automatically for editable elements.

Disables browser writing suggestions for an editable element or the whole page.

A permissions policy for an iframe’s features.

Allows an iframe to enter fullscreen. Prefer allow="fullscreen".

The text alternative for an image. Empty alt marks the image as decorative.

Starts playback automatically. Browsers usually require muted media to allow it.

Shows the browser’s native audio or video controls.

Hints whether image decoding should happen synchronously or asynchronously.

Selects a text track or option by default.

Intrinsic height in pixels. CSS can still scale the element responsively.

Sends click coordinates to the server when the image is inside a link. Requires server handling.

The type of a text track: subtitles, captions, descriptions, chapters or metadata.

A user-visible name for a text track or option group.

Defers offscreen images and iframes until they approach the viewport.

Restarts media when it reaches the end.

Starts media with the audio muted.

Allows video to play inline on iOS instead of entering fullscreen.

The image shown before a video starts playing.

Hints how much media to load before playback: none, metadata or auto.

Restricts what an iframe may do. Omit tokens for maximum restriction.

The URL of the embedded image, script, iframe or media file.

Embeds an HTML document directly in an iframe instead of loading a URL.

The language of a subtitle or caption track.

Lists responsive image candidates with width or density descriptors.

Associates an image with a client-side image map.

Intrinsic width in pixels. Set it with height to reserve space and avoid layout shift.

A native disclosure widget that expands and collapses with no JavaScript.

A native modal or non-modal dialog. showModal() adds a backdrop and focus trapping.

A global attribute that turns an element into a lightweight popover toggled by popovertarget.

The always-visible label that toggles a details element. It must be the first child.

Declares the resource type for preload and modulepreload hints.

Sets the CORS mode for a fetched resource such as a font or script.

Prompts a download instead of navigation and suggests a filename.

Hints the browser’s fetch priority for a resource or image.

The destination of a link. Keep it a real URL so keyboard, middle-click and crawlers work.

The language of the linked document, used by search engines for alternates.

Declares the layout width for preloaded responsive images.

A responsive image candidate list for preloading, used with imagesizes.

A Subresource Integrity hash that blocks the resource if its bytes change.

Limits when a linked stylesheet applies, without a media query inside the CSS.

Sends a POST notification when the link is followed. Rarely needed and often blocked.

Controls how much referrer information is sent with the request.

Describes the relationship between the page and the link target.

Declares icon sizes for link rel=icon.

Where to open the link. Add rel="noopener noreferrer" with _blank.

Declares the MIME type of a linked or embedded resource. Modern HTML often infers it.

Creates a hyperlink. Use real href values so links work with keyboards, middle-click and crawlers.

A clickable region inside an image map. It needs an alt attribute.

Embeds an audio player. Provide a transcript for anything important.

A bitmap drawing surface controlled by JavaScript. Provide fallback text and an accessible alternative.

Embeds external content handled by a plugin. Prefer video, audio, img or iframe.

The caption for a figure. It must be the first or last child.

Self-contained media with an optional caption that stays with it.

Embeds another browsing context, such as a map or video. Always give it a descriptive title.

Embeds an image. alt describes the image for people who cannot see it and for search engines.

Defines a client-side image map with clickable regions.

Embeds an external resource with fallback content. Historically used for plugins.

Chooses between image sources based on media conditions or format support.

A placeholder inside a web component where the parent supplies content.

Supplies alternative media for picture, video or audio.

Inline scalable vector graphics. SVG scales without blurring and can be styled with CSS.

Holds inert markup that is not rendered until JavaScript clones it. Useful for reusable fragments.

Adds timed text tracks such as captions, subtitles and descriptions to video or audio.

Embeds a video player with native controls, captions and multiple sources.

The description or definition of the preceding term.

A description list of term and definition pairs.

A term in a description list.

A list item inside ul, ol or menu.

A semantic list of commands or actions. Most browsers render it like ul.

An ordered list where sequence matters. Use start and reversed to change numbering.

An unordered list for items where order does not matter.

Runs a script as soon as it downloads. Order is not guaranteed; use it for independent analytics.

Allows scripts, styles and images to block rendering explicitly when they must run first.

Declares the document encoding in the meta element or a linked script.

Provides the value for a meta element such as viewport, description or theme-color.

Runs a classic script after parsing, in document order. The right default for most scripts.

Emulates an HTTP response header in a document, such as refresh or content-security-policy.

Runs a fallback script only in browsers that do not support modules.

Declares an Open Graph property for social previews.

Contact information for the nearest article or the page author. It is not a generic postal-address element.

Self-contained content that makes sense on its own: a blog post, a card, a forum reply or a lesson.

Content tangential to the main flow: a sidebar, pull quote, related links or advertising.

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

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

Heading levels express document outline. Do not skip levels for visual size; style the heading instead.

Introductory content for a page or a section: a heading, logo, search and navigation. A page and each article can have one.

Groups a heading with its subtitle or tagline so assistive technology treats them as one heading.

The unique, central content of the page. There should be exactly one main element and it must not include repeated site chrome.

A block of major navigation links. Label multiple nav landmarks so screen-reader users can tell them apart.

A landmark for site search. It signals to assistive technology that the region contains search controls.

A thematic grouping, usually with a heading. If it has no heading it is probably a div.

A generic inline container. Useful for styling part of a sentence or carrying a data attribute.

An abbreviated header label for screen readers in complex tables.

Makes a table cell span several columns.

Associates a data cell with the header cells that describe it. Complex tables only.

Numbers an ordered list in descending order.

Makes a table cell span several rows.

Declares whether a header cell labels a row, column or group.

Makes a col or colgroup span several columns.

Sets the starting number of an ordered list.

A table title. It must be the first child and describes the table to everyone.

Defines properties for one or more columns inside colgroup.

Groups columns so you can style them together. Place it before thead.

Tabular data arranged in rows and columns. Never use tables for layout.

Groups the body rows of a table.

A data cell in a table row.

Groups summary rows, such as totals, at the end of a table.

A header cell. The scope attribute tells assistive technology whether it labels a row or a column.

Groups the header rows of a table.

A table row containing th or td cells.

An abbreviation or acronym with its expanded form in the title attribute.

Visually offset text without implying importance, such as a product name in a review.

Isolates text whose direction may differ from the surrounding content, such as a username.

Overrides the text direction of its content.

An extended quotation from another source. Use the cite attribute for the source URL.

A line break inside the same paragraph, as in a postal address or a poem.

The title of a creative work: a book, song, film or article. It is not for the author’s name.

A fragment of computer code. Use it inline; wrap longer blocks in pre.

Links human-readable content to a machine-readable value.

Content that has been removed from the document. Pair it with ins to show edits.

Stress emphasis that changes the meaning of the sentence.

A thematic break between sections of content. It is not a decorative line.

Text in an alternate voice or mood: a technical term, a foreign phrase or a thought.

Content that has been inserted into the document.

Text the user should type or a key they should press.

Text highlighted for reference in the current context, such as a search match.

A paragraph of prose. Browsers add space before and after it; do not use it just to create gaps.

Preformatted text that preserves spaces and line breaks. Ideal for ASCII art, terminal output and code without markup.

A short inline quotation. Browsers add quotation marks automatically based on the language.

Fallback parentheses for browsers that do not support ruby annotations.

The pronunciation annotation inside a ruby element.

Adds pronunciation annotations above East Asian characters.

Content that is no longer accurate or relevant, without implying a document edit.

Sample output from a program or system.

Side comments and fine print, such as legal text.

Strong importance. Screen readers may change emphasis, and it is not merely bold text.

Subscript text for chemical formulas or mathematical indices.

Superscript text for exponents, ordinals or footnote markers.

A machine-readable date or time. The datetime attribute lets browsers and search engines parse it.

A variable in a mathematical expression or programming context.

An optional line-break opportunity inside a long word or URL.