5 Useful HTML Tags You Never Knew Existed

Elizabeth Westphal
3 min readApr 5, 2022

It is generally best practice to use a semantic HTML tag to accomplish a task where you can — this makes your code more readable and your website more parseable. Here are five more tags you can add to your toolkit:

1. <progress>

This tag is used to show how far along a task or project is. It displays a bar which is filled according to the inputs you provide. For example, the code below

displays a bar which (unstyled) on the webpage looks like this:

2. <time>

It’s very simple to type out 2:30 pm as regular text, so why do we have a need for a time tag? It’s machine-readable. This helps both search engines find results and allows for the time to be more easily added to a smart calendar. The code below

outputs text that looks like this:

on the webpage. The time tags can be styled differently or left to match the paragraph style leaving them indistinguishable from regular text.

3. <abbr>

Tired of clumsy parenthetic explanations for your acronyms? This semantic tag is for you. Use the tag to surround an abbreviation and the full version of the text will display when the user hovers over the tag. For example this html

displays as an underlined word in the browser as shown below.

4.<kbd>

--

--

Elizabeth Westphal

Lover of science and statistics, I write short data-backed articles and always cite my sources!