HTML5 Page Structure: Best Practices for SEO and Accessibility

If you edit a blog’s HTML, you may find dozens of <div> elements. Which one contains the post? Where does the navigation end, and is the newsletter box part of the article or a separate site feature?

Semantic HTML helps you make those relationships clear. You choose elements according to what the content does, then use CSS to decide how it looks. This guide shows you how to choose the elements, adapt an existing theme, and check the finished page.

The term HTML5 is still widely used, but HTML is maintained as the HTML Living Standard.

What Are HTML5 Semantic Tags?

Semantic elements describe the purpose of content. Their meaning helps developers understand a document and enables browsers and assistive technologies to expose its structure.

For example:

• <header> groups introductory content, such as branding or an article title and byline.
• <main> identifies the document’s primary content.
• <footer> groups information about a page or section, such as author details or related links.

HTML describes meaning and relationships; CSS controls presentation. For example, choosing <aside> does not automatically place a box beside the article.

Why Do Semantics Matter for SEO?

Semantic HTML gives a page meaningful structure. Its clearest benefits are navigation that assistive technologies can identify and markup that is easier to understand and maintain. It belongs in a well-built website, but changing a <div> to an <article> is not a shortcut to higher rankings.

Semantic SEO helps you decide which questions the content should answer and how related ideas connect. Semantic HTML gives that explanation an appropriate document structure. Planning useful content and choosing its elements are separate decisions.

Crawlability also needs attention. Internal links connect related pages and help readers reach a useful next answer. Give each navigation link an <a> with a real href; placing a clickable <div> inside <main> does not supply the same destination information. Check that the resulting document contains the destination URL, rather than relying only on a successful click.

Search appearance has its own requirements. A <nav> containing breadcrumbs gives readers a navigation region; it does not create BreadcrumbList structured data. That schema markup describes the breadcrumb trail in a format machines can read. Google’s breadcrumb feature requires an ordered trail with at least two entries, using names, positions, and destination URLs where required. Describe the real page hierarchy and validate the structured data separately. Eligibility does not guarantee that Google will show the feature.

Featured snippets work differently: Google’s systems select them for a search query. There is no semantic element you can add to mark a page as a featured snippet. Clear headings and answers can help visitors use the content without promising a particular search appearance.

Key Difference: Semantic vs Non-Semantic Tags

Choose an element according to the job its content performs:

Question	Element	Example
Is this the page’s primary content?	<main>	The content of a service page
Is this an independently meaningful item?	<article>	A complete post or product review
Is this a distinct topic within a larger page?	<section>	An installation section in a tutorial
Is this a major navigation block?	<nav>	The main menu or article contents
Is this supporting content that can be considered separately?	<aside>	A related background note
Does this introduce a page or content block?	<header>	A title and byline
Is this information about a page or content block?	<footer>	Author details or copyright
Is this a generic block container?	<div>	A wrapper used for a CSS grid
Is this a generic inline container?	<span>	A phrase targeted by styling or a script

There is no need to replace every <div> or <span>. Use a semantic element when its meaning fits the content.

Here is a short outline for a standalone blog post. The later complete example adds metadata, a skip link, media, and a labelled form.

<header>
  <a href="/">SEO Neurons</a>
  <nav aria-label="Primary">
    <a href="/blog/">Blog</a>
  </nav>
</header>

<main>
  <article>
    <header>
      <h1>A practical guide to semantic HTML</h1>
    </header>
    <section>
      <h2>Choose elements by purpose</h2>
      <p>Explain the first topic here.</p>
    </section>
    <footer>
      <p>Written by Ashok Sihmar</p>
    </footer>
  </article>
</main>

<footer>
  <a href="/contact-us/">Contact SEO Neurons</a>
</footer>

The article has its own header and footer inside <main>. The site header and footer remain outside the main content. Other page types can use a different arrangement.

Apply Semantic HTML to an Existing Theme

If you use Blogger or another theme-based platform, your theme already generates the document and its content wrappers. Adapt those templates rather than pasting the complete page example into a blog post. Adding a second <html>, <body>, or <main> around an entry can create invalid structure.

In Blogger, choose the blog, open Theme, then choose More → Edit HTML under My theme. Save a copy of your current theme before making changes. Edit the template that generates the wrapper, then preview the page before saving the finished change.

Work through one content region at a time:

1. Find the existing wrapper. Identify the template that outputs a complete post, including its title, byline, and body. A wrapper used only for a grid or spacing can stay a <div>.
2. Change the element when its meaning fits. Keep the classes, content, and platform template expressions intact. Change both the opening and closing tag.
3. Check the surrounding page. If the theme already provides the main content region, keep the post’s <article> inside it rather than adding another <main>.
4. Preview the affected views. Check an individual post, the blog index, and any static page sharing that template. Inspect the rendered HTML and test the layout and keyboard navigation.

For example, suppose this existing wrapper contains a complete post:

<div class="post-content">
  <!-- Existing post title, byline, and body -->
</div>

You can change that wrapper to an <article> while retaining its contents and class:

<article class="post-content">
  <!-- Existing post title, byline, and body -->
</article>

The class name is illustrative; your theme may use a different one. Check CSS and scripts that select the old tag as well as its class. If you cannot identify the wrapper, inspect the rendered page first so you know which template needs attention.

The <main> Tag in HTML5

The <main> element identifies the page’s primary content: the post, product listing, contact form, or other content the visitor came to use.

When and Why to Use <main>

• Use one <main> for a typical page. The HTML standard permits no more than one <main> without the hidden attribute. Applications that retain inactive views must manage this explicitly.
• Place it in a valid document hierarchy. A simple choice is directly inside <body> or a <div> wrapper. Do not nest it inside another <main>, <article>, <aside>, <nav>, <header>, or <footer>.
• Provide a main landmark. Assistive technologies can use it to help users reach the primary content.

<main> identifies a document region; it does not tell Google to ignore the rest of the page. Hiding an inactive application view and labelling the active page’s primary region are separate responsibilities. For an ordinary article or service page, one main content region is the useful default.

Example of <main> in Use

<body>
  <header>
    <a href="/">My Website</a>
    <nav aria-label="Primary">
      <a href="/services/">Services</a>
    </nav>
  </header>

  <main>
    <h1>Web development services</h1>
    <p>Explore our services, team, and approach.</p>
  </main>

  <aside aria-labelledby="news-title">
    <h2 id="news-title">Latest news</h2>
    <p>Company announcements and upcoming events.</p>
  </aside>

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

Here, the service content belongs in <main>. The site header, general news, and site footer sit outside it. A clear H1 heading names the service so visitors can identify the page’s main subject.

What Should Go Inside <main>?

<main> can contain articles, sections, figures, and information directly related to the page’s primary topic. An article inside it may have its own <header> and <footer>. Article-specific navigation or a supporting <aside> can also belong there.

Keep repeated site branding, global menus, and site-wide footer information outside <main>. For a sidebar, consider what the content relates to rather than where CSS positions it.

For example, a note explaining a term in the current article can sit inside <main>. A newsletter box repeated across the website usually belongs outside it. Decide from the content’s purpose, rather than moving every visually separate box outside the main region.

The <article> Tag in HTML5

Use <article> for an independently meaningful composition, such as a complete blog post, news story, forum post, product review, recipe, or job listing. Ask whether the item would make sense if it were shared separately. A heading or a card-shaped design alone does not make something an article.

Can You Use Multiple <article> Tags?

Yes. A blog index can contain several independent article summaries. In this example, the listing page has its own <h1> outside the fragment, and each linked article title uses <h2>:

<article>
  <h2><a href="/blog/on-page-seo/header-tags/">Organizing content with headings</a></h2>
  <p>Learn how heading levels express topics and subtopics.</p>
</article>

<article>
  <h2><a href="/blog/internal-linking/">Planning useful internal links</a></h2>
  <p>Help visitors find related information across your website.</p>
</article>

Use the self-contained composition test to decide whether each item belongs in an <article>.

Should You Use <article> in a Sidebar?

A sidebar can contain an article when the content is independently meaningful. The following fictional product review is an example:

<aside aria-labelledby="review-title">
  <h2 id="review-title">Example product review</h2>
  <article>
    <h3>Compact keyboard review</h3>
    <p>Sample review: The keyboard is easy to carry, but it has no number pad.</p>
  </article>
</aside>

A short collection of related links normally needs a list, not a separate <article> for each link. Use <nav> when the collection forms a meaningful navigation block, and <div> when a generic wrapper is sufficient.

The <header> Tag in HTML5

A <header> introduces the page or a surrounding content block. A site header can contain branding and navigation; an article header can contain its title, byline, and publication date. You can use both on the same page:

<header>
  <a href="/">SEO Neurons</a>
  <nav aria-label="Primary">
    <a href="/blog/">Blog</a>
  </nav>
</header>

<main>
  <article>
    <header>
      <h1>Why semantic HTML matters</h1>
      <p>By Ashok Sihmar · <time datetime="2025-06-13">13 June 2025</time></p>
    </header>
    <p>Semantic elements describe the purpose of the content they contain.</p>
  </article>
</main>

The outer header introduces the website; the inner one introduces the article. A header nested inside an article does not become an additional page-level banner landmark. Here, landmark means a region that assistive technology can use for navigation, such as the main content or site navigation. The inner header still groups the article’s introductory content.

Keep each header focused on the content it introduces. Include a heading when appropriate; a site header may instead use a linked logo and navigation. Use a <div> when you only need a styling wrapper.

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

Element	Purpose	Examples
<head>	Document metadata and resource information	Page title, character encoding, meta description, stylesheets
<header>	Introductory content within the page	Branding, navigation, an article title, a byline

The <head> contains information used by the browser and other software. Its <title> can appear in the browser tab and search results. A <header> belongs to the document body and introduces the page or a content block.

What is the <aside> Tag in HTML5?

<aside> represents content that is related to its surroundings but can be considered separately. Examples include a background note, a related-reading box, or a site-wide sidebar.

When Should You Use <aside>?

Use it for supporting material. If a warning, instruction, or summary is essential to understanding the article, keep it in the article’s main flow.

An aside can appear beside, above, or below other content. CSS determines its visual position; the element describes its relationship to the surrounding information.

Example: Blog Layout with <aside>

<main>
  <article>
    <h1>How to start a blog</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>

The tools list supports the article but can be considered separately, which makes <aside> appropriate here.

Another Common Example: Sidebar with Author Info

<aside aria-labelledby="author-heading">
  <h2 id="author-heading">About the author</h2>
  <p>Ashok Sihmar writes about technical SEO and web development.</p>
</aside>

This box provides additional author information. The article’s byline can still appear in its header or footer.

Where Can You Place <aside>?

• Inside an article: supporting information specifically related to that article.
• Inside <main> beside an article: supporting content that belongs to the current page’s primary topic.
• Outside <main>: a repeated site-wide sidebar, such as general resources or a newsletter signup.

Choose the location that reflects the content relationship, then use CSS for the layout. If several asides appear, give them useful labels so readers can distinguish their purposes.

What is the <footer> Tag?

<footer> contains information about the page or the nearest ancestor sectioning element, such as an article or section.

Where Can You Use <footer>?

• Use a page footer for site contact details, legal links, or copyright information.
• Use an article footer for the post’s author, publication details, or related resources.

A footer commonly appears after the content it describes, but it does not have to. Its meaning is determined by the document structure, not its position on the screen. A footer inside an article describes that article; the page footer supplies information about the wider page or website.

Example: Page-Level Footer

<footer>
  <p>&copy; 2026 SEO Neurons</p>
  <p><a href="mailto:contact@seoneurons.com">Contact SEO Neurons</a></p>
  <p><a href="/privacy-policy/">Privacy policy</a></p>
</footer>

A larger footer menu can use <nav>. A small set of footer links does not require it.

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 <time datetime="2025-06-13">13 June 2025</time></p>
  </footer>
</article>

What is the <nav> Tag?

<nav> identifies a major block of links to other pages or to locations within the current page. Common examples include the primary menu, breadcrumbs, and an article’s table of contents.

Why Is <nav> Useful?

It makes navigation identifiable in the document structure. Assistive technologies can expose it as a navigation landmark, helping users find or bypass groups of links. That is especially useful when someone wants to reach the content without moving through every menu item.

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 a footer when the links form a substantial navigation menu
• As a breadcrumb trail (like Home > Blog > Article)
• In the sidebar with links to popular categories or pages

Example: Primary Navigation

<nav aria-label="Primary">
  <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-us/">Contact</a></li>
  </ul>
</nav>

Example: Breadcrumb Navigation

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/blog/">Blog</a></li>
    <li><span aria-current="page">HTML5 page structure</span></li>
  </ol>
</nav>

These breadcrumbs describe the user’s location. Add BreadcrumbList structured data separately when appropriate; the navigation element does not create it.

Do All Links Need to Go in <nav>?

No. An inline source link or a short set of legal links can remain in normal content. An article’s table of contents can use <nav> because it is a navigation block within that page.

Can You Use Multiple <nav> Elements?

Yes. Distinguish navigation regions with different purposes using an accessible name. Use aria-label when there is no visible title, or aria-labelledby to refer to an existing heading:

<nav aria-labelledby="contents-heading">
  <h2 id="contents-heading">On this page</h2>
  <ol>
    <li><a href="#choosing-elements">Choosing elements</a></li>
    <li><a href="#checking-markup">Checking markup</a></li>
  </ol>
</nav>

In this example, the page must contain elements with the IDs choosing-elements and checking-markup so the links reach real destinations. The aria-labelledby value points to contents-heading, making “On this page” the navigation region’s accessible name. Each referenced ID must identify the intended element on that page. Use descriptive link text and keep repeated navigation consistent.

What is the <section> Element?

<section> groups content about a distinct topic within a document or application. It usually has a heading that explains the topic.

When Should You Use <section>?

Use it for a meaningful part of the page, such as installation instructions, service details, or contact information. A section can contain several paragraphs, examples, lists, and other relevant content.

Choose <article> when the whole composition is independently meaningful. Choose <div> when the wrapper exists only for layout or scripting. A heading and a paragraph do not automatically need an extra section wrapper.

Should Every Section Have a Heading?

A visible heading is a useful default for content sections. It is guidance rather than a rule that every possible <section> must contain one. Where a section should be exposed as a named region, associate it with a useful heading using aria-labelledby. Set that attribute to the heading’s id. Avoid creating named regions for every small block, which makes the list of regions harder to navigate.

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 contact@seoneurons.com or call +91 93509 93510.</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

• Give content sections descriptive headings where appropriate.
• Choose heading levels from the surrounding hierarchy.
• Use <div> for a generic layout or scripting wrapper.
• Use <article> when the complete composition is independently meaningful.

Other Semantic Elements You Should Know

These elements can make dates, media, contact information, and other content more explicit:

Element	Purpose and practical note
<time>	A date or time; use datetime when a machine-readable value is needed.
<details> and <summary>	A native disclosure widget and its label; useful for optional explanations.
<mark>	Content highlighted because it is relevant in the current context, such as a search match.
<address>	Contact information for the relevant article or page author/owner, rather than any postal address.
<data>	Associates text with a machine-readable value; it does not automatically create schema markup.
<output>	The result of a calculation or user action.
<abbr>	An abbreviation; explain unfamiliar terms in visible text on first use.
<cite>	The title of a cited work, such as a book or article.
<figure> and <figcaption>	Self-contained content with an optional caption, including diagrams, images, or code examples.

Choose these elements when their meaning matches the content you are marking up.

Heading Hierarchy Within Semantic HTML

For a typical standalone article, use one clear <h1> for the article title, <h2> for its main topics, and <h3> for subtopics. Choose levels according to the content relationships, and use CSS to change their appearance.

<article>
  <h1>Planning a website</h1>
  <section>
    <h2>Define the content</h2>
    <section>
      <h3>List the essential pages</h3>
      <p>Identify the pages your visitors need.</p>
    </section>
  </section>
  <section>
    <h2>Review the navigation</h2>
    <p>Check how visitors move between those pages.</p>
  </section>
</article>

For ordinary markup, wrapping a heading in <section> does not automatically choose an appropriate heading level. Set the levels deliberately. Avoid skipping a level when opening a subsection; returning from a subsection to a higher-level topic is normal. For example, an <h3> can be followed by an <h2> when the next main topic begins, while jumping from <h2> to <h4> leaves a missing level in the explanation’s hierarchy.

Logical heading levels help readers follow topics and subtopics. This is a readability and accessibility recommendation; an extra <h1> does not automatically cause a Google penalty.

Practical Accessibility Patterns

Add a Skip Link

Place a skip link before repeated navigation and point it to the main content. The following example keeps the link visible and makes the target focusable without adding it to the normal Tab sequence:

<a href="#main-content">Skip to main content</a>
<header><!-- Site branding and navigation --></header>
<main id="main-content" tabindex="-1">
  <h1>Page title</h1>
  <p>Main content starts here.</p>
</main>

Test it using Tab and Enter. Activating it should move focus to the main content, and subsequent keyboard navigation should continue from there. If you hide the link visually, it must become visible when focused. Confirm that the link’s fragment matches the target’s id; scrolling to the right place without moving keyboard focus does not complete the check.

Give Form Controls Clear Labels

<label for="contact-email">Email address</label>
<input id="contact-email" name="email" type="email" autocomplete="email">

Keep the label visible and make its for value match the input’s id. Clicking the label should focus the associated field. A placeholder can provide an example value, but should not be the only instruction identifying the field because it disappears as someone types. Use native controls such as <button> for actions and give each control a name that explains its purpose.

A labelled HTML form can also expose its action as a WebMCP tool for compatible browser agents.

HTML Foundations for Search and Browsers

Start with a Clear Document Head

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Web development services | Example Studio</title>
  <meta name="description" content="Explore Example Studio's website development services and project process.">
  <link rel="canonical" href="https://example.com/services/">
</head>
<body>
  <main><h1>Web development services</h1></main>
</body>
</html>

Replace the example title, description, language, and canonical URL with values appropriate to the real page. Keep metadata inside a valid <head> and avoid conflicting canonical declarations. The doctype enables standards mode; lang identifies the document language for software such as screen readers. Keep visible page content, including images, out of <head>: an invalid element there can cause Google to stop reading metadata that follows it.

Use Links for Navigation

<a href="/services/">Explore our services</a>

A normal anchor with an href gives users a link destination and lets crawlers follow it. A click handler on a generic element does not provide the same link semantics. Use descriptive link text and verify the destination exists.

If JavaScript adds navigation or page content, compare the response HTML with the rendered document. Check whether the resulting document contains the important text and real links, then compare it with Google’s tested output.

Image Markup and Page Performance

Describe the information an image contributes using appropriate alternative text. Use alt="" for a purely decorative image. A complex diagram may also need an explanation in the surrounding text. If an image is the only content of a link or button, its alternative should explain the destination or action. Avoid repeating an identical description already supplied by text inside that same control.

For an illustration farther down a page, markup can look like this:

<figure>
  <img src="/images/example-page-layout.webp"
       alt="An article and a related-information sidebar inside the main content area."
       width="1000" height="600"
       loading="lazy" decoding="async">
  <figcaption>One way to arrange related content on an article page.</figcaption>
</figure>

Replace the example image path and dimensions with the real asset. Accurate width and height let the browser reserve space, helping reduce Cumulative Layout Shift as images load. When you provide multiple image sizes, use srcset and sizes to help the browser choose an appropriate file.

Do not lazy-load the image that is likely to be the page’s Largest Contentful Paint element. That measurement concerns when the largest visible content element appears; delaying its image request can delay the result. Make the image discoverable early in the HTML, then evaluate whether fetchpriority="high" helps it load sooner. Check measurements before and after the change rather than applying high priority to every image.

Common Semantic HTML Mistakes

Pattern to review	Better approach
<section class="grid"> used only to arrange cards	Use <div class="grid"> when the wrapper has no thematic purpose.
A brand name at <h1> on every standalone article	In the article pattern shown here, use linked branding and make the article title the main heading.
An email field identified only by its placeholder	Add a visible label associated with the input.
Important navigation implemented as a clickable <div>	Use an <a> with an href.
Different navigation menus with indistinguishable names	Give each distinct navigation purpose a useful accessible name.
A heading level selected to obtain smaller text	Choose the level from the content hierarchy and style the text with CSS.
Every image set to loading="lazy"	Handle the main LCP image separately from images farther down the page.

Complete HTML5 Semantic Page Structure

This example shows a standalone article with site navigation, a main heading, sections, related content, an article footer, and a labelled newsletter form. Adapt the metadata, paths, image, and content for your own site. The newsletter action is an illustrative endpoint: connect it to your actual subscription handler before using the form.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 page structure | SEO Neurons</title>
  <meta name="description" content="A practical example of semantic HTML page structure and accessible navigation.">
  <link rel="canonical" href="https://seoneurons.com/blog/technical-seo/html5-best-practices/">
  <style>
    body {
      max-width: 70rem;
      margin: 0 auto;
      padding: 1rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }
    img { max-width: 100%; height: auto; }
    :focus-visible { outline: 3px solid #09665d; outline-offset: 3px; }
  </style>
</head>
<body>
  <a href="#main-content">Skip to main content</a>

  <header>
    <a href="/">SEO Neurons</a>
    <nav aria-label="Primary">
      <ul>
        <li><a href="/services/">Services</a></li>
        <li><a href="/blog/">Blog</a></li>
        <li><a href="/contact-us/">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main id="main-content" tabindex="-1">
    <article>
      <header>
        <h1>HTML5 page structure</h1>
        <p>By Ashok Sihmar</p>
        <p>Published <time datetime="2019-10-07">7 October 2019</time></p>
      </header>

      <section>
        <h2>Choose elements by purpose</h2>
        <p>Identify the primary content, independent compositions, and supporting information before choosing their elements.</p>
      </section>

      <figure>
        <img src="/blog/images/2019/10/html5-page-structure.png"
             alt="Semantic HTML supports meaningful structure, accessible navigation, and maintainable code."
             width="1000" height="611" decoding="async">
        <figcaption>How semantic HTML supports a readable document structure.</figcaption>
      </figure>

      <section>
        <h2>Make navigation understandable</h2>
        <p>Use meaningful links, logical heading levels, and clear labels for navigation regions.</p>
      </section>

      <aside aria-labelledby="related-heading">
        <h2 id="related-heading">Related reading</h2>
        <p><a href="/blog/on-page-seo/header-tags/">Structuring content with heading tags</a></p>
      </aside>

      <footer>
        <p><a href="/blog/author/ashoksihmar/">About Ashok Sihmar</a></p>
      </footer>
    </article>
  </main>

  <aside aria-labelledby="newsletter-heading">
    <h2 id="newsletter-heading">Subscribe to the newsletter</h2>
    <!-- Replace this illustrative action with your subscription handler. -->
    <form action="/newsletter/subscribe/" method="post">
      <label for="newsletter-email">Email address</label>
      <input id="newsletter-email" name="email" type="email"
             autocomplete="email" required>
      <button type="submit">Subscribe</button>
    </form>
  </aside>

  <footer>
    <address>
      <a href="mailto:contact@seoneurons.com">Contact SEO Neurons</a>
    </address>
    <p><a href="/privacy-policy/">Privacy policy</a></p>
    <p>&copy; 2026 SEO Neurons</p>
  </footer>
</body>
</html>

What This Layout Demonstrates

• A visible skip link targets the primary content.
• The site header and footer surround the main content; the article has its own header and footer inside it.
• The article title is <h1> and its sections use <h2>.
• Distinct supporting regions have descriptive labels.
• The image has text alternative and dimensions, and is not lazy-loaded in this introductory position.
• The newsletter field has a visible label, a submission name, and email autocomplete.
• The short page footer uses ordinary links without an unnecessary extra section wrapper.

This is an article-page example. A service page or application screen can use <main> and appropriately chosen content elements without requiring an <article> wrapper.

How to Check Your HTML Structure

1. Check markup: run the generated page through the Nu HTML Checker. Start with the first structural error, inspect the reported location, correct the responsible template, and check again. An unclosed or incorrectly nested element can cause several later messages. Confirm that IDs are unique and nesting is valid.
2. Inspect the rendered document: use the browser’s Elements panel to check the HTML produced by templates and scripts. Compare it with the original response if the browser appears to have repaired invalid nesting. Confirm the main content and important links are present.
3. Review headings and regions: list the heading levels and check that they describe topics and subtopics. In the browser’s accessibility inspection, confirm that the main region and different navigation or supporting regions have the intended roles and distinguishable names.
4. Test the keyboard: activate the skip link, follow navigation links, and move through form controls. Check that focus is visible and proceeds in a useful order.
5. Check text alternatives and labels: confirm that images and form controls convey the information needed to use the page.
6. Test structured data separately: if you have added markup for a supported Google search feature, run the page URL or its code in Google’s Rich Results Test. Check the detected type and any errors in required properties. This checks eligible structured data rather than the full accessibility or validity of the document, and passing does not guarantee a rich result.

When checking several pages that share a template, a website auditing tool such as SEO Neurons Spider can help you find patterns such as missing H1 headings or repeated page titles. Enable the relevant heading and metadata extraction, then inspect the affected URLs. Use browser rendering if scripts supply those elements. If the same problem appears on several pages, examine their shared template before editing each page individually. Correct the responsible markup and crawl the affected pages again. Check the actual heading order in the browser as well; H1/H2 captures alone do not establish that the complete hierarchy is appropriate.

Automated checks are useful, but they do not replace reviewing the content or trying the page with a keyboard and relevant assistive technology.

For example, if you find two visible <main> elements after editing a theme, check whether both the page template and post template create one. Keep the page’s primary region as <main> and use an appropriate inner element, such as <article>, for the complete post. Inspect the rendered page again to confirm the duplicate is gone.

Frequently Asked Questions

Will Changing an Element Affect My Theme’s Design?

It can. A class selector such as .post-content still matches an <article> with that class, but div.post-content does not. Check selectors and scripts that depend on the old tag, then preview the page at desktop and mobile widths. Preserve the intended layout while changing the element’s meaning.

Does <article> Add Article Schema?

No. Semantic elements and structured data are separate. Add appropriate structured data explicitly when it serves the page, and test it separately.

Final Words

Start with the content relationships, choose elements that describe them, and give the page a clear heading hierarchy. Then check navigation, labels, and the rendered result.

Use the complete example as a starting point and adapt it to your page. Semantic HTML supports a usable document structure; useful content, crawlable links, and appropriate metadata remain part of the wider work of SEO.