SEO

HTML5 Page Structure best practice for SEO of website

HTML5 released in 2014. Since then, many browsers have supported HTML5 used in websites. HTML5 helps the search engine understand the content of a website or blog with the help of semantic tags. This article will discuss the latest best practices for HTML5 page structure with a detailed explanation of every important semantic tag.

What should be the best practices of HTML5 semantics tags for SEO-friendly page structure?

HTML5 helps the search engine to analyze and understand page structure and its content. That will leads to better on-page SEO of that webpage.

Earlier in the previous HTML version, there were only a few for the webpage, but HTML5 provides us more freedom to define our webpage. These semantic tags are helpful for search engines to analyze the complete content of the webpage.

Let’s understand how: Suppose you created a blog post, and in between the blogpost, you posted related content links. If you use plain HTML, Google has to analyze and process the related content to understand the website structure, like where is the header, footer, main content, etc. But with the help of HTML5 semantic, we can declare all content parts using HTML5 tags so that the search engine can understand and process the content.

HTML5 page structure Best Practice for SEO
HTML5 page structure SEO best practices

New essential semantic elements were introduced in HTML5 and discussed in this article. We’ll discuss all tags with examples of that.

You can use these tags as given below to make your webpage search engine friendly. Please note that we highlight each tag with its structure, and at last, we finalize the final structure that one should follow. We divided each section element in part to make it clear how to use these HTML5 tags.

This is an overview, the final version of the HTML5 page structure will be at the end of this article.

<!DOCTYPE html>  <!-- This line declare the document is in HTML5  -->
 <html lang="en">  <!--You can declare language of the html document  -->
<head> <!-- Head tag open -->
    <!-- Meta tags of the document -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <meta name="description" content="Hello World, This is example">
    <!-- Source element of the website -->
    <style>
        /* add style for all tags */
        a, abbr, address,  area { text-align: center;}
    </style>
</head> <!-- Head tag close -->
<!-- body Tag start, contain body items -->
<body>
    <!-- Main navigation in the header section, you can use header tag can directly use nav tag -->
    <header>
        <nav>Navigational Item here like menu.</nav>
    </header>
    <!-- main item of the page will start with main tag, this tag doesn't include aside or sidebar elements. -->
    <main>
        <!-- article tag gives signal to search engine about the main article. -->
        <article>
            <header>
                <h1>Heading of the content</h1>
            </header>
            <h2>Add a subheading</h2>
            <!-- Add media, content etc -->
        </article>
    </main>
    <!-- aside will start just after main element, this tag use for sidebar elements. -->
    <aside>
        sidebar element goes here
    </aside>
    <!-- after aside tag, use footer tags to define footer items in a page. -->
    <footer>
        footer section of the website
    </footer>
</body>
</html>

This is an overview of HTML5 tags but let’s understand each and every tag with examples. So that you can imply the best practice of HTML5 tags in your website and enhance website SEO.

<main> use and instruction, significant tag of HTML page structure.

Understanding <main> tag: The <main> tag notify the search engine of the main content of the page. The <main> tag contains the content or article that is to be rank in the search engine.

Please keep in mind that <main> tag can’t be a child of <header>, <nav> <article>, <aside> or <footer> tag. If you do, then this would be the wrong practice.

Example of the <main> tag

<main>
    <article>
        <header>
        <!-- main heading of the content, containing keywords for SEO -->
        <h1>Content heading of the page</h1>
        </header>
            <!-- subheading h2 must be followed by heading tag h1 -->
<h2 class="subheading">Add subheading of the content</h2>
<!-- image of the article, must be added with alt tag/text -->
<figure>
    <img src="/image-url.jpg" alt="alternative text to load" class="class">
        <figcaption>Image caption</figcaption>
</figure>
<p>
<!-- your article goes here -->
</p>
<!-- if h3 needed you can add that too here. -->
</article>
</main>

<article> tag in HTML5 for best Practices

<article> tag can be used to specify the main article of the document. If you use the <article> tag under the <main>tag, then it will make more sense for Search Engine to Optimize your webpage.

You can also use <article> the tag in <aside> tag under a snippet of sidebar articles, but it is not recommended for Search Engine Optimisation. You are suggested to use only one article tag. Inside the article tag, you can use <header> and <footer> tags too. Example:-

	<article>
			<header>
				<h1>Article main heading here</h1>
			</header>
			<h2>Sub Heading here</h2>
			<!-- you can also add image, and other media, sub heading etc. -->
			<p>Hi, How are you</p>
			<p>Hi, How are you</p>
		<footer>
				Comment section, Social widget, related posts
		</footer>
	</article>

If you want to understand how to use h1, h2, h3, and h4 heading tags, You can read our h1, h2, and h3 Tags, Latest Approach for SEO Friendly Article.

<header> tag in a post, how to use for SEO HTML5 Page structure

<header> tag can be used in a post to highlight data that means it tells the search engine about the main heading of the document. You can use more than one <header> tag, but we recommend you to use only one <header> tag that also under <main><article> tag.

We can use a heading tag under the <body> section and before the <main> section of the page to include heading elements of the website like logo, navigation element, etc.

<body>
<header>
        <nav>Contain Navigation Element</nav>
</header>
<main>
<main>
<article>
    <header>
        <h1>main heading of the article</h1>
       <article>
	<header>
		<nav>Contain Navigation like breadcrumb </nav>
        <h1>main heading of the article</h1>
        <!-- sub-heading h2 can be in header section or just after this -->
    </header>
    <!-- you can place h2 here instead of header section -->
    <figure>
        <img src="" alt="" class="class">
            <figcaption></figcaption>
    </figure>
    <p>Complete article here</p>
</article>
</main>

<aside> tag for the sidebar – its use and benefit as per SEO.

<aside> can be used under <article> for related content and outside <article> if used as a sidebar. i.e. sidebar links to other web page articles but may or may not related to on-page content.

Overview of the content will be similar to:

<main>
    <article>
    </article>
</main>
<!--for sidebar-->
<aside>
<!--Sidebar Content here-->
Sidebar widget can be recent post, email subscription form,
ads, etc.
</aside>
<footer>
</footer>

This is how we can use aside elements in the <article> tag

<article>
		<header>
			<!-- heading of the document goes here -->
			<h1>main heading of the article</h1>
			<!-- sub-heading goes here -->

		</header>
			<h2>sub heading of defining article .</h2>
			<p>article description here</p>
		<figure>
			<img src="/image.jpg" alt="alternative image text" class="class">
				<figcaption>caption for image</figcaption>
		</figure>
		<p>Complete article here</p>
		<!-- The aside tag declared here -->
		<aside>
			<h3>Post You may Like</h3>
			<p>related article link here</p>
		</aside>
		<p>Complete article here</p>
		<footer>
			You can contain comment section, you may like post section etc.
		</footer>
	</article>

Use of aside element as the sidebar

<footer> tag contains the footer section of a webpage. It usually contains copyright, about the author, sitemap, contact info, etc.

	</aside>
	<footer>
				<div>Article by: Siddharth Singh</div>
				<div>Contact information: 
					<a href="mailto:someone@example.com">someone@example.com</a>.
				</div>
		Right: 2017-2020; All Rights Reserved
	</footer>
</body>

<section> element tag, uses and best practice

<section>tag can be used to display the block section of the webpage. section element may contain <header>, <footer> and also <section> element itself.

In <section> tag, there should be at least 1 heading. It can be h2, h3, h4, etc. If you place <header> tag under <section> then, there should at least 1 heading tag.

The h1 heading tag is the main heading and can’t appear under the section tag. And the section block needs at least one heading from h2-h6.

    <header>
        <nav></nav>
    </header>
    <main>
        <article>
                <header></header>
     <sub heading>
                <p></p>
            </section>
        </article>
            </section>
    </main>
    <aside>
        <section>
            <!-- you can add sidebar widget 1 here -->
        </section>
        <section>
            <!-- you can add sidebar widget 2 here -->
        </section>
    </aside>
    <footer>
        <section>
            <!-- you can add footer widget here -->
        </section>
    </footer>
</section>

All Semantics discussed above are very important in terms of SEO. Now let’s discuss some other semantics

<figure> and <figcaption> HTML5 semantics

<figure> element contains the media of the content. The figure element can be defined using a subtag <figcaption> caption of a picture inserted in the article.

<article>
    <header>
       <h1> main heading of the article</h1>
    </header>
<h2>Sub heading of the article</h2>
<figure>
    <img src="/picture" alt="text to display if image not load" class="test">
    <figcaption>About the image</figcaption>
</figure>
</article>

<mark> and <nav>

<mark> tag can be used to highlight text inside the article. And the <nav> tag contains navigation links to the page. Please keep this mind that the <nav> element doesn’t contain external elements i.e. links to other websites, social links, etc.

The final best practices of HTML5 page structure would be similar.

The final version of HTML5 semantic tags will look similar, as shown below.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<meta name="description" content="description for the content">
	<style>
		/* CSS code for the tags used on the webpage */
	</style>
</head>
<body>
    <header>
        <nav>
            navigation elements here
        </nav>
    </header>
    <main>
        <article>
            <header>
              <nav> add breadcrumb path</nav>
                <h1>main heading of the document</h1>
            </header>
            <!-- if you want to ad some related content, you can using aside example below. -->
    <h2>sub heading of the document</h2>
            <figure>
                <img src="/picture.svg" alt="alternate text" class="test">
                <figcaption>about the image here</figcaption>
            </figure>
your content will appear here here
<mark> To highlight a line or paragraph</mark>
        </article>
    </main>
    <aside>
sidebar here
    </aside>
    <footer>
footer details, credits, copyright, contact info.
    </footer>
</body>
</html>

So the layout best practices of an HTML5 page structure will be.

HTML5 Representation layout
HTML5 Representation layout

By making these changes, we can increase our Organic web page result, gain CTR., and enhance the user experience. In addition, you can keep yourself up to date with HTML5 using the official website for HTML5 tags.

Final Words

I hope you liked our article on HTML5 semantic tags. Implement these tags in your website or blog, and you’ll see steady growth in your website’s traffic. You can also implement schema markup tags to the WordPress website or Blogger blog for snippet results.

In case of any doubt, feedback or query, feel free to ask in the comment section provided below.

Ashok Kumar

Ashok Kumar working in the Search Engine Optimization field since 2015. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on seoneurons.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.

Related Articles

3 Comments

  1. Hey I bookmarked this page long ago. and implemented all the tags on my website. Results are amazing. You rock., Thank You for making every section easy to understand. Thank You again!

Leave a Reply

Your email address will not be published. Required fields are marked *