HTML is a markup language used for structuring and presenting content on websites. The latest release of HTML as of writing this article is HTML5, or HTML5.3 to be precise. HTML5 offers a wide range of tags that were not offered before. When developing websites, it is important to take advantage of these tags and utilize them properly.
We will take a look at some of the tags that were not offered previously and explain the usage of these tags. Chances are, you are already familiar with these tags, however, we will also talk about some of the lesser-known tags that you can take advantage of in your next web project as well.
HTML was originally created as a markup language. As the world of the internet grew and adopted by more people every day, it needed some changes. HTML5 emphasize on semantic tags. One of the reasons for pushing for semantic tags is to be more user-friendly and accessible. Semantic information that is human-readable and machine-readable will provide better information to screen readers, search engines and third-party applications. For example, we used to write <div class=”header”>, but now we can use <header> instead. Here are some more newly introduced tags from HTML5.
<article>
According to the HTML5 specification, “The article element represents a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry.”
In simpler terms, the <article> element is often used to contain the main content and be separated from the rest of the page. <article> is also versatile that on a page with more than one piece of content, multiple <article> elements can be used to contain each individual piece of content. <article> can also be nested within another <article>.
Think of a news website, the main content will be wrapped in <article> while there might also have other elements such as breadcrumbs, sidebar...etc. Or if it is on a page with a list of news reports, the list may be wrapped around with the <main> element, while each individual news article will be wrapped in <article>. <article> isn’t just for, well, articles, it works great for any self-contained content. Such as wrapping individual videos for a list of videos or individual products on a product listing page.
Applications such as the Reader of Apple WatchOS use the <article> element to know the primary content of a webpage. With applications like this, it means if you use the semantics tags right, the content of your webpages will be more accessible to users.
<header> and <footer>
Both the <header> and <footer> tag are the new semantic tags that were introduced with HTML5. They are used to define the header and footer section for the element that contains it. Similar to <article>, <header> and <footer> doesn’t come with any special styling by default, but it gives a more semantic meaning. Typically, <header> when used as the page header, often contain the sites’ logo and the title, but it is not limited to be the header of a page, it can also be used as the header for an article or other content on a page.
<footer>, as the name suggests, is usually at the bottom of a web page. Most websites have a footer with some contact information, legal information such as links to terms and conditions or copyright information. Some websites have more than one footer. With the introduction of <footer> in HTML5, you can create these with the semantic-meaningful <footer> element instead of a meaningless <div>.
HTML5 and Media
Before HTML5 was released, audio and video content needed browser plugins to be presented on web pages. This was because the support for these types of media was not built into the HTML specification. Since the introduction of <audio> and <video> in HTML5, we begin to see the plugins starting the fade.
The introduction of <audio> and <video> not only provided a way to embed audio files but also provided playback functionality for supported media formats. There are several attributes that can be optionally added to these media tags such as autoplay, loop and preload. This makes embedding audio and video on your website significantly easier.
Lesser-known tags
<mark>
The <mark> tag highlights parts of your text. It is useful for emphasizing certain parts of your text to make it stand out. This is not the same as <strong> as the <strong> tag should be used to denote important text. <mark> tag is more for pinpoint something that is relevant
<del>
If you want to display text revision with marking, you can use <del>. As the name suggests, the <del> tag shows the text with a strikethrough to indicate that the content is revised.
<time>
One of the goals for HTML5 was to provide semantic tags. Tags that are human-readable and machine-readable. <time> tag provides just that. Although the tag doesn’t come with default styles such as <mark> and <del>, web calendars and search engines can pick up the <time> tag and provide smarter results.
<abbr>
The abbreviations tag is a very useful tag for your content. You can use this to define an abbreviation that might be unfamiliar to the reader. You can use the <abbr> tag to wrap your abbreviations, use the title attribute to show the full name of the abbreviation. When the reader mouse over the text, it will show the full title of the abbreviation.
Conclusion
There are so many HTML tags that are not well known to the vast majority of web developers. The ones mentioned above are only a fraction of the tags. One of the reasons is that using <div> and <span> can already achieve the goal. However, as the world of websites is growing by the day, we should try our best to build better and more inclusive web pages.
Using the right tags puts the content and meaning at the same level, and therefore will increase the accessibility of your projects. Breaking a habit is never easy, but just give this a try on your next project. It might surprise you.