I was taking a look around the Mozilla Developer Network site to learn more about HTML elements. While doing so, I saw a few that I either didn’t use or thought that I could be using more and wanted to share with you. For each, I’ll post what it is and why you might consider using it more in your code.

Why would you do such a thing?

I think this is interesting because even while I do web development quite a bit, there are always new things coming out. While I might have been familiar with elements a few years ago, the built-in tags are evolving. (I tried to avoid tags in this post that were not supported by most browsers.)

This actually applies to many areas of learning and knowledge. What we think we know ends up being inaccurate or incomplete, so we need to continually review and reevaluate what we know.

The main recurring theme in this post is that more accurate tags allow us to capture the semantics of the content that we have in them. When we use semantic tags, we give a deeper understanding of what the content actually means. Search engines and other automated tools can get a better understanding of our website, and while we are working with it, we also can understand the intent more clearly.

With HTML5, we can create any tag we want. By seeing what tags are already there, we avoid reinventing tags. Also we can get ideas for semantic tags that we can create in our own projects.

Tag, You’re It!

<address>

I like this tag because it is pretty common to put an address on a web page (maybe in the footer or on a contact/about page.) But instead of putting it in a <div> or something, this tag allows us to be semantic about the address.

<code>

This tag is more common. Again, using it is more semantic than using something like a <pre> tag for displaying monospaced text. It signifies that the contents are computer code.

There are various plugins online that will highlight text in code blocks. Some of them work off of class attributes, and others try to infer the language from the contents.

<samp>

I think this tag is a little more rare in the wild. It should show the output of running a computer program. I think this is interesting because it most of the time the <code> or <pre> shows both the input and output, but this would actually be more correct. By using a different tag, you can style them differently to show the output more clearly. I think this would make various technical writing and documentation easier to understand. Worst case, you could make the styles the same as your <code> formatting and then change them when there is a meaningful distinction from your output.

<kbd>

I actually really like this one for technical manuals. There are many times when you try to say something like: Ctrl + Alt + Delete, when with the <kbd> tag you can get nice styling like Ctrl + Alt + Del with some CSS. (Inspect those tags to see the styling I used.) I think that the result is easier to read.

<cite>

[citation needed] is all the rage on Wikipedia, and it is common to need to cite sources in our own work. Instead of having quotes have “– Aristotle, The Republic” at the end, you can have a <cite> tag that has this information and then use styling to add the dash at the beginning.

<fieldset>

I find <fieldset> useful for laying out forms. One approach is to put a border around a group of controls, so that they visually distinct from other form elements.

<legend>

If you’re using <fieldset>s, <legend> tags can help explain what the contents are. For example, if you had first name, last name, and date of birth in a <fieldset>, you might call the group “General information”.

<q>

This one is interesting. It is supposed to be a semantic way to represent short quotes. I’m guessing that it would be useful for research papers. But I think it might also be nice for inline quotes (quotes inside of quotes) or for styling quoted text. I haven’t used it much, but might consider this going forward.

<track>

<track> gives you the ability to link text to audio or video elements for subtitling. This would be really useful if you had a web app or podcast that linked together a presentation with audio and a text transcript. Or maybe even a video with audio and a text transcript.

<time>

This tag can be used for exactly specifying time. Programs could then read this and understand when a game will start, when an event is happening, or when something occurred.

I’m not sure if there is a fuzziness factor (something happened on this day in history, not this exact time) or for time ranges, but I think these would be useful.

A possible extension would be to say when something happened, and then for the website to use JavaScript to automatically convert the time into something more human-readable. So instead of “2015-12-06 18:04”, say “yesterday at around 6”. This could be achieved pretty easily using something like moment.js.

<dfn>

Again, I think this element has merit for technical documentation. You have the ability to link a word to its definition, and can refer to this throughout the documentation in an unambiguous manner. One possibility would be to automatically create a glossary for a book by parsing it for <dfn> elements. Another use would be for styling definitions consistently.

<mark>

While using <span>s with class attributes might be one approach to highlighting text, you might as well use the built-in tag to accomplish the same goal. You can still change the color with CSS, but get the added benefit of saying that this element exists purely for styling.

<progress>

This was one that I didn’t know about before reading the documentation. Basically you can display a progress bar using nothing but HTML and CSS and change the value using JavaScript. While many front-end frameworks have an implementation of progress bar, this would be a good lightweight control if you aren’t using one. Bootstrap appears to use a <div> with a progress class instead of using an element. I wonder what the tradeoffs of using a <progress> instead would be.

<var>

Last, the <var> tag represents a variable in a mathematical expression or a programming context. I think that this could be useful for styling these elements differently and also for separating code or shell commands from variables. You might use it to replace most inline <code> elements.

Wrapping up

Hope you found these tags interesting, and maybe you looked around a little and found some other tags that you didn’t know about.

Are there any great tags that you think are underrated? Share them in the comments!