HTML elements by purpose: a practical reference

Document and metadata

html: Root of an HTML document; set its language when known.
head: Metadata and resource declarations, before rendered content.
title: The document name used in tabs, history, and many search displays.
meta: Character encoding and other named document metadata.
link: Document relationships and resource declarations such as stylesheets.
base: A document-wide base for resolving relative references; use carefully.
style: A stylesheet embedded in the document.
body: The document's rendered content.

Related lessons:

Page regions and headings

header: Introductory material for a page or a section.
nav: A major group of navigation links.
main: The page's dominant content.
article: A composition that stands on its own, such as a case report.
section: A named subdivision of related content.
aside: Content related to the main flow but not part of it.
footer: Closing material for a page or section.
search: A region containing a search interface.
address: Contact details for the nearest article or the page.
h1–h6: Heading ranks; use the level that matches the real hierarchy.
hgroup: A heading grouped with subordinate heading content.

Related lessons:

Blocks, lists, and changes of topic

p: A paragraph of prose.
div: A grouping container when no more specific element fits.
hr: A thematic change between passages, not a decorative border.
pre: Text whose spacing and line breaks carry structure.
blockquote: A longer quotation from another source.
ol: A sequence where order matters.
ul: A collection without a required order.
menu: A list of commands or actions.
li: One member of an ordered, unordered, or menu list.
dl: A set of terms and their descriptions.
dt: A term in a description list.
dd: The corresponding description or value.
figure: Self-contained content that can be referred to as one unit.
figcaption: A caption for a figure.

Related lessons:

Inline meaning and annotation

a: A link with a destination.
span: A neutral inline container.
em: Stress that changes the sentence's emphasis.
strong: Importance or urgency in context.
b: A keyword brought to attention without extra importance.
i: An alternate voice or term, not a generic italic command.
u: An unarticulated annotation, such as a marked spelling issue.
small: A side comment or fine print.
s: Text no longer accurate or relevant.
mark: Text relevant to a current reference or search.
abbr: An abbreviation, optionally with its expansion.
dfn: The term being defined.
cite: The title of a cited work.
q: A quotation kept inline with surrounding prose.
code: Computer code or an identifier from code.
kbd: Input the user provides to a system.
samp: Sample output from a program or device.
var: A variable or replaceable value.
data: Visible content paired with a machine value.
time: A date or time with a machine-readable value.
sub: A subscript with actual textual meaning.
sup: A superscript with actual textual meaning.
br: A meaningful line break within a passage.
wbr: An optional break point in a long token.
bdi: Isolation for text whose direction is unknown.
bdo: An explicit override of text direction.
ruby: A base text with short pronunciation or other annotation.
rt: The annotation inside ruby.
rp: Fallback punctuation around ruby annotation.
ins: Content inserted into a revision.
del: Content removed in a revision.

Related lessons:

Tables and data relationships

table: A grid whose rows and columns describe related data.
caption: The table's name and context.
colgroup: A group of table columns.
col: One column within a column group.
thead: Rows that head a table.
tbody: The table's body rows.
tfoot: Rows that summarize or close a table.
tr: A row of cells.
th: A header cell associated with data cells.
td: A data cell.

Related lessons:

Forms and values

form: The owner of a submission contract.
label: A visible name associated with one form control.
input: A type-dependent input control.
button: A native action or submit control; set its type explicitly.
select: A choice control backed by options.
option: One selectable choice.
optgroup: A named group of related choices.
datalist: Suggestions that do not close free text entry.
textarea: Multiline text input.
fieldset: A related group of controls.
legend: The fieldset's group name.
output: A calculated result associated with inputs.
progress: Completion of an ongoing task.
meter: A measured value against a known range.

Related lessons:

Images, media, and embedded documents

img: An image with an alt decision.
picture: Alternative image sources with one fallback img.
source: A media or picture source candidate.
audio: An audio resource, usually with native controls.
video: A moving-image resource, usually with native controls.
track: Timed text such as captions or subtitles.
iframe: A nested document with its own trust boundary.
embed: An external embedded resource; evaluate fallback needs.
object: An embedded resource that can include fallback content.
canvas: A scriptable bitmap that needs equivalent information.
map: A group of clickable regions on an image.
area: One region inside an image map.

Related lessons:

Browser-managed UI and components

details: A disclosure the browser can open and close.
summary: The visible control naming a details disclosure.
dialog: A dialog box, with modal behavior only when opened modally.
script: Executable script or a typed non-executable data block.
noscript: Fallback content in the script-disabled case.
template: Inert markup held for later use or a declarative shadow root.
slot: A placement point in a shadow tree.

Related lessons:

One complete document

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Case C-47 | Intake</title></head>
<body>
  <header><nav aria-label="Primary"><a href="/cases">Cases</a></nav></header>
  <main>
    <article>
      <h1>Case C-47</h1>
      <p><strong>Held:</strong> the upper seal split at intake.</p>
      <section aria-labelledby="evidence-heading">
        <h2 id="evidence-heading">Evidence</h2>
        <p>Recorded at <time datetime="2026-10-01T08:14">08:14</time>.</p>
      </section>
    </article>
  </main>
</body>
</html>

Cost and scope

Native elements add almost no runtime weight. The expensive errors come from using a visual substitute for a browser contract, such as a generic container that needs custom keyboard handling or a grid that hides table relationships. This index is a decision aid, not a license to place every listed element in one document. SVG and MathML have their own vocabularies; custom elements require an implementation and a readable fallback. Verify newer component features in the browsers you support.

Common Mistakes

Do not select an element solely for its default appearance.
Do not give a control a label without wiring the action or form endpoint.
Do not assume a category list replaces validation of a specific content model.