A Duda customer recently asked me about semantic HTML tags and this turned on the curious side of my brain. With modern web design and HTML5, there are a range of semantic HTML tags that help people and/or robots reading your website’s HTML code understand the structure or context of the content on a page.
Anyone who’s been around the web is familiar with the classic tags: <p> for paragraph, <table> for a structured table, <h1> - <h6> for heading sizes. These are the classic semantic tags of HTML. You might even be familiar with a bit more specific tags such as <nav> for navigation, <article> for blog or news articles, <header> and <footer>, etc..
On its own, semantic HTML is a great tool that makes websites easier to understand and parse. But, this made me curious about all the different HTML tags that exist officially as part of HTML 5 and sent me down a rabbit hole of fun (yes, this is my idea of fun on a Tuesday night). So, I thought I’d share my findings.
Some of these tags are actually pretty powerful, some are just kind of fun and some can be used for semantic situations. Really, the point here is just to show you there is much more to HTML than meets the eye.
Let's take a more in-depth look at each one of the HTML tags I've listed above.
There is actually a tag for text that is struck-through and another that indicates the replacement text. This comes directly out of the semantic playbook to show that a piece of text should be deleted.
An example of this is: "Pluto is isn't a planet."
In HTML, here is how that looks:
If you want to be extra fancy, you can even include a datetime attribute on the <ins> tag to show when the new text was added or amended.
“abbr” is short for abbreviation! (Would you ever have guessed?) The idea here is that if you use a title (e.g. “Mr.”) or acronym (e.g. “POTUS”), the abbr tag indicates exactly what that abbreviation means.
For example:
What’s great here is that you can clearly see in the code that the abbreviation tag gives context as to what exactly the shorthand means.
The next two elements in our list are similar, but definitely not the same. Meter is a built-in range to give an indication of good, medium or bad results. When building a website, this gauge is a nifty tool built into browsers that is normally created using much more custom code and JavaScript.
Here is what this looks like in HTML:
And here is what this looks like on the page:
Both the progress and meter tags display bars on a web page. However, the progress tag is designed to show how far along something is, such as a project or task.
For example, if you wanted to show a project is 70 percent complete, you could use this HTML:
And here is what that would look like on the page:
Did you know HTML has a built-in accordion feature? Most websites that implement some type of accordion rely on JavaScript to implement the ‘open and close’ experience, but this is actually a native feature of HTML5.
Here is an example of what this looks like in HTML:
And here is an example of what this looks like when it's running:
See the Pen Details Summary HTML by Russ Jeffery ( @russjeffery ) on CodePen.
If you’re including content from a different source, you should absolutely cite that source (yes, just like in college). The blockquote and cite HTML tags are the semantic version of this that indicate the content is from an outside source.
Here is an example of this written out in HTML:
And here is how that looks on the page:
The time element is both semantic and structured data. It tries to tell crawlers and bots what time exactly is being referenced. A perfect example of where this can be used is in the post date of an article, blog post or page. Most clients or businesses will want this added to the blog section of a website, so if you’re offering a white label service it’s always worthwhile suggesting it as it’s a handy tag to have in your back pocket.
Now, this element does not have a special display and will simply look like all the text around it; but, it provides much more context to any computer or person reading it!
The datalist tag is one I really wish more developers knew about. Often, developers will use complex JavaScript libraries to implement this exact same functionality, even though it already exists in HTML!
A datalist is an advanced drop-down to select something in a form. The nice thing is that it works as both a search and a drop-down.
Here is an example of how to implement this tag in HTML:
And here’s a simple example of what this looks like in action:
See the Pen ExggrGR by Russ Jeffery ( @russjeffery ) on CodePen.
If your website is informational and you really want to highlight a key point, then you can do so using the <mark> tag. It’s a way to highlight a block of text, just as you would in a Google Sheets or Word doc, with the option of also customizing the highlighted color. This can be done using the “background-color” CSS property within the <mark> tag, while the text color can be altered with the “color” property.
Here is an example of how to use the <mark> tag:
With audio becoming more and more important when building a website, boosting both user experience and SEO value of a website, the <audio> HTML tag is a really useful addition, particularly if adding audio does suit the search intent of the user.
The <audio> tag will define a sound and there are three supported files which the tag can be used with. These are MP3, WAV and OGG. How you implement the audio tag into a page is by placing one or more <source> tags with different audio sources. A browser will then select the first one it supports.
Should the browser not support audio, it will then display the text that is between the <audio> elements. It’s becoming more and more of a common tag as audio continues to become more popular with sites, so if you are offering this kind of software as a service and building websites with audio, then it’s certainly one to consider.
Here’s an example of how this HTML tag looks:
As you can see, there are a lot of great HTML5-based tags out there and I’ve only scratched the surface. HTML5 has done wonders for the web and continues to be a place of great innovation in browsers. Let’s all just hope that browser vendors continue to extend and add easy to use core HTML elements like these into the future!
