Most developers have a comfortable set of HTML tags they reach for every day: <div>, <p>, <a>, <img>, <ul>. That list handles the vast majority of layouts. But the HTML specification is far larger than that short list, and buried inside it are elements that do something genuinely useful — communicating meaning to browsers, search engines, and assistive technologies that a plain <div> simply cannot.
This post is a tour of the ones worth knowing. None of these are obscure for the sake of it. Each one solves a real problem, and picking the right element is often cheaper than the JavaScript you would otherwise write to accomplish the same thing.
The <details> and <summary> Pair
This is probably the most underused interactive element in the language. The <details> element creates a disclosure widget — content that is hidden by default and revealed when the user clicks. No JavaScript required. The <summary> child provides the visible label for the toggle.
<details>
<summary>What is included in the theme purchase?</summary>
<p>Every purchase includes the full source code, a guided Sanity CMS addon,
an llms.txt file for AI editors, and lifetime updates.</p>
</details>Browser support is complete across all modern browsers — Chrome 12+, Firefox 49+, Safari 6+, and Edge 79+. The browser draws the disclosure triangle automatically. You can override its appearance using the summary::marker pseudo-element in Chrome, Firefox, and Edge. Safari still requires the ::-webkit-details-marker fallback if you want cross-browser consistency.
A newer CSS pseudo-element, ::details-content, landed across all major browsers in late 2025 and lets you style the hidden panel directly — useful for animating the open/close transition without reaching for JavaScript at all.
Common good uses: FAQ accordions, optional help text inside forms, "show more" sections below long descriptions, and settings panels in admin UIs. The open attribute can be added to start the element in its expanded state if needed.
The <time> Element
Any time you display a date or time to a reader, wrapping it in <time> is worth the three extra characters. The element has one key attribute: datetime, which holds an ISO 8601 machine-readable value while the tag's visible content can be whatever human-friendly format you prefer.
<p>Published on
<time datetime="2026-06-22">June 22, 2026</time>
</p>
<p>The event starts at
<time datetime="2026-07-04T19:00">7 PM on the Fourth</time>.
</p>
<p>The build takes about
<time datetime="PT45M">45 minutes</time>.
</p>The datetime value uses ISO 8601 conventions: YYYY-MM-DD for dates, YYYY-MM-DDThh:mm for date-times, and PTnHnM for durations (so PT45M means 45 minutes, PT2H30M means two and a half hours).
Why bother? Search engines use the structured date to understand when a piece of content was published or when an event occurs. Assistive technologies can present the value in locale-appropriate formats. Scripts that aggregate or sort content can read the datetime attribute directly without parsing human text. It is one of the lowest-effort semantic improvements available.
The <mark> Element
The <mark> element highlights text that is relevant in the current context. The most natural use is search results — when a user searches for a term and you display results, wrapping the matched portion in <mark> is semantically correct. Browsers render it with a yellow background by default, and screen readers typically announce it as highlighted.
<p>Your search for "roofing contractor" matched the following:
</p>
<p>Ridgeline is the leading <mark>roofing contractor</mark>
serving the greater Denver metro area.</p>It is easy to confuse <mark> with <strong> or <em>. The distinction matters: <strong> signals importance; <em> signals stress emphasis; <mark> signals contextual relevance — "this is the part the user was looking for." They carry different meanings to assistive technologies and should not be used interchangeably.
The <meter> Element
The <meter> element represents a scalar measurement within a known range. Think battery level, disk usage, a Lighthouse score, a quiz result, or a skill rating. It is not for task progress — that is what <progress> is for. The distinction is meaningful: <progress> says "this task is X% complete," while <meter> says "this measurement is X on a scale of Y to Z."
<p>Performance score:
<meter
value="98"
min="0"
max="100"
low="50"
high="90"
optimum="100"
>98 out of 100</meter>
</p>The low, high, and optimum attributes are what make <meter> interesting. Browsers use them to color the bar: values below low or above high (when optimum is in the middle range) render as yellow or red. This gives you a semantically meaningful color indicator with zero CSS.
One honest accessibility caveat: screen reader support for <meter> is inconsistent across platforms. Always include a text fallback inside the element (as in the example above) and pair it with a visible label so the value is never conveyed by the visual bar alone.
The <abbr> Element
The <abbr> element marks an abbreviation or acronym and optionally provides its expansion via the title attribute. Browsers typically render a dotted underline and display the expansion as a tooltip on hover.
<p>This theme ships with a valid
<abbr title="Search Engine Optimization">SEO</abbr> configuration
and a Lighthouse-verified <abbr title="Content Security Policy">CSP</abbr>
header.</p>The first time an abbreviation appears on a page is the right place to use it. Subsequent occurrences usually don't need the element unless the page is long enough that a reader may have forgotten the expansion. This is a small, genuine accessibility improvement — users relying on screen readers or those unfamiliar with a term benefit from the in-context definition.
The <address> Element
A common misconception: <address> does not mean "a postal address." It means "contact information for the nearest <article> or <body>." Inside a blog post, it marks up the author's contact details. In a page footer, it marks up the organization's contact information. It is not appropriate for arbitrary postal addresses in body copy (use <p> for those).
<footer>
<address>
Questions? Email us at
<a href="mailto:[email protected]">[email protected]</a>
or find us at 123 Main St, Denver, CO.
</address>
</footer>Search engines use <address> as a signal when parsing contact information for knowledge panels and local business results. Local service businesses in particular — the plumbers, roofers, and HVAC contractors who rely on local SEO — stand to benefit from correct use of this element alongside the Schema.org LocalBusiness markup that usually accompanies it.
The <cite> Element
The <cite> element marks the title of a referenced creative work — a book, article, film, song, or specification. It is not for citing a person's name. According to the HTML specification, <cite> should contain the title of the work, not the author. Browsers typically italicize it by default.
<blockquote>
<p>"Programs must be written for people to read, and only incidentally
for machines to execute."</p>
<footer>
— Harold Abelson, <cite>Structure and Interpretation of Computer Programs</cite>
</footer>
</blockquote>The pattern of wrapping a <blockquote> with a <footer> and <cite> is the semantically correct way to attribute a quotation in HTML. The attribution goes inside the <blockquote>'s footer, not outside it, and the title of the source (not the author's name alone) goes in <cite>.
The <output> Element
The <output> element represents the result of a calculation or user action. It is typically used inside a <form> alongside inputs. When connected to inputs via the for attribute, browsers and assistive technologies can communicate the relationship — similar to how <label> connects to a field.
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<input type="number" id="a" name="a" value="0"> +
<input type="number" id="b" name="b" value="0"> =
<output name="result" for="a b">0</output>
</form>Beyond pure arithmetic, <output> is appropriate for any dynamically computed value derived from form input — a price estimate, a unit conversion, a character count. Using it instead of a plain <span> adds meaning: the browser and screen reader both understand this value was computed from user input, not authored directly into the page.
A Note on When to Use These
Semantic HTML is not about using the most specific element possible in every situation. It is about choosing elements whose meaning matches what you are actually communicating. A progress bar drawn with a <div> and some CSS is not wrong because it lacks semantics in the abstract — it is wrong if a better element exists that communicates the same meaning to browsers, search engines, and assistive technologies without extra work.
Every element above handles a genuinely common pattern: expandable sections, dates, search highlights, measurements, abbreviations, contact info, citations, calculated results. These are not exotic edge cases. They appear in documentation, blogs, product pages, and contact forms every day. Reaching for the right element when the situation calls for it is one of the smallest, cheapest improvements a front-end developer can make — and it compounds across an entire site.
The HTML specification is worth reading slowly, at least once. The WHATWG Living Standard is the canonical reference, and the MDN element reference makes it approachable. Most developers who do this discover at least a handful of elements they had been reinventing with divs and JavaScript for years.