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
body, headings (
h2, etc.), and
p. They help create the most basic version of a web page.
<head> <!— Contains Metadata —>
<body> <!— Contains the body of the page —>
<p>A paragraph related to the heading</p>
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
article to determine the main content, and filter out content encased by elements like
Semantic HTML provides a better user experience
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.