Semantic HTML and why you should care

If you're not already super familiar with the semantic features of HTML5, they are probably one of the easiest things you could pick up right now that will immediately have a significant impact on the way you write code.

Avoiding tags such as <div> and <span> and instead using more meaningful semantic alternatives will make your code more readable, your websites more accessible and even improve your ranking in Search Engines. In short, there is no reason not to do it, especially because it's extremely straightforward. Let's jump right in:

Essentially you can break down HTML elements into three major categories. sections, which structure your website to define what goes where. content groups, which define the type of content a container holds with more detail.

A <blockquote> like this one here could be a content group. But so are the paragraphs in this entry.

The third type is the text level, which allows finer control about certain passages of text and copy on your website, for example to highlight a few words.

This post will primarily look at the various components you can use to define sections as they will have the biggest impact for structuring your site and improving accessibility.

<main>

The main element is unique on your website or every view of your web application. Let's look at the official spec below:

The main element represents the dominant contents of the document. A document must not have more than one main element that does not have the hidden attribute specified.

What you're looking for when using this element is actual content at the top level of your site. Exclude other elements that are not content related and appear on multiple views such as footer content, navigation elements, breadcrumbs or ads.

<footer>

Pretty much every website has a footer that might contain legal information, contact details and more. This is exactly what this element was created for. The official description is:

A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

However, unlike the <main> tag, you can have multiple <footer> tags in a view. If you have multiple sections on your site, that you can structure into separate parts with a header / content / footer structure, go for it!

<header>

The counterpart to the <footer> tag. This will define the header of either your website or a section on your site. The header section typically consists of heading or introductory information, as stated in the specs you have a bit interpretation room to decide what your header should consist of:

A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

<article>

The <article> tag is super convenient especially for blogs, the official description is as follows:

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

The article you're reading right now for example, is wrapped in an <article> tag. You'd usually find them nested in the <main> section on your website. However, pay attention that an article actually contains meaningful content, usually in text form. But what about areas on your website that can stand on their own but are not necessarily content related, for example a container for ads, some links for related posts or an area where you display the users avatar and a post count in a forum? For this we have the <section> tag.

<sections>

Sections can be used in multiple ways on your website. For one, they can help break down areas of content. In this blog article for example, every part that contains information about a different HTML tag is another <section>. You can also define other sections as mentioned above that can't really identify as an article. The official description is:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

<aside>

So far so good. Now we have a decent structure that is living inside of our <main> content. But what if we want, for example to use a sidebar, or show some recommended products in an online shop next to the relevant content? This is where the aside element comes in handy. It is meant for secondary content that is supplementary to the current content. You can place the <aside> element in various places on your side, it can either live next to an <article>, next to a <section> or even next to the <main> element. Depending on what content your <aside> is referring to. The official description of this element is:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

<nav>

There is not a whole lot to say about the <nav> element other than that it should be wrapping your sites navigation. You can use multiple <nav> elements on your site, if you for example have sub navigations or tabbed navigations in certain areas. The official description:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

<address>

This one is extremely important for accessibility to give users a chance to easily identify crucial contact information on your site. Use it to surround any contact details on your website. Official Description:

The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.

And this concludes the most important structural semantic HTML elements. Start using them today and build better websites. There is still a lot of other interesting grouping tags such as <menu> tags or <time>. You can continue to explore the extensive list of tags on https://html.spec.whatwg.org/multipage/ where i have also extracted the official descriptions in this article.

If you have any questions regarding semantic tags and their usage, let me know in the comments.