Skip to content
πŸ‘‰All tips here

HTML: 9 Overlooked Features (And When to Use Them)

Lesser known but useful html elements and attributes frontend.tips

I used HTML for granted many times, treating it just as a basic building block of our websites. During my years of development I’ve discovered there are quite a few overlooked HTML features that I wasn’t even aware of. These features can be incredibly useful when used right! I wanted to write this down and share some of them, here we go:

Auto-Refresh with http-equiv

Need a page to refresh automatically? The http-equiv="refresh" meta tag has got you covered:

<meta http-equiv="refresh" content="30">  
<!-- Refresh every 30 seconds -->
<meta http-equiv="refresh" content="5;url=https://example.com">  
<!-- Redirect after 5 seconds -->

Just be cautious with this one – unexpected refreshes can hurt user experience! I personally have used it once on a dashboard for a status pages.

Setting Base URLs

The <base> element can save you from writing full URLs repeatedly, for example, when you have multiple links that point to the same base URL:

<head>
  <base href="https://your-site.com/blog/">
</head>
<body>
  <!-- Now this points to https://your-site.com/blog/article-1 -->
  <a href="article-1">Read Article 1</a>
</body>

The Definition Element

The <dfn> element lets you mark the defining instance of a term, improves the visibility and assets screen readers in recognizing definitions:

<p><dfn>HTML</dfn> (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser.</p>

For example, it can enhance SEO and accessibility for technical documentation.

Grouping Headers with hgroup

The <hgroup> element is perfect for grouping headings with subheadings, it is like a helper that semantically organize your headings and improves readability and structure:

<hgroup>
  <h1>Main Blog Title</h1>
  <h2>An interesting subtitle that adds context</h2>
</hgroup>

Bidirectional Text Override

The <bdo> or the bidirectional override element helps you explicitly control the text direction, it works best in multilingual context.

It has 2 attributes:

  • ltr: Left-to-right text direction (default in most browsers and languages like English).
  • rtl: Right-to-left text direction (used for languages like Arabic, Hebrew).
<p>This is regular text with <bdo dir="rtl">reversed text</bdo> in it.</p>
<p>Useful for: <bdo dir="ltr">Χ©ΦΈΧΧœΧ•ΦΉΧ</bdo></p>

<bdo dir="rtl">12345</bdo>
<!-- Output: 54321 in a right-to-left layout. -->

Image Maps

Remember image maps? They’re still useful for creating clickable areas on images:

<img src="workspace.jpg" alt="Workspace" usemap="#workmap">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" href="computer.html" alt="Computer">
  <area shape="rect" coords="290,172,333,250" href="phone.html" alt="Phone">
</map>

With image maps you can define multiple clickable areas in a single image, making them more interactive and structured. For example, they work well for interactive infographics.

Visualizing Values with meter

The <meter> element represents a measurement within a known range or a fractional value. It’s perfect for displaying disk usage, relevance of a query result, or progress that isn’t time-based:

<!-- Basic usage with value between min and max -->
<meter value="0.6">60%</meter>

<!-- Real-world examples -->
<p>Disk usage: <meter value="0.8" min="0" max="1">80% full</meter></p>
<p>Quiz score: <meter value="85" min="0" max="100" low="60" high="80" optimum="100">85 out of 100</meter></p>

Browsers typically display different colors based on these thresholds:

  • Green when the value is in the optimal range
  • Yellow when it’s in the medium range
  • Red when it’s in the low range

Check the rest of the options here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter

Styling Keyboard Inputs with kbd

The <kbd> element represents keyboard input or any kind of user input. It’s perfect for tutorials, documentation, or anywhere you need to show keyboard shortcuts:

<p>To copy text, press <kbd>Ctrl</kbd> + <kbd>C</kbd></p>
<p>Save your work with <kbd>⌘</kbd> + <kbd>S</kbd></p>

<!-- You can also nest them for combinations -->
<p>Press <kbd><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd></kbd></p>

Wrapping Up

Let’s be real, not every project will need these overlooked HTML features like the meter element or bidirectional text override, but even after years of development and knowing that these HTML features exist can be a real game-changer when the right situation comes up. Simple and practical just like that.

Learn more: