HTML5 Semantics Implementation for the Best SEO Practices.

HTML5 was 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.

In this guide, we’ll walk through:

What Are HTML5 Semantic Tags?

Semantic tags are HTML elements that clearly describe their meaning both to the browser and the developer. They give structure to your content, making it easier for:

Search engines to crawl and understand your page
Assistive technologies like screen readers to interpret the content
Other developers to maintain and update your code

For example:

<header> tells browsers: “This is the top of the page or section.”
<main> indicates: “Here’s the primary content of the page.”
<footer> wraps up with: “Here’s the closing section, maybe with credits or links.”

These tags don’t look any different in the browser than a <div>, but they carry meaning that machines can understand. That’s the real power of semantics.

Why Do Semantics Matter for SEO?

Search engines are smarter than ever—but they still rely on structured signals to interpret content. Using semantic tags helps in several ways:

Improved crawlability – Tags like <article>, <main>, and <section> help bots understand which parts of your content are central.
Rich snippets potential – Structured content can lead to rich results like featured snippets or breadcrumbs in search.
Accessibility boost – Screen readers use semantic tags to guide users, improving your website’s inclusivity.
Cleaner markup – Semantic tags reduce the overuse of generic <div>s, leading to clearer, more maintainable code.

Key Difference: Semantic vs Non-Semantic Tags

Let’s compare the two types of tags side by side:

Semantic Tag	Meaning	Common Use
`<header>`	Defines a page or section header	Site logo, navigation, page titles
`<main>`	Denotes the central content block	Articles, blog posts, product details
`<article>`	Self-contained content	Blog posts, news articles, user reviews
`<section>`	Thematic grouping of content	FAQ, services, testimonials
`<footer>`	Bottom area of page/section	Copyright, links, author info

Now compare that to non-semantic tags:

Non-Semantic Tag	Issue
`<div>`	Doesn’t convey meaning to browser or screen reader
`<span>`	Inline, but purely for styling – not structure

Using semantic tags not only helps bots and browsers—but also humans. Code becomes easier to read and edit later on.

Here’s an overview of the HTML5 page structure will be presented 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>

You can use the tags below to make your webpage search engine friendly. We highlight each tag with its structure, and at the end, we finalize the structure that one should follow. We have divided each section element into parts to clarify how to use these HTML5 Tags.

This is a detailed 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.

The `<main>` Tag in HTML5

The <main> element is one of the most important semantic tags introduced in HTML5. It represents the primary content area of a web page — the part that is unique and directly related to the central topic or functionality of that specific page.

This is the section users come to see when they visit your page, whether it’s a blog post, a product listing, a contact form, or a portfolio.

When and Why to Use `<main>`

Use <main> once per page.
It should appear only once in your HTML and should not be nested inside <header>, <footer>, <article>, <aside>, or <nav>.
The idea is to clearly define which part of the page holds the core content.
Ideal for screen readers and accessibility.
Screen readers can skip over headers, sidebars, and footers, jumping directly to the main content using this tag. This improves the experience for users who rely on assistive technology.
Helps with SEO and content structure.
Search engines use the <main> element to focus on indexing the most important part of your page. That can improve relevance and keyword targeting.

Example of <main> in Use

Here’s how you might use the <main> tag in a simple layout:

<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <!-- Navigation links -->
    </nav>
  </header>

  <main>
    <h2>Welcome to Our Homepage</h2>
    <p>This is where we highlight our services, team, and mission.</p>
  </main>

  <aside>
    <h3>Latest News</h3>
    <p>Upcoming events and updates.</p>
  </aside>

  <footer>
    <p>&copy; 2025 My Company</p>
  </footer>
</body>

In this example:

The header contains the logo and navigation.
The <main> tag wraps the unique content for that page.
The <aside> adds extra information not essential to the page’s main focus.
The footer contains the copyright.

What Should Go Inside `<main>`?

You can include other semantic elements inside <main>, like:

<article> for blog posts or independent content pieces
<section> for organizing related groups of content
<figure> and <figcaption> for media and illustrations

But remember: the <main> itself should not include the navigation, headers, footers, or sidebars — those belong elsewhere.

When Not to Use `<main>`

Avoid using <main> on pages that don’t have meaningful content — like a simple redirect page or a blank placeholder. Also, don’t use it more than once per page; that would defeat its purpose and reduce semantic clarity.

The <main> tag is essential for writing clean, well-structured, and accessible HTML. It tells both users and search engines: “This is the most important part of the page.”

By consistently using <main> to wrap your central content, you’re helping:

Search engines understand your site better
Screen readers navigate your pages efficiently
Yourself and your team keep code cleaner and easier to maintain

The `<article>` Tag in HTML5

In simple terms, the <article> tag is used in HTML5 to mark independent pieces of content. Think of an article like a self-contained block of information that makes sense on its own—even if it’s removed from the rest of the page.

It could be a:

Blog post
News article
Forum post
Product review
Recipe
Job listing

Each of these has a clear beginning and end, and readers can understand them without needing extra context.

When Should You Use the `<article>` Tag?

You should use the <article> tag when the content is:

Complete by itself
Meant to be shared or reused independently
Able to appear in places like RSS feeds, search engine results, or emails

Example: Let’s say you’re building a blog. Each blog post should go inside an tag because it’s a full story and can be shared on its own.

<article>
  <h2>Top 5 Digital Marketing Trends in 2025</h2>
  <p>Digital marketing is changing fast. Here are the trends to watch...</p>
</article>

This is a classic use case—one article, one topic, full content.

Can You Use Multiple `<article>` Tags?

Yes, absolutely. You can use multiple <article> tags on a single page, especially when showing a list of independent items.

For example, on a blog homepage or a news listing page, each post or news snippet should be inside its own <article> tag.

<article>
  <h2>New SEO Guidelines for 2025</h2>
  <p>Google just released its updated SEO playbook...</p>
</article>

<article>
  <h2>How to Build a Website That Converts</h2>
  <p>Your website isn’t just about looks—it should guide users...</p>
</article>

Each block stands on its own and can be clicked to read more.

Should You Use `<article>` in a Sidebar?

It depends on the content. If the sidebar includes independent, complete pieces of information, then yes, you can use <article> there too.

When to use it in a sidebar:

Recent posts list with a short summary
User testimonials that include a full quote
Promotional blocks with a heading, short paragraph, and link

<aside>
  <article>
    <h3>Customer Story</h3>
    <p>"After hiring SEO Neurons, our traffic doubled in 3 months!"</p>
  </article>
</aside>

But if the sidebar just has links, small widgets, or ads—not full stories—then you should not use <article>. In that case, plain <div>, <nav>, or <aside> will be more appropriate.

When to Use the `<article>` Tag?

Situation	Should You Use `<article>`?	Why?
Full blog post or news story	✅ Yes	It’s independent and self-contained
List of multiple posts	✅ Yes	Each one is a complete item
Product review	✅ Yes	Can be shared or republished
Sidebar with detailed content (e.g., testimonials)	✅ Yes	Content makes sense on its own
Sidebar with links or widgets only	❌ No	Not independent content

By using the <article> tag correctly, you help search engines, screen readers, and browsers better understand your website’s structure. It also improves your site’s accessibility and search visibility—without needing any fancy technical tricks.

The `<header>` Tag in HTML5?

The <header> tag is used to define introductory content or a group of navigational links. Think of it like the front cover or the opening section of a newspaper article—it gives a quick idea of what the content is about.

But here’s the important part: the <header> tag isn’t just for the top of a webpage. You can use it more than once on the same page!

Where Can You Use the `<header>` Tag?

There are two common places where <header> is used:

1. Page Header (Site-wide)

This is the main header at the top of the page. It often includes things like:

Website logo or title
Tagline or mission statement
Navigation menu

<header>
  <h1>SEO Neurons</h1>
  <p>Digital Growth. Real Results.</p>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/services">Services</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

This tells visitors (and search engines) what your website is about and how to get around.

2. Section or Article Header (Within content blocks)

The <header> tag can also be used inside an <article> or <section> to introduce that specific block of content.

For example:

<article>
  <header>
    <h2>How to Rank Higher on Google</h2>
    <p>Updated on June 2025 · By Ashok Sihmar</p>
  </header>
  <p>SEO is all about relevance, trust, and content quality...</p>
</article>

Here, the <header> is used to show the title and metadata of the article.

What’s the Difference Between `<header>` and `<head>`?

This is a common confusion.

Tag	Purpose
`<head>`	Contains meta information about the document like title, keywords, and scripts (not visible on the page)
`<header>`	Contains visible content like headings, navigation, or introductions

So remember:
🔹 <head> is for search engines and browsers.
🔹 <header> is for your visitors.

Can You Use Multiple `<header>` Tags?

Yes, and you should—but only when it makes sense.

Use:

One main <header> at the top of your page (site branding and menu)
Additional <header> tags inside individual <article>, <section>, or even <aside> tags to introduce content

Avoid:

Using <header> as a generic container for anything
Placing unrelated items in the <header> tag

Best Practices for Using `<header>`

Always include at least one heading tag (<h1>, <h2>, etc.) inside a <header>
Keep it relevant to the content that follows
Don’t overload it with too many elements (focus on what introduces the content)

Example: Blog Page Structure

<header>
  <h1>Welcome to SEO Neurons Blog</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <header>
      <h2>Why Semantic HTML Matters for SEO</h2>
      <p>Posted on June 13, 2025 by Ashok Sihmar</p>
    </header>
    <p>Search engines use semantic tags to understand content better...</p>
  </article>
</main>

Here, the first <header> is the site-level header, and the second one is specific to the article.

By using <header> tags correctly, you’re not only making your website easier to read for humans—but also clearer for search engines. This improves your page structure, accessibility, and SEO.

What is the `<aside>` Tag in HTML5?

The <aside> tag is used for content that is related to the main content, but not part of the main story.

Think of it like a sidebar in a newspaper or magazine. It has extra information that helps the reader, but if you removed it, the main article would still make sense.

When Should You Use the `<aside>` Tag?

You should use <aside> when you have supporting or related content that sits next to or around your main content.

Here are a few examples of when you can use it:

A sidebar with links to related blog posts
A box with author info next to a blog article
Ads or promotions shown on the side
Call-out boxes like tips, reminders, or summaries

So, if something is helpful, relevant, but not essential, it’s a good fit for <aside>.

Example: Blog Layout with <aside>

<main>
  <article>
    <h1>How to Start a Blog in 2025</h1>
    <p>Starting a blog is easier than ever. First, pick a topic you're passionate about...</p>
  </article>

  <aside>
    <h2>Popular Blogging Tools</h2>
    <ul>
      <li>WordPress</li>
      <li>Medium</li>
      <li>Ghost</li>
    </ul>
  </aside>
</main>

In this example, the <article> is the main content. The <aside> has related info (popular blogging tools), but it’s not part of the actual guide on how to start a blog. It’s extra help.

Another Common Example: Sidebar with Author Info

<aside>
  <h2>About the Author</h2>
  <p>Ashok Sihmar is an SEO consultant with over 10 years of experience helping businesses grow online.</p>
</aside>

This kind of aside is commonly used on blogs to show details about the writer. It’s helpful, but not part of the blog content.

Where Can You Place `<aside>`?

You can place <aside>:

Inside <main> – to show related info near an article
Outside <main> – for site-wide sidebars, like a list of categories, recent posts, or newsletter signup

It depends on whether the extra content relates to just one article or the whole page.

Important Notes

Don’t use <aside> for unrelated or random content
Don’t use it for main content—only use it for extra material
It helps with both layout and search engine understanding (good for SEO)

What is the `<footer>` Tag?

The <footer> tag is used to define the bottom section of a webpage or a section of content. Just like the footer of a document or a newspaper page, it holds closing or summary information.

This tag is very helpful for both users and search engines to understand where the content ends and what kind of useful links or info might come after the main content.

Where Can You Use the `<footer>` Tag?

There are two main places you can use it:

At the bottom of the entire page – for things like copyright info, contact details, privacy policy links, etc.
Inside an article, section, or even a sidebar – to wrap up or summarize a single piece of content (like showing related posts or social sharing buttons).

Common Things You Put in a `<footer>`

Here’s what usually goes inside a footer:

Copyright information
Contact details (like an email or phone number)
Site navigation links (like Home, About Us, Contact)
Social media links
Terms of service and privacy policy links
Author information (in case of blog posts)

Example: Page-Level Footer

<footer>
  <p>&copy; 2025 SEO Neurons. All rights reserved.</p>
  <p>Contact us: info@seoneurons.com</p>
  <nav>
    <a href="/privacy-policy">Privacy Policy</a> |
    <a href="/terms">Terms of Service</a>
  </nav>
</footer>

This is a typical site footer. It stays the same across all pages on a website and helps visitors find basic legal and contact info.

Example: Footer Inside an Article

<article>
  <h1>How to Improve Your Page Speed</h1>
  <p>Optimizing images, reducing server response time, and minifying CSS are just a few ways...</p>

  <footer>
    <p>Written by Ashok Sihmar</p>
    <p>Published on June 13, 2025</p>
  </footer>
</article>

In this example, the footer gives extra information specific to that article.

When NOT to Use `<footer>`

Don’t use it for navigation bars that go at the top of the page
Don’t put the main content of your article or product details inside it
Don’t use it just for styling purposes—it should have closing or supportive content

In short, the <footer> tag wraps up your content—whether it’s the entire page or just a section of it. It’s where you put important information that helps the user once they’ve reached the end of something.

What is the `<nav>` Tag?

The <nav> tag is used to define navigation links on a web page. These are the links that help users move around your website—like menus, tables of contents, or breadcrumbs.

In simple words, <nav> tells the browser, “Hey, this part of the page helps users navigate through the site.”

Why is the `<nav>` Tag Important?

It improves user experience by organizing links in a meaningful way.
Helps search engines identify key areas of your site structure (important for SEO).
Makes your website more accessible to screen readers and assistive tools.

Where is `<nav>` Commonly Used?

You can use it in various parts of your site, such as:

At the top of the page as the main menu
In the footer to link to other sections (like About, Contact, Privacy Policy)
As a breadcrumb trail (like Home > Blog > Article)
In the sidebar with links to popular categories or pages

Example: Basic Website Navigation

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about-us">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

This creates a simple navigation menu with links to four important pages. Wrapping it in <nav> helps search engines and screen readers understand that these are navigation items.

Another Example: Breadcrumb Navigation

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li>How to Use HTML5 Semantic Tags</li>
  </ol>
</nav>

This version shows where a visitor is on your site. It’s especially helpful for user experience and improves SEO structure.

Do All Links Need to Go in `<nav>`?

No. Only links that help users navigate your site belong in a <nav> tag.

For example:

Links inside your article (like “Read more” or “source links”) should NOT go in a <nav> tag.
Links in the main menu, footer menus, or sidebar menus should go inside <nav>.

Can You Use Multiple `<nav>` Tags on a Page?

Yes, absolutely. A page can have more than one <nav> tag.

Example layout:

<header>
  <nav> <!-- Main top menu --> </nav>
</header>

<main>
  <article>
    <!-- article content -->
  </article>
</main>

<aside>
  <nav> <!-- Sidebar category links --> </nav>
</aside>

<footer>
  <nav> <!-- Footer quick links --> </nav>
</footer>

Each <nav> serves a different purpose, but all are related to navigating the site.

Use clear, descriptive link text like “About Us” instead of just “Click Here”.
Keep navigation consistent across pages (same layout, same links).
Use unordered lists (<ul>) inside <nav> to organize the links clearly.
Use aria-label for better accessibility when you have more than one <nav> tag.

Use <nav> to make your site easier to explore for both visitors and search engines. It’s one of the most essential semantic tags in HTML5 for layout and SEO.

What is the `<section>` Element?

The <section> tag in HTML5 is used to define a separate section of related content on a web page. Think of it like a chapter in a book — each section is about a specific topic and has a clear heading.

You use the <section> tag when you want to group content that shares a common theme or purpose, and that grouping could stand on its own.

Why Use the `<section>` Tag?

Using <section> makes your content better organized and easier for:

Visitors to follow the structure of your content
Search engines to understand what each part of your page is about

When to Use `<section>`

Use <section> when:

You are dividing a page into logical parts, like “About Us,” “Services,” and “Contact.”
You are writing a long article and want to split it into topics or steps.
You want to wrap a set of content with its own heading and keep it separate from the rest.

When NOT to Use `<section>`

Avoid using <section> just to style something or to wrap a single heading or paragraph. If it’s just for layout, consider using a <div> instead.

Also, if you’re writing a blog post or a news article, it’s better to use <article> instead of <section> for the whole content.

Structure and Requirements

Inside a <section>, there should be a heading — usually a <h2>, <h3>, etc., depending on your content structure. A <section> without a heading often doesn’t make sense semantically.

Example: Sections on a Home Page

<section>
  <h2>Our Services</h2>
  <p>We offer SEO, PPC, Social Media Management, and Website Design.</p>
</section>

<section>
  <h2>About Us</h2>
  <p>SEO Neurons is a digital agency focused on helping businesses grow online.</p>
</section>

<section>
  <h2>Contact</h2>
  <p>Email us at info@seoneurons.com or call +91 9205427600.</p>
</section>

Each section has its own heading and content. This makes it easier to read and navigate, both for users and search engines.

Example Inside an <article> or <main>

<main>
  <article>
    <header>
      <h1>How to Get Started with Digital Marketing</h1>
    </header>

    <section>
      <h2>Step 1: Understand Your Audience</h2>
      <p>Knowing who you are targeting is the first step to success...</p>
    </section>

    <section>
      <h2>Step 2: Choose the Right Platforms</h2>
      <p>Each marketing channel works differently. Select the one that fits your goals...</p>
    </section>

    <footer>
      <p>Written by Ashok Sihmar, June 13, 2025</p>
    </footer>
  </article>
</main>

Here, each <section> represents a specific step or part of the article topic.

Best Practices

Always include a heading (<h2> to <h6>) inside a section.
Don’t use <section> just for design — that’s what <div> is for.
Use <section> when the content can stand alone as a meaningful block.

The <section> tag is used to organize your content into meaningful blocks. It gives structure to your page, helps search engines understand the purpose of each part, and improves user experience by making the content more readable and accessible.

Other HTML5 Semantic Tags You Should Know

While we’ve already covered the most commonly used semantic tags like <article>, <header>, <section>, and <nav>, there are several other HTML5 tags that serve specific purposes. They might not appear on every page, but when used appropriately, they improve clarity, accessibility, and the overall quality of your code.

Tag	Purpose / Use Case
`<time>`	Represents a date or time. Useful for blog timestamps, events, and schedules.
`<summary>`	A clickable label for the `<details>` tag that shows/hides additional content.
`<details>`	Creates a collapsible area for extra content (like FAQs or notes).
`<mark>`	Highlights specific words or phrases, similar to a yellow highlighter.
`<address>`	Provides contact or author information, often shown in the page or footer.
`<data>`	Binds a machine-readable value to a human-readable one (useful in structured data).
`<output>`	Displays calculation results, usually updated via JavaScript.
`<abbr>`	Shows abbreviations with full forms (e.g., HTML shows as “HyperText Markup Language”).
`<cite>`	Refers to the name of a work, such as a book, article, or film.
`<figure>`	Wraps self-contained media like images, charts, or diagrams.
`<figcaption>`	Describes the media inside a `<figure>`. Often used to caption images.

These tags may look small, but they serve big roles in helping both users and search engines better understand your content.

By using them appropriately, you’re not just writing HTML — you’re writing smart, accessible, and SEO-friendly HTML. As a rule of thumb, if there’s a semantic tag for a particular use case, go with that instead of a generic <div>.

Complete HTML5 Semantic Page Structure

Below is a full-page HTML5 layout using semantic elements. Think of this as a template or base structure you can use for any blog post, article, or business website.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Learn HTML5 semantic structure for better SEO and accessibility" />
  <title>HTML5 Semantic Tags Example</title>
  <style>
    /* Basic styling for structure - optional */
    body { font-family: Arial, sans-serif; line-height: 1.6; }
    header, nav, main, article, section, aside, footer {
      padding: 1rem;
      margin: 1rem 0;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>

  <!-- Website Header -->
  <header>
    <h1>My Web Page</h1>
    <!-- Navigation inside header -->
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about.html">About</a></li>
        <li><a href="/blog.html">Blog</a></li>
        <li><a href="/contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main Content Area -->
  <main>

    <!-- Article Section -->
    <article>
      <header>
        <h2>Understanding HTML5 Semantics</h2>
        <p>Published on <time datetime="2025-06-13">June 13, 2025</time></p>
      </header>

      <!-- First Section of the Article -->
      <section>
        <h3>Why Use Semantic Tags?</h3>
        <p>Semantic tags help browsers and search engines understand the purpose of content. They also improve accessibility for screen readers.</p>
      </section>

      <!-- Image with caption -->
      <figure>
        <img src="semantics.png" alt="Diagram of HTML5 semantic structure" />
        <figcaption>HTML5 Semantic Tag Layout</figcaption>
      </figure>

      <!-- Another Section -->
      <section>
        <h3>How They Help SEO</h3>
        <p>Tags like <code>&lt;main&gt;</code>, <code>&lt;article&gt;</code>, and <code>&lt;section&gt;</code> make it easier for search engines to understand page structure, which can lead to better rankings.</p>
      </section>

      <!-- Sidebar Content Inside Article (Optional) -->
      <aside>
        <h4>Related Read</h4>
        <p><a href="/html-seo-best-practices.html">HTML SEO Best Practices</a></p>
      </aside>

      <!-- Footer of the Article -->
      <footer>
        <p>Written by Ashok Sihmar</p>
      </footer>
    </article>
  </main>

  <!-- Global Sidebar (outside main) -->
  <aside>
    <h3>Subscribe to Newsletter</h3>
    <form>
      <input type="email" placeholder="Your email" />
      <button type="submit">Subscribe</button>
    </form>
  </aside>

  <!-- Website Footer -->
  <footer>
    <section>
      <h4>Contact Info</h4>
      <address>
        SEO Neurons<br />
        252, Ward 6, Barwala, Hisar, Haryana 125121<br />
        Email: <a href="mailto:hello@seoneurons.com">hello@seoneurons.com</a>
      </address>
    </section>
    <section>
      <p>&copy; 2025 SEO Neurons. All rights reserved.</p>
    </section>
  </footer>

</body>
</html>

What This Layout Demonstrates:

<header>: Used for the website’s top section and for the article’s intro too.
<nav>: Navigation menu is inside header and scoped properly.
<main>: The central content area of the page — only one per page.
<article>: Wraps the main blog/article content.
<section>: Used to break down the article into logical chunks.
<figure> and <figcaption>: For media and description.
<aside>: Used twice — once for related content and once for the newsletter sidebar.
<footer>: Used for both article-specific and global footer content.
<time>, <address>: Lesser-used but useful semantic tags are also included.

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

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

Semantic HTML5 tags make your code more meaningful, search engine-friendly, and accessible. They help browsers, screen readers, and Google understand what each part of your page is supposed to do.

In this part, we covered the core semantic tags like <article>, <header>, <aside>, <footer>, <section>, <figure>, <figcaption>, and <nav> in detail. We also took a quick look at other helpful tags like <time> and <mark>.

In the next part, we’ll put all of these tags into action and build a complete HTML5 page layout that follows SEO and accessibility best practices.

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

Ashok SihmarLast Updated: June 13, 2025

8 25 minutes read

8 Comments

Yung Kirm says:
June 12, 2021 at 1:37 pm

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!
aRockets says:
August 22, 2021 at 2:34 am

Great to know! thanks a lot, will follow your recomendations
Get Seo Website says:
September 21, 2021 at 12:03 pm

This type of coding will help me to make a website. Thanks for the discussion with the image.
Gaius says:
April 26, 2022 at 5:54 am

I can’t figure out a way to add it to my html
Noman Rana says:
July 29, 2022 at 10:21 am

Please help me open my account recovery my all personal Data please my mobile phone isnechinh I can yau very be halp me
1. mahrukh Imran says:
  January 22, 2024 at 10:58 pm
  
  Good evening brother I want to know about these codes how can I put in my blogger websites I want to set SEO of my website I am non professional which one code I put in my website to correct on page seo
Noble says:
November 21, 2022 at 10:50 am

I don’t understand, this obviously can not be applied in blogger or am i wrong
Santosh Jadagoudar says:
July 26, 2024 at 6:28 pm

This is technical seo for html5 specs. Good article.

What Are HTML5 Semantic Tags?

Why Do Semantics Matter for SEO?

Key Difference: Semantic vs Non-Semantic Tags

The <main> Tag in HTML5

When and Why to Use <main>

What Should Go Inside <main>?

When Not to Use <main>

The <article> Tag in HTML5

When Should You Use the <article> Tag?

Can You Use Multiple <article> Tags?

Should You Use <article> in a Sidebar?

When to Use the <article> Tag?

The <header> Tag in HTML5?

Where Can You Use the <header> Tag?

1. Page Header (Site-wide)

2. Section or Article Header (Within content blocks)

What’s the Difference Between <header> and <head>?

Can You Use Multiple <header> Tags?

Best Practices for Using <header>

Example: Blog Page Structure

What is the <aside> Tag in HTML5?

When Should You Use the <aside> Tag?

Where Can You Place <aside>?

Important Notes

What is the <footer> Tag?

Where Can You Use the <footer> Tag?

Common Things You Put in a <footer>

When NOT to Use <footer>

What is the <nav> Tag?

Why is the <nav> Tag Important?

Where is <nav> Commonly Used?

Do All Links Need to Go in <nav>?

Can You Use Multiple <nav> Tags on a Page?

What is the <section> Element?

Why Use the <section> Tag?

When to Use <section>

When NOT to Use <section>

Structure and Requirements

Other HTML5 Semantic Tags You Should Know

Complete HTML5 Semantic Page Structure

What This Layout Demonstrates:

Final Words

Ashok Sihmar

8 Comments

Leave a Reply Cancel reply

The `<main>` Tag in HTML5

When and Why to Use `<main>`

What Should Go Inside `<main>`?

When Not to Use `<main>`

The `<article>` Tag in HTML5

When Should You Use the `<article>` Tag?

Can You Use Multiple `<article>` Tags?

Should You Use `<article>` in a Sidebar?

When to Use the `<article>` Tag?

The `<header>` Tag in HTML5?

Where Can You Use the `<header>` Tag?

What’s the Difference Between `<header>` and `<head>`?

Can You Use Multiple `<header>` Tags?

Best Practices for Using `<header>`

What is the `<aside>` Tag in HTML5?

When Should You Use the `<aside>` Tag?

Where Can You Place `<aside>`?

What is the `<footer>` Tag?

Where Can You Use the `<footer>` Tag?

Common Things You Put in a `<footer>`

When NOT to Use `<footer>`

What is the `<nav>` Tag?

Why is the `<nav>` Tag Important?

Where is `<nav>` Commonly Used?

Do All Links Need to Go in `<nav>`?

Can You Use Multiple `<nav>` Tags on a Page?

What is the `<section>` Element?

Why Use the `<section>` Tag?

When to Use `<section>`

When NOT to Use `<section>`