5 Useful HTML Tags You Never Knew Existed

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>

You’ve probably seen this tag on the web before even if you haven’t used it yourself. Does the image below look familiar?

This tag is meant to be used for defining keyboard input. The above look is achieve by adding some simple styling to the below HTML. Without styling the tag displays in the browsers default monospaced font.

5.<svg>

This tag creates a container for SVG graphics. In my opinion the interesting usage is the built in methods for drawing shapes such as circles, polygons, and paths. Below is an example of the polygon method

which defines points and styling in order to prevent this star below:

I encourage everyone to add more semantic tags to their coding for readability, and better SEO. Even if you never need to draw an orange star I hope you learned something useful today. Don’t forget to subscribe for similar content and happy coding!