A Detailed Guide on Semantic HTML: What Is It and Why It’s Important for SEO

A well-designed website is an important tool for attracting attention to your product, and semantic HTML plays a crucial role in creating a quality website. Semantic tags, for instance, help create a logical page structure by organizing content into blocks according to their importance. This has a positive impact not only on the user experience but also on search engine performance, which determines a site's ranking in search results.

Below, I'll tell you everything you need to know about semantic layout and its importance. I'll also show you an example of a proper page layout created with semantic principles in mind.

1. What is semantic HTML?
2. Important HTML semantic tags
3. Hierarchy of semantic tags in the markup structure
4. How to create a page layout using semantic HTML
5. Why you need semantic markup for SEO
6. Common mistakes when using semantic tags

What is semantic HTML?

Semantic HTML (also known as semantic markup) is an approach to HTML document markup that aims to place elements (tags) in a logical and ordered manner within the page structure, emphasizing the meaning and importance of each.

An example of HTML markup for the Netpeak Journal main page

Some might say that the correct structure can be achieved by using common tags that every specialist has seen in practice, such as <div> or <span>.

In fact, the main purpose of semantic layout is to use HTML tags to convey the meaning of the content contained between them. This approach allows you to provide additional information that recognizes the roles and relative hierarchy of the individual parts or blocks of the page.

Important HTML semantic tags

Let’s discuss the most important semantic HTML tags used in modern layout:

<header>

The element that denotes the introductory part of the block, in other words the "header" or "title". It is used to wrap headings (H1-H6), section or page content, search forms, all navigation elements, tips, contact information, etc. It can be placed multiple times on a page.

<nav>

A navigation element that identifies a part of a page that links to other pages or to parts within a page. Simply put, this tag is often used to mark the top menu of a web page. Below is an example of how a navigation tag is used on Netpeak Journal.

<main>

An element that represents the main content of a page. It is placed only once, and you can nest other block tags within it: <nav>, <header>, <section>, <article>.

<article>

This is a complete and self-contained tag that is part of the composition of the document or site as a whole. For example, it can be used to mark a blog post or a separate comment below an article.

<section>

An element that represents a thematically grouped unit of content, such as a section of a document or other parts of a page. For example, the <section> tag divides an article into several parts/sections with headings and paragraphs.

<footer>

A footer, in most cases, contains information about the section or chapter in which it is located. This includes information about the author, time and place of publication, copyright, etc.

Despite its name, the use of this tag is not limited to the bottom of the element. You can also place it at the top, and you can even duplicate it at the top and bottom at the same time.

<aside>

This is a side element, a section that is tangential to the main content yet separate from it. For example, the <aside> tag is used to display ads, footers, page navigation, etc.

For example, on a page about news in Ukraine, you can add an <aside> element to display additional material about recent events in Kharkiv.

<menu>

A menu tag represents a toolbar that consists of a list of commands organized as an unnumbered list of <li> tags. Each element represents a command that the user can execute or enable. The menu tag is a semantic alternative to <ul>. Its main purpose is to help Google Bot understand that this element contains the site's menu.

<h1>, <h2>, <h3>

These elements are headings for the corresponding sections of different levels. The H1 element is for a top-level section, H2 is for a subsection, H3 is for a subsection, and so on. Below is an example of simple markup:

Hierarchy of semantic tags in the markup structure

The most important thing in semantic markup is to follow the logic and rules of the hierarchy so that every element is in place. 

Consistent levels of tag placement in the markup structure:

Level 0

<div> and <span> are universal elements used as containers to group tags.

Level 1

<main> and <article> are the most important semantic elements on the page.

Level 2

<section>, <header>, and <footer> divide parent blocks into separate semantic parts.

Level 3

<h1-h6>, <p>, and <ul>/<ol> are used to differentiate text fragments. Separately, I would like to highlight the headings H1-H6, which define the subject of the content.

Level 4

<a>, <img>, and <button> complement the content. In SEO, the <a> tag is one of the most important tags because it "wraps" links, and SEO specialists often work with them.

Level 5

<strong>, <b>, and <i> are responsible for emphasizing important parts of the text and for visual design.

Now that you're familiar with the basics, let's take a look at a real-world example of how to use semantic tags.

How to create a page layout using semantic HTML

Here's an example of a nice markup based on an article from Smashing Magazine.

1. First comes the page header. Set with the <header> HTML tag, it contains the <nav> element, which is a navigation menu with links to the main categories.
2. Next is the main content of the page, which is marked with the <main> tag.
3. Inside the <main> element is the <article> tag, which in this case denotes an article.
4. A blog starts with the <header> tag, which contains the <ul> tagged list with information about the author, then the main H1 page title with the topic of the article. It is important to remember that there can only be one H1 heading on a page. Thanks to H1, search bots can better understand the content of the page.
5. Below is another <ul> list with reading time information and social networking site links. Here, it would be appropriate to use the <footer> element instead of <ul> since the <footer> tag is designed to provide additional information about the content of an article, section, page, and so on.
6. This is followed by a separate <section> section with a summary.
7. Finally, the article begins with the <p> block.

In theory, everything is simple, but the reality is many sites have a more complex structure. A lot of the time, you will need professional web developers.

You may wonder how to find out if certain content on a page has a particular tag. To do this, you must go to the page, right-click, and select Inspect from the drop-down menu.

This is what the interface looks like on Mac.

On Windows, the steps are identical.

The Chrome DevTools window will immediately appear to the right or bottom of a page.

Hovering over HTML tags highlights the content on the page that contains the tag. For example, the <header> tag can be found using the arrows opposite the tags that allow you to reveal internal elements.

There is another, simpler way to highlight elements on a page. In the Chrome DevTools, first click on the diagonal arrow with a dotted square in the upper left corner (inspector tool), and then select the desired element on the page.

If you're curious, go to any other website, open Chrome DevTools, and click on anything you want. Don't be afraid of breaking something because all the changes are on your end. It's a great way to see the inner workings of how websites render in the browser.

Why you need semantic markup for SEO

Semantic markup is simply a way to mark up document pages using semantic HTML tags based on a certain logic and hierarchy. There is no single rule or template that a webmaster can use to create a layout on a page.

Do note that the concept of "semantic markup" is set in stone; it is just a way of doing things that is defined within the community. Currently, there is only one standard, WHATWG, which was created in 2004 by employees of Apple, Mozilla, and Opera. It clearly states the definitions and rules of association for all semantic tags. The specification is recognized by all companies known today: Google, Apple, Mozilla, and Opera.

First, semantic markup is not a Google ranking factor. Second, this type of layout is not a universal solution to all problems associated with site crawling. This is just one of the methods that specialists have tested in practice to improve the Google bot's understanding of site content, and many have found it to be beneficial.

Improved analysis of page content and structure for the search bot

Semantic HTML provides search engines with a clear structure of your content. This helps search bots understand the contextual relationships between different parts and correctly identify the priority of the content.

Easier identification of the most important parts of the page

Semantic tags point search bots to the most important parts of your content. For example, having the right H2 headings with relevant keywords can get you into the "People also ask" section of the SERP.

Alternatively, you can use the <blockquote> tag to indicate that the text within this element is a quote from another author or source. This is a very important tool that shows the crawler (search bot) that certain content is not stolen and is fully compliant with copyright law. For example, on the page of the article I used as an example, there are quotes below with all the necessary references to the original sources, arranged by the <blockquote> semantic tag.

Easier parsing of pages

It is much easier for search engine bots to find blocks of meaningful code than to search through endless divs and spans.

For example, using the Chrome browser extension Xpath*, you can parse (collect) the content of all the quotes in an article by writing just the tag name instead of div chains.

Improved page accessibility

Semantic HTML elements make it easier for people with disabilities to view and understand content. For example, a visually impaired person may not be able to see a photo on your site, but software can show them the alternative text that describes what is in the photo. Alternative text is formalized using the alt attribute within the <img> tag.

While this factor does not directly affect SEO, having this functionality on your site improves the user experience.

Common mistakes when using semantic tags

Not every specialist knows how to use semantic HTML correctly in web development. It is quite rare for a programmer to logically use the entire arsenal of relevant tags when creating pages. This is because it takes a lot of time and money, so there is no point in bothering when there are a bunch of cheap CMS tools with minimal interaction with the code.

But on a basic level, you still need to know how this or that tag works. Here, I'll go through a list of the most common mistakes webmasters make when creating HTML markup.

Wrongly formatted lists

One very common mistake tends to occur when designing lists. This is when developers use a combination of <span> and <p> tags instead of the <ul> or <ol> tag. Paragraphs are added to the <div> wrapper with a <span> line tag preceded by a hyphen, as shown below.

<div>
 <p><span>- </span>item 1</p>
 <p><span>- </span>item 2</p>
 <p><span>- </span>item 3</p>
</div>

In this case, the list looks like this.

Or simply add elements to the <div> wrapper, separated by a special <br> tag that corresponds to a new line.

To avoid such mistakes, you should use the most common and well-known semantic tag <ul> for an unnumbered list and <ol> for a numbered list, within which you should place <li> tags that define the list elements.

<!--Unordered list -->
<ul>
 <li>item 1</li>
 <li>item 2</li>
 <li>item 3</li>
</ul>

<!-- Ordered list -->
<ol>
 <li>item 1</li>
 <li>item 2</li>
 <li>item 3</li>
</ol>

In this case, the list looks like this.

A properly designed list allows you to get great snippets in the SERPs that attract potential users to the site, increasing organic traffic.

Confusing the <b> tag and the <strong> tag

Both are used to make text bold. They are almost identical, but they serve different purposes. There is a very popular opinion that the <b> tag is only for external text highlighting, while the <strong> tag is used to emphasize the importance of text. 

This practice has nothing to do with the correct semantics and HTML specification that I mentioned earlier in the article. Perhaps this myth was created by the SEO industry, which tried to surpass search engine algorithms by highlighting everything with the strong element, and there were many cases where a site could have been penalized by Google for doing so.

When analyzing the HTML5 standard for the <b> tag and the <strong> tag, there is a clear difference between them.

The <b> element is intended to attract attention for practical purposes:

• Keywords in a document's notes
• Product names in a review
• Prompts in interactive text software
• The title of an article

For example:

<p>Our company has been <b>selling quality furniture</b> for 10 years</p>

The strong element is used to distinguish the most important part from the rest of the content:

• Importance
• Seriousness
• Urgency

For example, seriousness:
<p>Thank you for registering. <strong>Do not share your password with anyone!</strong></p>

So, using even such seemingly self-explanatory tags correctly will give you incredible benefits. To humans, they are just bolded text, but to search engines, they are clear signals of what to look for and what keywords to consider.

Finally, here's an example of these two tags in a little block about the IP address.

<p>
  <b>An IP address</b> —  is a unique numeric identifier used to identify devices on the Internet or any other network that uses the IP protocol. IP addresses allow devices to locate and communicate with each other.
</p>
<p>
  <strong>There are two main types of IP addresses</strong>: IPv4 (Internet Protocol version 4) and IPv6 (Internet Protocol version 6). 
</p>

Here is what we see:

An IP address is a unique numeric identifier used to identify devices on the Internet or any other network that uses the IP protocol. IP addresses allow devices to locate and communicate with each other.

There are two main types of IP addresses: IPv4 (Internet Protocol version 4) and IPv6 (Internet Protocol version 6).

Using JavaScript for links instead of the <a> tag

In some cases, developers use JavaScript code to format hyperlinks instead of the corresponding <a> semantic anchor tag.

For example, you can wrap the link text in the <button> tag and set up a "click" event in the code itself:

<button id="myLink">Go to page</button>
<script>
document.getElementById('myLink').addEventListener('click', function() {
    window.location.href = 'https://example.com';
});
</script>

It looks straightforward enough, so why is this approach NOT right? Let's find out:

1. Indexing
   Search engines may not crawl and index JavaScript links as efficiently as traditional <a> links because crawlers do not have the ability to execute the code 100%. This can result in pages linked to using JavaScript not being indexed by search engines, which can affect the visibility of your site. Sometimes, search bots have difficulty crawling alternative language versions of a website, which can cause almost half of the entire resource to be omitted from the index.
2. Analytics
   It can be more difficult to track clicks on JavaScript links because analytics tools tend to work more efficiently with traditional links. This can make it challenging to analyze user behavior on the site.
3. Cross-browser compatibility
   JavaScript links may work differently in different browsers, may not work at all in older versions of browsers, or may not work in browsers that have JavaScript disabled by default.

Empty headers

There are cases when a page has an empty heading, and these are most often second-level H2 headings. There are several reasons for this error: the developer may have simply overlooked it during markup, or it may be a bug in the automatic creation of pages from a template.

Why is it worth paying attention to such a seemingly invisible error? The reason is that H1-H3 headings are important signals for search bots to determine the topic of the page, which means that an empty H2 heading could be misleading.

Try to avoid such errors. Whenever possible, remove empty headings or fill them in if there should be a block of content in that place.

Errors with the H1 header

First, the H1 element is used only once on a page. Second, the H1 tag should open and close with a phrase that briefly describes the content of the page, such as <h1>Where to find a missing sock?</h1>.

It is a relatively common mistake to put <img> tags or even a whole paragraph <p> inside the H1 element. This is wrong, and it should be avoided.

Conclusions

1. Semantic layout is an approach to arranging HTML elements that emphasizes the logical structure and meaning of content. It uses semantic tags to convey the meaning and hierarchy of page parts.
2. Basic semantic HTML tags:

• <header> is the introductory part of the block, which includes headings, table of contents, navigation.
• <nav> is a navigation element for links to pages or internal parts of the page.
• <main> is the main content of the page, which may contain other block tags.
• <article> implies a standalone content, such as an article or comment.
• <section> is a thematic part of the content, e.g., sections of an article.
• <footer> is a footer containing information about a section or chapter.
• <aside> is a side element, for example, for advertising or additional material.
• <menu> is a menu element used for navigation or site management. It helps Google Bot identify the main menu on pages.

3. It is important to follow the logic and rules of hierarchy for proper page structure. For example, <main> and <article> are the most important elements, while <section> divides blocks into semantic parts.
4. Semantic layout has several SEO benefits:

• Helps search engines better analyze the content and structure of the page.
• Identifies important parts of the content.
• Facilitates page parsing and improves accessibility for people with disabilities.