SEO-freindly Codes with HTML5 Elements(section/article/main)

To tell you the truth, you can make an SEO-friendly website using HTML5 elements such as <header>, <footer>, <main>, <article>, <section>, <aside>, etc.

In this article, I’m going to explain how HTML5 elements work for SEO and why.

Here is the preview:

A little bit about myself: I’ve been working as a web developer and in web marketing for more than 10 years.

I’ve always cared about how to write SEO-friendly code, and it has worked really well for my client’s websites.

Let’s dive in.

What is HTML5?

Many new syntactic features are included. To natively include and handle multimedia and graphical content, the new <video>, <audio> and <canvas> elements were added, and support for scalable vector graphics (SVG) content and MathML for mathematical formulas. To enrich the semantic content of documents, new page structure elements such as <main>, <section>, <article>, <header>, <footer>, <aside>, <nav>, and <figure> are added. New attributes are introduced, some elements and attributes have been removed, and others such as <a>, <cite>, and <menu> have been changed, redefined, or standardized.
Ref: HTML5 – Wikipedia

The biggest change in HTML5 is that you can use the <video> and <audio> tags to embed video and audio files.

The benefit of using HTML5 elements: You can organize the code without using <div>.

Let’s check the code below;

Without HTML5 elements

<div class="header">
	<h1>title</h1>
	<form>Search</form>
	<div class="nav">
		<ul>Site navigation</ul>
	</div><!-- /nav -->
</div><!-- /header -->

<div class="main">
	<div>
		<h1>Article Title</h1>
		<p>Summary</p>
	</div>
</div><!-- /main -->

<div="sidebar">
	<div>
		<h2>Blogroll...</h2>
	</div>
</div><!-- /sidebar -->

<div="footer">
	<h2>Footer</h2>
</div><!-- /footer -->

with HTML5 elements

<header>
	<h1>title</h1>
	<form>Search</form>
	<nav>
		<ul>Site navigation</ul>
	</nav>
</header>

<section>
	<article>
		<h1>Article Title</h1>
		<p>Summary</p>
	</article>
</section>

<aside>
	<section>
		<h2>Blogroll...</h2>
	</section>
</aside>

<footer>
	<h2>Footer</h2>
</footer>

Result

As you can see in the code above, the source code looks much more organized.

Before HTML5, we used to have a lot of </div> tags, which made us feel confused and disorganized.

The reason HTML5 makes websites SEO-friendly is that Google bots can easily understand the structure of the code.

For example, let’s think about the sidebar content.

Generally, the text in sidebars is shown on every page and seems to cause a duplicate content issue.

However, by using the <aside> tag for the sidebar layout, Google will understand that the text in the sidebar is not the main content and will avoid the duplicate content issue.

The <main> and <article> tags serve a similar purpose.

They help Google understand what the main content is and how to prioritize it in search engines.

Tips for Using <main>, <article>, <section>, <aside>

When I was studying HTML5 elements, it was a bit confusing to know how to use <main>, <article>, and <section>, while it was easy to understand when to use <header>, <nav>, <aside>, and <footer> tags.

In fact, I checked many other websites and still didn’t find the right pattern because not all websites have the correct implementation.

The Definition and Usage of <main>

• The <main> tag is for the main content on the page.
• Use only one <main> tag per page.
• The <main> tag cannot be inside <article>, <aside>, <footer>, <header>, or <nav> tags.

Ref HTML <main> Tag – W3Schools.com

The Definition and Usage of <article>

• The <article> tag specifies independent, self-contained content.
• It is generally used for forum posts, blog posts, news stories, comments, etc.

Ref HTML <article> Tag – W3Schools.com

The Definition and Usage of <section>

• <section> indicates that the content inside is grouped.
• The <section> tag is not a generic container. Do not use it for layout purposes.
• Generally, it contains heading tags (H1, H2, etc.).

参考 HTML <section> Tag – W3Schools.com

HTML element structure from the Most SEO-friendly WordPress Theme “Stinger”

Thanks for reading.

I hope you learned something today.