Semantic HTML Tags That Will Boost Your Markup Quality

It's been a long time since Hypertext Markup Language (HTML) showed up to become the basis of the web. Since that time, many things have changed, and some features of the HTML files went from desirable to negative. Thus, a cryptic markup or an obfuscated source code once considered useful things to avoid unauthorized copies, seems to be a nonsense in the fight for positioning in search engine results that we live in today.

Even though there were tools to get those results, many times they appeared spontaneously as a result of the excessive use of an element to give the structure to the web pages: the div tag. This tag fulfills its duty to give structure to the page layout and position to the various elements, but it is often nested again and again. This complexity becomes a div soup, which brings consequences like making the code very difficult to maintain, among others.

For those of us who started learning web design more than ten years ago, the temptation to use the <div> tag to create a page layout is always there, despite the arriving in 2004 of the semantic elements as part of the developing of the version 5 of HTML.  

What we cannot lose sight of, is the fact that now our markup needs to have a meaning not only to humans for maintenance reasons but also to search engines for SEO purposes as well as to user agents for responsiveness in different devices, and to screen readers for improving its accessibility.

In fact, choosing undescriptive markup elements as our main tool to create layouts could be considered a bad practice. The World Wide Web Consortium (WC3) says about the <div> tag:

“The div element has no special meaning at all…Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.”

This should be enough to stop the abuse of the div tag in our markup.

What should be our choice then? When it comes from semantic HTML people tend to think only in those tags that appeared with HTML5, unaware that from earlier versions, there were elements that describe their content without needing extra attributes:

• <abbr> defines abbreviations and acronyms
• <cite> defines citations, such as for quotations
• <code> defines a code reference
• <q> defines a short, inline quotation

Just to give some examples. The following are the most recent tags along with their meanings

• <article> specifies independent, self-contained content.
• <aside> defines some content aside from the content it is placed in (like a sidebar).
• <details> defines additional details that the user can view or hide
• <figcaption> add a visual explanation to an image.
• <figure> group together an image and a caption 
• <footer> contains the author of the document, copyright information, links to terms of use, contact information, etc.
• <header> used as a container for introductory content.
• <main> specifies the main content of a document
• <mark> defines marked/highlighted text
• <nav> defines a set of navigation links.
• <section> a thematic grouping of content, typically with a heading
• <summary> defines a visible heading for a <details> element
• <time> Defines a date/time

We've seen tags for almost everything we could need to add to our HTML files, hence it is clear we would always have enough room to include semantic elements in our layouts.

To summarize, good markup conveys meaning and tells the story about what's inside. The use of semantic HTML elements, future-proof the source code of our pages and ensure what we want to communicate is understood by humans and machines.