blogginghtml5SEOWordPress

HTML5 Best Practices structure for an SEO friendly Page

Understand 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 version of HTML, we can use only some semantic on a webpage but HTML5 provides us more freedom to define our webpage. It also helps in generating traffic by SEO and also because of its User Interface.

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

New Essential Semantic Elements introduced in HTML5 and discussed in this article. We’ll discuss all tags with examples of that.

  • <header>
  • <main>
  • <article>
  • <figure>
  • <figcaption>
  • <aside>
  • <footer>
  • <mark>
  • <nav>
  • <section>

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>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Your Page title here</title>
    <meta name="description" content="description of Your page" />
    <!--Open Graph Elements of Your Page-->
</head>

<body>
    <header> Put your nav, logo elements here </header>
    <main>
        <article> 
<header>
<h1>heading of the content</h1>
</header>
your article here 
<footer>
you can place footer in the article section, for comment etc
</footer>
</article>
    </main>
    <aside> Sidebar here or, Put your content related to article </aside>
    <footer>footer details here </footer>
</body>

</html>

1. <main> use and instruction, very important tag of HTML page structure.

Understanding <main> tag: The <main> tag notify the search engine that the main content of the page. The <main> tag contains the content or article that 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 content start here -->
<main>
    <article>
        <header>
        <!-- main heading of the content, containing keywords for SEO -->
        <h1>Content heading of the page</h1>
        </header>
        <section>
            <!-- subheading h2 must be followed by heading tag h1 -->
<h2 class="subheading"></h2>
<!-- image of the article, must be added with alt tag/text -->
<figure>
    <img src="" alt="" class="class">
        <figcaption></figcaption>
</figure>
<p>
<!-- your article goes here -->
</p>
<!-- if h3 needed you can add that too here. -->
        </section>
</main>
<!-- main content end here -->
<!-- sidebar start here -->
<aside>
<!-- sidebar widget etc here -->
</aside>
<!-- sidebar end here -->
<!-- footer start here -->
<footer>
<!-- footer widget etc here -->
</footer>
<!-- footer end here -->

2. Use of <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 as of now for Search Engine Optimisation. You are suggested to use only one article tag. Inside article tag you can use <header> and <footer> tags too. Example:-

<article>
    <section>
        <header>
            <h1>Article main heading here</h1>
        </header>
    </section>
    <section>
        <h2>Sub Heading here</h2>
        <p>Hi, How are you</p>
    </section>
    <section>
        <p>Hi, How are you</p>
    </section>
    <footer>
        <section>
            Comment, Social widget, related posts
        </section>
    </footer>
</article>

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

3. Use of <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> but we recommend you to use only one <header> tag that also under <main><article> tag.

<article>
    <header>
        <h1>main heading of the article</h1>
        <!-- sub-heading h2 can be in header section or just after this -->
        <h2>sub heading of defining article .</h2>
        <p>article description here</p>
    </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>

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

<article>
    <header>
        <!-- heading of the document goes here -->
        <h1>main heading of the article</h1>
        <!-- sub-heading goes here -->
        <h2>sub heading of defining article .</h2>
        <p>article description here</p>
    </header>
    <aside>
        <h3>Post You may Like</h3>
        <p>related article link here</p>
    </aside>
    <p>Complete article here</p>
</article>

Overview of the content will be similar to:

<main>
    <article>
    </article>
</main>
<!--for sidebar-->
<aside>
<!--Sidebar Content here-->
</aside>

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

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

6. <section> element tag, uses and best practice

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

<section>
    <header>
        <nav></nav>
    </header>
</section>
<section>
    <main>
            <section>
        <article>
            <section>
                <header></header>
            </section>
            <section>
                <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>

And Also

<section>
    <header>
        <nav></nav>
    </header>
</section>
<section>
    <main>
            <section>
        <article>
            <section>
                <header></header>
            </section>
            <section>
                <p></p>
            </section>
        </article>
            </section>
    </main>
</section>
<section>
    <aside>
        <section>

        </section>
        <section>
            
        </section>
    </aside>
</section>
<footer>
    <section>
            
    </section>
</footer>

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

7. <figure> and <figcaption> HTML5 semantics

<figure> element contain the media of the content. Figure element can be defined using a subtag <figcaption> that is a 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>

8. <mark> and <nav>

<mark> tag can be used to highlight text inside the article.

and <nav> the tag contains navigation links to the page. Please keep this mind that <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.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <header>
        <nav>
            navigation elements here
        </nav>
    </header>
    <main>
        <article>
            <header>
                <h1>main heading of the document</h1>
            </header>
            <aside>related content here</aside>
            <figure>
                <img src="/picture.svg" alt="alternate text" class="test">
                <figcaption>about the image here</figcaption>
            </figure>
            <section>your article goes here</section>
            <footer>comment section and share buttons</footer>
        </article>
    </main>
    <aside>
        <section>
sidebar here
        </section>
    </aside>
    <footer>
        <section>
footer detailes, credits, copyright, contact info.
        </section>
    </footer>
</body>
</html>

or it can also be as

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <header>
        <nav>
            navigation elements here
        </nav>
    </header>
    <main>
        <article>
            <header>
                <h1>main heading of the document</h1>
                <h2>sub heading of the document</h2>
            </header>
            <!-- if you want to ad some related content, you can using aside example below. -->
            <section>
            <aside>related content here</aside>
            </section>
            <figure>
                <img src="/picture.svg" alt="alternate text" class="test">
                <figcaption>about the image here</figcaption>
            </figure>
            <section>your article goes here</section>
        </article>
    </main>
    <aside>
        <section>
sidebar here
        </section>
    </aside>
    <footer>
        <section>
footer detailes, credits, copyright, contact info.
        </section>
    </footer>
</body>
</html>

So the layout best practices of a 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.

You can keep yourself up to date with HTML5 using the official website for HTML5 tags

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

Leave a Reply

Back to top button