HTML Elements Reference

Declares the HTML5 document type — must be the first line.

The root element of every HTML page.

attrs: lang

Contains metadata, links to CSS and scripts — not rendered.

Metadata: charset, viewport, description, OG tags.

attrs: charset, name, content, http-equiv

Sets the title shown in browser tabs and search results.

Links external resources: stylesheets, favicon, canonical.

attrs: rel, href, type, media

Embeds or links JavaScript. Use defer/async for non-blocking.

attrs: src, type, defer, async, nomodule

Embeds CSS rules directly in the page.

Contains all visible page content.

Introductory content for a page or section — logo, nav, heading.

Navigation links — major navigation blocks only.

The dominant content of the page — unique per page.

Footer of a page or section — copyright, links.

Thematic grouping of content with a heading.

Self-contained content — blog post, comment, news story.

Tangentially related content — sidebars, pull quotes.

Section headings. Use one h1 per page; maintain hierarchy.

Generic block container — no semantic meaning.

Generic inline container — no semantic meaning.

Paragraph of text.

Strong importance — typically bold. Use for semantic weight.

Stressed emphasis — typically italic.

Inline code fragment.

Preformatted text — preserves whitespace and line breaks.

Extended quotation from another source.

attrs: cite

Abbreviation or acronym with optional title.

attrs: title

Date/time value — machine-readable via datetime.

attrs: datetime

Line break — use sparingly inside paragraphs.

Thematic break between content sections.

Highlighted text — search results, relevant content.

Unordered list — items have no sequence.

Ordered list — items have a sequence.

attrs: start, reversed, type

List item — inside ul or ol.

attrs: value (for ol)

Description list — name/value pairs.

Description term in a dl.

Description detail in a dl.

Hyperlink. Use rel='noopener noreferrer' for external links.

attrs: href, rel, target, download, hreflang

Embeds an image. Always provide alt text.

attrs: src, alt, width, height, loading, decoding, srcset, sizes

Container for multiple image sources — responsive images.

Specifies media source inside picture, video, or audio.

attrs: src, srcset, media, type

Embeds video content.

attrs: src, controls, autoplay, muted, loop, poster, width, height

Embeds audio content.

attrs: src, controls, autoplay, muted, loop

Embeds a nested browsing context.

attrs: src, title, allow, sandbox, loading

Inline SVG graphic — preferred for icons and illustrations.

Bitmap drawing surface for 2D/WebGL graphics via JavaScript.

attrs: width, height

Creates an interactive form.

attrs: action, method, enctype, novalidate

Form control — text, password, email, checkbox, radio, file…

attrs: type, name, value, placeholder, required, disabled, readonly

Multi-line text input.

attrs: name, rows, cols, placeholder, required

Drop-down picker.

attrs: name, multiple, size, required

An option inside select or datalist.

attrs: value, selected, disabled

Caption for a form element — links via for or wrapping.

attrs: for

Clickable button.

attrs: type (button/submit/reset), disabled, form

Groups related controls.

attrs: disabled, form

Caption for a fieldset.

Tabular data — not for layout.

Semantic sections of a table.

Table row.

Table header cell — adds semantic meaning.

attrs: scope, colspan, rowspan

Table data cell.

attrs: colspan, rowspan

Provides a title for a table.