Appendix: HTML Element Reference

This section documents general HTML5 and CSS concepts — it is not tied to any specific framework or library. This content was generated with the assistance of AI. Verify it against current MDN documentation and browser-support tables (caniuse.com) before relying on it in production, since HTML/CSS features and browser support continue to evolve.

This appendix is a reference table of HTML elements, grouped by purpose, each with its key attributes and a short example. Verify anything here against MDN’s HTML element reference and current browser-support tables before relying on it in production. For the authoritative (if less readable) specification, see the WHATWG HTML Living Standard.

To avoid duplicating content, this page is scoped to elements not already covered in depth elsewhere in this section:

Structural and semantic sectioning elements (html, head, body, header, nav, main, article, section, aside, footer, headings, div, span, links, and metadata elements) are covered in HTML5 Structure & Semantics.
Form elements (form, input, select, textarea, button, label, fieldset, and friends) are covered in Forms & Styling.
svg and its child elements are covered in Styling & Animating SVGs.

Text-level semantics

These inline elements convey meaning about a span of text, beyond the purely visual styling that CSS could otherwise apply.

strong and em

MDN reference: <strong>, <em>

<strong> marks text of strong importance (browsers render it bold); <em> marks stress emphasis (rendered italic). Neither is a purely visual shortcut for bold/italic — use CSS (font-weight, font-style) instead when no semantic emphasis is intended.

<p><strong>Warning:</strong> this action <em>cannot</em> be undone.</p>

mark

MDN reference: <mark>

<mark> highlights text that is relevant in the current context, such as a search match (rendered with a yellow background by default).

<p>Results for "html": the <mark>HTML</mark> specification defines...</p>

time

MDN reference: <time>

<time> represents a specific date/time (or duration). The machine-readable value goes in the datetime attribute (ISO 8601 format); the element’s content can be a human-friendly string.

<p>Published on <time datetime="2026-08-21">August 21, 2026</time>.</p>
<p>Runtime: <time datetime="PT2H15M">2h 15m</time></p>

abbr

MDN reference: <abbr>

<abbr> marks an abbreviation or acronym. The title attribute holds the full expansion, typically shown as a tooltip.

<abbr title="HyperText Markup Language">HTML</abbr>

code

MDN reference: <code>

<code> marks a fragment of computer code, rendered in the browser’s default monospace font. Combine with <pre> to preserve whitespace/line breaks for multi-line snippets.

<p>Use the <code>fetch()</code> function to make a request.</p>
<pre><code>function greet() {
  console.log("hello");
}</code></pre>

small

MDN reference: <small>

<small> represents side comments such as fine print, disclaimers, or legal/license text — semantically distinct from just shrinking text with CSS font-size.

<p>$19.99 <small>Prices exclude tax and shipping.</small></p>

sub and sup

MDN reference: <sub>, <sup>

<sub> and <sup> render subscript and superscript text, respectively — typically used for chemical formulas, footnote markers, and mathematical/ordinal notation.

<p>H<sub>2</sub>O</p>
<p>x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>
<p>The 1<sup>st</sup> and 2<sup>nd</sup> place winners...</p>

Lists

ul, ol, and li

MDN reference: <ul>, <ol>, <li>

<ul> is an unordered (bulleted) list, <ol> an ordered (numbered) list; both contain <li> (list item) children. <ol> supports start (the first number), reversed (count downward), and type (1, a, A, i, I) to control numbering; <li> supports value to override its own number in an <ol>.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
</ul>

<ol start="5" type="a">
  <li>Fifth item, labeled "e"</li>
  <li>Sixth item, labeled "f"</li>
</ol>

dl, dt, and dd

MDN reference: <dl>, <dt>, <dd>

<dl> (description list) pairs terms with descriptions: <dt> holds the term, <dd> holds its description. A <dt> may be followed by multiple <dd> elements, and multiple <dt> elements may share one <dd>.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets.</dd>
</dl>

Tables

table, thead, tbody, and tfoot

MDN reference: <table>, <thead>, <tbody>, <tfoot>

<table> is the root element. <thead>, <tbody>, and <tfoot> group rows into a header, body, and footer section respectively — purely structural/semantic (and useful styling hooks), with no effect on which cells are treated as headers (that is <th>’s job, below). A table may contain multiple `<tbody> elements, but at most one <thead> and one <tfoot> each.

<table>
  <thead>
    <tr><th>Product</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Widget</td><td>$9.99</td></tr>
    <tr><td>Gadget</td><td>$19.99</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>$29.98</td></tr>
  </tfoot>
</table>

tr, th, and td

MDN reference: <tr>, <th>, <td>

<tr> is a table row. <td> is a data cell; <th> is a header cell, which should carry a scope attribute (col, row, colgroup, or rowgroup) so assistive technology can associate it with the right data cells. Both <th> and <td> support colspan and rowspan to span multiple columns/rows.

<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Role</th>
  </tr>
  <tr>
    <th scope="row">Ada</th>
    <td>Engineer</td>
  </tr>
  <tr>
    <td colspan="2">No further rows</td>
  </tr>
</table>

colgroup and col

MDN reference: <colgroup>, <col>

<colgroup> groups one or more columns for styling purposes (typically width via CSS); each <col> child represents one column, or span columns at once.

<table>
  <colgroup>
    <col style="background: #f0f0f0">
    <col span="2">
  </colgroup>
  <tr><th>Name</th><th>Q1</th><th>Q2</th></tr>
  <tr><td>Widget</td><td>10</td><td>12</td></tr>
</table>

Embedded content and media

img

MDN reference: <img>

<img> embeds an image. Required: src and alt (empty alt="" for purely decorative images). Common: width/height (reserve layout space to avoid layout shift), loading="lazy" (defer off-screen images), srcset/sizes for responsive image selection.

<img src="logo.png" alt="Acme Corp logo" width="200" height="60" loading="lazy">

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Mountain landscape at sunset">

picture and source

MDN reference: <picture>, <source>

<picture> wraps one or more <source> elements plus a fallback <img>, letting the browser pick the best source based on media (a media-query breakpoint), srcset/sizes (resolution/density switching), or type (format negotiation, e.g. serving AVIF/WebP with a JPEG fallback). The browser evaluates <source> elements in order and falls back to <img> if none match.

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <source srcset="hero-narrow.jpg" media="(max-width: 600px)">
  <img src="hero.jpg" alt="Product hero shot">
</picture>

video and audio

MDN reference: <video>, <audio>

<video> and <audio> embed time-based media. Common attributes: src (or child <source> elements for multiple formats), controls (show native playback UI), autoplay, loop, muted (autoplay generally requires muted in modern browsers), preload (none/metadata/auto), and, for <video>, poster (a placeholder image) and width/height. Both support <track> children for captions/subtitles.

<video controls width="640" height="360" poster="preview.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <track kind="captions" src="captions-en.vtt" srclang="en" label="English">
  Your browser does not support the video tag.
</video>

<audio controls src="podcast-episode.mp3"></audio>

iframe

MDN reference: <iframe>

<iframe> embeds another HTML document as a nested browsing context. Key attributes: src, title (required for accessibility — describes the frame’s content to assistive technology), width/height, loading="lazy", sandbox (restricts the embedded document’s capabilities — e.g. no scripts, no same-origin access — an empty sandbox="" is most restrictive), and allow (a Permissions Policy for features like camera/fullscreen).

<iframe
  src="https://example.com/widget"
  title="Example interactive widget"
  width="600" height="400"
  loading="lazy"
  sandbox="allow-scripts allow-same-origin">
</iframe>

embed and object

MDN reference: <embed>, <object>

<embed> and <object> embed external resources (PDFs, browser plugins, or other documents) via src/type (<embed>) or data/type (<object>). They are largely legacy compared to <img>/<video>/<audio>/ <iframe> for standard media, but remain relevant for embedding PDFs or other non-media documents. <object> can carry fallback content between its tags for browsers/plugins that can’t render the resource.

<embed src="brochure.pdf" type="application/pdf" width="600" height="800">

<object data="brochure.pdf" type="application/pdf" width="600" height="800">
  <p>Unable to display PDF. <a href="brochure.pdf">Download it instead</a>.</p>
</object>

Interactive and miscellaneous elements

details and summary

MDN reference: <details>, <summary>

<details> creates a native disclosure widget that the user can toggle open/closed, with no JavaScript required. Its first child, <summary>, is the always-visible label; everything else is hidden until the widget is expanded. The boolean open attribute controls (and reflects) the expanded state.

<details>
  <summary>What payment methods do you accept?</summary>
  <p>We accept all major credit cards and PayPal.</p>
</details>

<details open>
  <summary>Already expanded by default</summary>
  <p>This content is visible immediately.</p>
</details>

dialog

MDN reference: <dialog>

<dialog> represents a native modal or non-modal dialog box. It is shown via its DOM methods — show() (non-modal) or showModal() (modal, with a native backdrop and focus trapping) — and hidden with close(); the boolean open attribute reflects visibility but should not be set directly to open a modal dialog. The ::backdrop pseudo-element styles the dimmed overlay behind a modal dialog.

<dialog id="confirm-dialog">
  <p>Are you sure you want to delete this item?</p>
  <button value="cancel">Cancel</button>
  <button value="confirm">Delete</button>
</dialog>

<script>
  document.getElementById("confirm-dialog").showModal();
</script>

template

MDN reference: <template>

<template> holds markup that is parsed but not rendered and not executed (scripts inside don’t run, images inside don’t load) until it is cloned into the document via JavaScript (content.cloneNode(true)). It is the standard mechanism for client-side templating without a framework.

<template id="row-template">
  <tr><td class="name"></td><td class="price"></td></tr>
</template>

<script>
  const tpl = document.getElementById("row-template");
  const clone = tpl.content.cloneNode(true);
  clone.querySelector(".name").textContent = "Widget";
  clone.querySelector(".price").textContent = "$9.99";
  document.querySelector("tbody").appendChild(clone);
</script>

canvas

MDN reference: <canvas>

<canvas> provides a raster drawing surface controlled entirely via JavaScript (the 2D Canvas API or WebGL), unlike <svg>’s retained-mode, DOM-based vector graphics (see Styling & Animating SVGs). Set `width/height as element attributes (not CSS) to define the drawing surface’s actual pixel resolution.

<canvas id="chart" width="400" height="200"></canvas>

<script>
  const ctx = document.getElementById("chart").getContext("2d");
  ctx.fillStyle = "steelblue";
  ctx.fillRect(10, 10, 150, 80);
</script>