How to code SEO-freindly Websites with HTML5 Elements(section/article/main)?

To tell you the truth, you can make a SEO friendly webiste using HMTL 5 element 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 previe;

A little bit about myself, I’ve been woring as a web developer and web marketing for 6 years.

I’ve always cared about how to write SEO-friendly code and it worked really well with 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 HTML 5 is that you can use <video> and <audio> tag to embed the video and audio file.

The benefit to use HTML5 elements: You can organize the code without using <div>

Let’s check on 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 organized.

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

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

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

Generally, the texts in side-bar are shown on every page and seem to cause a duplicate content issue.

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

<main> and <article> tags would make the same role here.

They let Google understand what is the main content and how to prioritize in Search Engines.

The tips to use main, article, section, aside

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

In fact, I checked on a lot of other websites and still didn’t get the right pattern because not all the websites have the right answer.

The Definition and Usage of <main>

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

Ref HTML <main> Tag – W3Schools.com

The Definition and Usage of <article>

• The <article> tag specifies independent, self-contained content
• Generally it’s used for Forum post, Blog post, News story, Comment etc

Ref HTML <article> Tag – W3Schools.com

The Definition and Usage of <section>

• <section> means that the content inside is grouped
• The <section> tag is not a generic container. Do not use it for layout purpose.
• Generally have 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.