Semantic HTML elements that are rarely used but should be

Living Standard HTML (aka HTML 5) has added new elements over the past several years to help fill in content ambiguity gaps for bots and humans. Some of the elements aren’t frequently used but may improve UX, accessibility, and search visibility.

Semantic Hypertext Markup Language (HTML) has been a part of the standard since its creation. Semantic markup refers to elements and attributes that provide context to the data it contains or references. The ones you’re probably most familiar with are head, body, headings (h1, h2, etc.), and p. They help create the most basic version of a web page.

When HTML 5 was officially released in 2014, it added several new semantic elements. The most popular and commonly used elements include:

The use of those semantic elements has slowly become a best practice for web developers because they help with building and maintaining page templates. However, there are several more reasons why they should be used.

Why everyone should use semantic HTML

Web developers, webmasters, and editors should be using semantic HTML because it can improve how computers and people experience and understand the page content.

Semantic HTML make pages machine readable

The use of semantic elements can help define specific areas of a page template for machines. For example, bots can parse and process semantic blocks with near-perfect accuracy if the HTML is coded correctly.

Browsers like Firefox and apps like Pocket have a reader mode that relies on semantic elements to make decisions about which composition it should display or hide. They look for elements like main and article to determine the main content, and filter out content encased by elements like nav.

Firefox Reader Mode
Example of a Coywolf News article that was converted to reader mode using semantic markup

Semantic HTML provides a better user experience

Incorporating semantic markup can make the presentation of content more clear and informative. Several of the rarely used semantic elements discussed in this article have their own default style and provide additional details to the reader. One element, in particular, provides interactive functionality without the need for JavaScript.

Semantic HTML creates a solid foundation for accessibility

Screen readers make use of semantic elements, which makes navigating and reading pages that incorporate them more accessible. JAWS, NVDA, and VoiceOver all announce each element for its semantic purpose.

To be effective, semantic elements need to be implemented correctly in the code. Semantic elements should also be seen as a starting point to accessibility. Web developers are encouraged to take full advantage of ARIA HTML attributes to help make their pages more fully accessible.

Semantic HTML may improve search engine visibility

It’s unknown exactly which semantic HTML elements Google’s algorithm considers when parsing and analyzing pages. Most SEOs agree that headings – in particular, the h1 – are used by Google to understand the context and structure of a web page’s composition. However, there’s not enough research and evidence to prove that that Google derives meaning from the newer HTML 5 elements.

What is known is that Google recommends the use of semantic HTML. Their Google Search Development docs clearly state that webmasters should use semantic HTML markup for [their] content whenever possible. Based on Google’s history with structured data, I think it’s reasonable to assume that they currently use some of the newer semantic elements for better comprehension, and it is likely they’ll use more of them in the future.

Rarely used semantic HTML elements for optimizing page content

There are several semantic HTML elements that most people don’t use but should. I use most of them in my WordPress themes and posts and am resolved to start incorporating the rest of them in future templates and posts. All of them influence machine readability, accessibility, UX, and SEO to some degree.

Become a member to read the full article or sign in