Five Obscure but Useful HTML Tags

August 5, 2020

If you’re not familiar with HTML, this article isn’t going to be of much use to you. Sorry.

There are a lot of HTML tags. Sometimes I learn about one, get really excited to use it in my next project. Then I remember that I hardly ever do web projects at all. Today is the day that I finally get to use my obscure knowledge! I’ll show you some of the tags which are the most interesting to me. All these will work with HTML5, and are listed in no particular order.

1. template

The <template> tag contains content that the user can’t see. You need to use JavaScript to render it later. A template can be rendered many times, at any time, and be placed anywhere on the page.

<button onclick="showContent()">Show Me Some Stuff!</button>

<template>
    <p>Hey look! It's stuff!</p>
    <img src="stuff.jpg">
</template>

<script>
function showContent() {
    var temp = document.getElementsByTagName("template")[0]; // gets the first template in the page
    var clon = temp.content.cloneNode(true); // a clone of the template
    document.body.appendChild(clon); // adds the template to the bottom of the page
}
</script>

Uses:

  • If you need to render the same content many times, but don’t want to type it out, you can write some JS code to do it for you
  • If you need to repeat content but change just a little bit, you can change it before inserting it into the page as well

2. details

By default, content within the <details> tags are hidden, but can be shown by clicking on it. Each element should display a summary of what it’s about when it’s hidden. Using it looks something like this:

<details>
	<summary>Click me to learn about Malaria!</summary>
	Ok, so here's some more information. Malaria, while being extremely common in some areas, is very easy to prevent. Malaria is mainly spread by mosquitos, which can be kept at bay using mosquito nets. It costs about $2 to buy a net. Donate a couple hundred of those, and you will have easily have saved a life.
</details>

A details section before being expanded
A details section after being expanded

Uses:

  • This could be used for an FAQ in a fairly obvious way
  • Samsung uses something similar on their website for footnotes

3. wbr

The <wbr> tag can be used to show a possible word break. Sometimes you have a word that’s so long that the web browser automatically breaks it up. Using the <wbr> tag gives the browser a specific place to break up a word if it’s necessary.

anti<wbr>dise<wbr>stablishmen<wbr>taria<wbr>nism

Uses

4. abbr

The <abbr> tag is used to define an abbreviation. When the text is hovered over, it will show the full title.

To do this, we need <abbr title="HyperText Markup Language">HTML</abbr> content.

Yes, we could do the same thing with a regular <span>.

To do this, we need <span title="HyperText Markup Language">HTML</span> content.

But using <abbr> can help the visually impaired, who need text-to-speech software. The text-to-speech tool is more easily able to tell that it’s an abbreviation this way.

5. time

The <time> tag tells the browser that the text refers to a time.

The meeting is on <time datetime="2020-07-17 19:00:00">Friday at 7pm</time>.

You don’t always need the datetime attribute. If you’re just showing a time, for example, then you can use <time> without the datetime, like so.

The meeting is at <time>19:00</time>.

Uses

  • On some browsers (mainly on mobile devices) there will be a link to add the time to the calendar.

Conclusion

There’s a CodePen with all the examples featured in this article. If you want to look at more HTML tags to play around with, the W3 HTML Reference is always a good read.


About the author

Mike White

Mike White is a second-year Computer Science student at the Rochester Institute of Technology. His interests are technology, philosophy, culture, music, and effective altruism. Mike has a blog about technology and philosophy. If he isn’t doing any of that, then he’s probably either playing a Sherlock Holmes video game or watching YouTube.

This article was contributed by a student member of Section's Engineering Education Program. Please report any errors or innaccuracies to enged@section.io.