Member-only story
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.
