Learn the proper way to use uncommon HTML tags that'll make for a more semantic website, better accessibility, and improved SEO.

Words are important. They have meaning, and putting certain words side-by-side allows us to convey information to others. The same is true of punctuation. A sentence that is well-punctuated is much easier to understand than one without punctuation.

I’ve become interested in grammar and punctuation — what might loosely be termed “semantics.” As a frontend developer, I’ve been as interested in the punctuation of the web — namely, using the correct tags to mark up pages — as I have been of the display of information.

Our web pages are documents. They contain one main title, represented by an h1 element. If they have sections within them, each will have an h2 element, and if any of these sections has a further subsection, these subsections will each be titled by an h3 element.

If we are looking at the main navigation of the website, we expect a ul to be placed inside a nav element. A sidebar will probably be inside an aside element (though not everyone agrees this is currently the best element to use).

We all know these general web semantics. However, there are many HTML elements available to us to mark up our web pages, and it will do us all a great service to know about them. You can find a complete list of HTML elements on the Mozilla MDN Web Docs.

Using HTML5 tags for SEO and accessibility

Why should you know about these tags? If you care about accessibility (you do!), you will want your page to be as understandable as possible to as many users as possible. If you care about SEO, you’ll want to make sure bots can understand, index, and return your content in search engine results, but also in social media posts (such as Twitter cards).

Basically, having a “semantic web[site]” means a website where, as Tim Berner Lees says, “information is given well-defined meaning, better enabling computers and people to work in cooperation.”

Let’s have a look at some of the lesser-used elements, which will help us to make a more semantic web.

#html #html5