Unearth HTML's Hidden Gems: 5 Overlooked Tags Worth Knowing

Ever wanted to create an expandable section on your webpage? Look no further than the <details> and <summary> tags. The <details> tag defines a disclosure widget, such as a disclosure button, that can be toggled to hide or show content. The <summary> tag, nested within <details>, provides a visible heading for the details section.

1. <details> and <summary>

The <details> and <summary> tags provide a simple way to create collapsible content sections, perfect for FAQs or hiding lengthy content until needed.

1
2
3
4
<details>
  <summary>Click to reveal more</summary>
  <p>This is the hidden content that appears when the summary is clicked.</p>
</details>

Output

2. <time>

The <time> tag adds semantic meaning to dates and times on your site, aiding accessibility and search engine optimization.

1
Article published on <time datetime="2024-04-16">April 16, 2024</time>.

Output

3. <cite>

When quoting external sources or citing references, the <cite> tag provides semantic markup for attribution.

1
2
3
4
<blockquote>
  <p>Knowledge is power.</p>
  <footer>— <cite>Francis Bacon</cite></footer>
</blockquote>

Output

4. <mark>

Need to highlight certain text dynamically? The code><mark></code> tag does just that, whether for search results or emphasis.

1
Search results found: <mark>HTML5</mark> is the latest version of the HTML standard.

Output

5. <output>

For displaying the result of calculations or user input, the <output> tag is invaluable, especially in interactive forms.

1
2
3
4
5
<form oninput="result.value = parseInt(x.value) + parseInt(y.value)">
  <input type="number" id="x" name="x" value="0"> +
  <input type="number" id="y" name="y" value="0"> =
  <output name="result" for="x y"></output>
</form>

Output

In conclusion, while the <div>, <span>, and other common HTML tags are indispensable, exploring the lesser-known tags like <details>, <time>, <cite>, <mark>, and <output> can add versatility and semantic richness to your web projects. So, the next time you're crafting a webpage, don't forget to dig deeper into HTML's treasure chest of unused tags!