DEV Community

Cover image for 20 Unknown HTML Tags That Will Make You Write Less And Better Code
Waffeu Rayn
Waffeu Rayn

Posted on

20 Unknown HTML Tags That Will Make You Write Less And Better Code

#seo #webperf #a11y #html

Ah, the classic developer trap.

We spend days fighting with CSS transitions, ARIA roles, and useState toggles for a custom "accordion" or "progress bar," only to find out the W3C solved this a decade ago while we weren't looking. ๐Ÿ˜…

Iโ€™ll admit itโ€”Iโ€™ve been that dev. Iโ€™ve built "div-soups" that looked like a search bar to me but meant absolutely nothing to a screen reader.

But here is the truth: The best code is the code you donโ€™t have to write.

Before we dive in, if you want to see if you actually know your stuff (HTML, CSS, Git, and more), Iโ€™ve been working on a project called Ficus. C'est en franรงais pour l'instant, because I wanted to support the local community first! Itโ€™s full of quizzes on these exact "hidden" tags and weird CSS properties to help you level up.

Alright, enough intro. Letโ€™s look at the tags that are going to make your DOM way smarter.

๐ŸŒ The Semantic SEO Power-Ups

๐Ÿ” <search>

What problem it solves:
For years, we just wrapped search forms in a generic <div>. Screen readers had no native way to identify "This is the search part of the app" without adding manual role="search".

Old way:

<div role="search">
  <form>...</form>
</div>
Enter fullscreen mode Exit fullscreen mode

Now:

<search>
  <form action="/search">
    <input name="q">
  </form>
</search>
Enter fullscreen mode Exit fullscreen mode

๐Ÿ“… <time>

What problem it solves:
Search engines are smart, but they aren't psychics. If you write "Next Monday," they don't know the specific date.

Now:

<time datetime="2026-03-11">March 11th</time>
Enter fullscreen mode Exit fullscreen mode

Why it matters: Massive SEO win. It allows search engines to index your events or post dates accurately.

๐Ÿ“ <address>

What problem it solves:
Itโ€™s not just for physical mail! Itโ€™s for the contact information of the nearest <article> or the whole document.

Now:

<address>
  Contact the author at <a href="mailto:hi@ficus.app">hi@ficus.app</a>
</address>
Enter fullscreen mode Exit fullscreen mode

๐Ÿ› ๏ธ Data & Precision Layout

๐Ÿ“Š <meter> vs. <progress>

The Confusion:
Most devs use <progress> for everything. But they have two completely different semantic jobs.

Now:

<progress value="70" max="100"></progress>

<meter min="0" max="100" low="30" high="80" optimum="90" value="95"></meter>
Enter fullscreen mode Exit fullscreen mode

Why it matters: A screen reader announces <progress> as "Loading..." but announces <meter> as a "Gauge." Using the right one prevents user confusion.

๐Ÿท๏ธ <data> & <abbr>

The Problem:
You have a price or a product ID that looks great to a human, but a computer has no idea what the "Machine-readable" version is.

Now:

<data value="7721">Premium Subscription</data>

<p>I love <abbr title="Cascading Style Sheets">CSS</abbr>!</p>
Enter fullscreen mode Exit fullscreen mode

Why it matters: <data> links a human-readable name to a machine-readable value (great for web scrapers). <abbr> ensures screen readers can explain what an acronym stands for.

๐Ÿ–ผ๏ธ <figcaption>

The Old Way:

<div class="img-box">
  <img src="cat.jpg">
  <p>A cute cat</p>
</div>
Enter fullscreen mode Exit fullscreen mode

Now:

<figure>
  <img src="cat.jpg" alt="Orange tabby sleeping">
  <figcaption>Fig 1: Simba, after a long day of doing nothing.</figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode

โœ๏ธ Precision Typography (The "Grammar" Tags)

๐Ÿ“ <ins> & <del>

The Problem:
Showing "Track Changes" or a sale price. Usually, we just use CSS text-decoration: line-through.

Now:

<p>The price is <del>$50</del> <ins>$30</ins>!</p>
Enter fullscreen mode Exit fullscreen mode

Why it matters: A screen reader will say "Deleted: 50 dollars. Inserted: 30 dollars." If you only use CSS, a blind user just hears "50 dollars 30 dollars."

๐Ÿ’ก <mark> & <dfn>

Now:

<p>The <dfn id="html-def">HTML</dfn> is the backbone of the web.</p>
<p>You searched for <mark>backbone</mark>.</p>
Enter fullscreen mode Exit fullscreen mode

Why it matters: <dfn> identifies the defining instance of a term for SEO. <mark> means "relevant to the user's current activity" (like search highlights).

โŒจ๏ธ <kbd> & <code>

Now:

<p>Press <kbd>Cmd</kbd> + <kbd>S</kbd> to save your <code>function</code>.</p>
Enter fullscreen mode Exit fullscreen mode

Why it matters: It distinguishes between what the user does (kbd) and what the computer shows (code).

๐Ÿ’Ž <ruby> (with <rt> and <rp>)

What it is: Annotations for pronunciation, usually for East Asian characters.
Example:

<ruby>ๆผข <rt>ใ‹ใ‚“</rt></ruby>
Enter fullscreen mode Exit fullscreen mode

๐ŸŽญ Interactive & Internationalization

๐Ÿ“‚ <details> & <summary>

The Problem:
Building an "Accordion" usually requires 50 lines of JS.

Now:

<details>
  <summary>What is Ficus?</summary>
  C'est une plateforme pour tester vos connaissances en dev !
</details>
Enter fullscreen mode Exit fullscreen mode

Why it matters: Zero JavaScript. Itโ€™s accessible and keyboard-navigable by default.

โ†”๏ธ <bdi> & <bdo>

Now:

<ul>
  <li>User <bdi>ุฅูŠุงู†</bdi>: 15 points</li>
  <li>User <bdi>Ian</bdi>: 12 points</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Why it matters: <bdi> (Bi-Directional Isolation) prevents right-to-left text (like Arabic) from messing up the layout of the surrounding left-to-right text.

๐Ÿ”Œ <output>

Now:

<form oninput="res.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a"> + <input type="number" id="b">
  = <output name="res" for="a b"></output>
</form>
Enter fullscreen mode Exit fullscreen mode

Why it matters: It semantically defines a "live" result, alerting assistive tech when the number changes.

๐Ÿงฑ <wbr>

What it is: A "Word Break Opportunity." It tells the browser "If you have to break this long string into two lines, do it here." (Perfect for long URLs or file paths).

๐Ÿ“œ <cite> & <q>

Now:

<p>As <cite>Steve Jobs</cite> said, <q>Stay hungry.</q></p>
Enter fullscreen mode Exit fullscreen mode

Why it matters: <cite> handles the source, and <q> handles the inline quote (adding quotes automatically based on language).

๐Ÿงญ The Bigger Picture

Just like the JavaScript evolution, HTML isn't just about "showing stuff on a screen." Itโ€™s about meaning.

When you use the right tag:

  1. Your SEO goes up because Google knows exactly what your data is.
  2. Your A11y is "free" because the browser handles the screen reader logic.
  3. Your JS bundle shrinks because you don't need a library for a simple accordion.

If you want to put your knowledge to the test, go check out Ficus. Allez faire un tour sur le site pour voir si vous pouvez obtenir un score parfait sur le quiz HTML. Itโ€™s the best way to move from "someone who writes code" to an "engineer who masters their craft."

Happy coding! ๐Ÿ™‚. Let me know if you have some tag i might have missed.!!!!

Top comments (0)