Every year, almost 2.7 billion blog entries are written online, but almost 96% of them receive no traffic from Google’s organic search results. This lack of visibility often stems from inadequate application of technical SEO during the design and development of websites, which is crucial to improving your page rank.
What is Semantic Markup in HTML ?
Unlike generic tags like <div> or <span>, semantic HTML5 elements such as <header>, <article>, and <footer> will help Search Engines better understand the content of a web page, which in turn improves indexing and visibility, making it easier for Search Engines to determine the hierarchy and importance of different sections.
In this article, I will discuss on how semantic HTML5 tags enhance technical SEO and provide a list of essential tags you should always use when building or updating your site.
Whether you are working with a white label SEO firm or simply looking to design your own website with a focus on SEO, Understanding Semantic HTML will be invaluable to your websites SEO.
How Semantic HTML5 Tags Help SEO?
In January 2008, when HTML5 was released by the World Wide Web Consortium (W3C). Its primary goal was to keep the web language easily readable by humans and interpretable by computers. As a result of this, new syntactic sugar HTML Elements were introduced.
This way, HTML semantic elements became the standard (natural) way of enabling Search Engine crawlers to understand what each section of a page is about. This allowed Search Engine algorithms to better analyze and process the content, rank (index) it, and render it in search results.
Pros of Using HTML5 Semantic
1. Make Websites Accessible for the Disabled:
Semantic HTML helps users with cognitive disabilities by providing clear, structured content that is easier to navigate and understand.
Visually impaired users use screen readers to get a clear understanding of the context of each section of a page on a website. Screen readers use web resources such as Alt text, Aria labels, color contrast, HTML structure (semantic tags) to announce them accordingly to the users.
How to Measure Websites Accessibility Score ?
Google Lighthouse compares websites content against the Web Content Accessibility Guidelines and generates a score between 0 and 100.
It will check for things like:
- HTML tags are semantically rich.
- Alternative Text is used in images.
- ARIA landmarks are used.
- Buttons and Links are well described.
2. Web Standardization and Search Engine Optimization (SEO):
HTML5 Semantic Elements were introduced to standardize the DOM structure on websites. This helps the Search Engines interpret the content and context of web pages better.
Elements like <header>, <nav>, <main>, <article>, <section>, <footer> are semantic and help Search Engine crawlers understand the meaning and type of content inside them.
3. Better Code Readability and Maintainability:
Semantic HTML makes code more readable and understandable for developers, both for those who initially write it and for those who later maintain or update it.
4. Responsive Design:
Developers can create flexible layouts using the viewport meta tag (<meta name="viewport" content="width=device-width, initial-scale=1">) that adapt seamlessly to various screen sizes and orientations, improving usability and accessibility on mobile devices.
| |
Key Semantic HTML5 Elements You Should Know
There are more than 100 semantic elements declared and defined by the WHATWG group. I prefer, below are the MUST include HTML elements that will help Search Engines analyze and discover the contents of a website based on the enclosed HTML tag.
<header><h1>-<h6><nav><main><article><section><footer>
<header>: Header Element
The <header> element serves as the top section of a page or section, typically including the title, logo, navigation links, or other introductory content. Think of it as the “welcome area” for each part of your page.
<header>
<h1>Title</h1>
<nav>Home | About | Contact</nav>
</header>
<h1>-<h6>: Heading Elements
Headings give both your visitors and Search Engines information about the content’s hierarchy and relevancy. The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
<nav>: Navigation Element
The <nav> element defines a section of a webpage dedicated to navigation links, like menus or tables of contents, guiding users to different parts of the site or other documents.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>: Main Content Element
The <main> element defines the primary content of a page, focusing on the main topic or functionality. It excludes repetitive elements like headers, footers, or navigation.
<main>
<h2>Article Title</h2>
<p>This is the main content area of the page.</p>
</main>
<article>: Article Element
The <article> element defines a self-contained piece of content, such as a blog post, news article, or comment, that can be independently shared or repurposed.
<article>
<h2>Blog Post Title</h2>
<p>This post covers interesting facts about HTML elements.</p>
</article>
<section>: Section Element
The <section> element represents a standalone section of related content within a page, usually marked with a heading. It’s ideal for grouping content by topic or purpose.
<section>
<h2>Features</h2>
<p>Explore the unique features of our product.</p>
</section>
<footer>: Footer Element
The <footer> element serves as the closing section of a page or section, often containing metadata like author information, copyright, or links to related resources.
<footer>
<p>© 2023 My Company. All rights reserved.</p>
</footer>
Other Semantic HTML5 Elements to Know
Basically HTML Elements are grouped based on their categories they belong in different sections of the website.
- Heading Element (
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<hgroup>) - Sectioning Element (
article,aside,nav,section) - Phrasing Content (
<a>,<abbr>,<area>,<audio>,<bdi>,<bdo>,<br>,<button>,<canvas>,<cite>,<code>,<data>,<date>,<datalist>,<del>,<dfn>,<em>,<embed>,<iframe>,<img>,<input>,<ins>,<kbd>,<keygen>,<label>,<link>,<map>,<mark>,<math>,<meta>,<meter>,<noscript>,<object>,<output>,<picture>,<progress>,<q>,<ruby>,<samp>,<script>,<select>,<slot>,<small>,<span>,<strong>,<sub>,<sup>,<svg>,<template>,<textarea>,<time>,<var>,<video>,<wbr>) - Embedded Content (
<audio>,<canvas>,<embed>,<iframe>,<img>,<math>,<object>,<picture>,<svg>,<video>) - Interactive Content (
<a>,<audio>,<button>,<details>,<embed>,<iframe>,<img>,<input>,<keygen>,<label>,<object>,<select>,<textarea>,<video>) - Metadata Content (
<base>,<link>,<meta>,<noscript>,<script>,<style>,<template>,<title>)
Did You Know
- Negative Impact on SEO
Ignoring HTML semantic elements will cause Search Engine crawlers to see the page as only plain text, links, and images. They won't understand the content and context within the page, leading them to conclude it is low-quality content, which may result in a lower ranking in search results.
- Case Study on Visually Impaired Users
In a study of 100 visually impaired users, it was found that they lose an average of 30.4% of their time due to frustrating situations with screen readers. This makes it harder for them to interpret content and navigate to other pages or sections on the web.
- Code Maintenance Challenges
A website full of non-semantic HTML tags like
<div>,<span>, and<p>will make the code harder to maintain and update over time for developers.
Conclusion
Whether you are building the site yourself or hiring an experienced web agency, make sure to include the necessary semantic HTML elements in your website. This will ensure that your website is SEO-friendly and ranks higher in search results, ultimately driving more traffic to your site.