Two Elementor pages can look identical while exposing different structures to browsers. One may be a stack of generic div containers. The other may identify its site navigation, primary content, article and supporting information with native HTML elements.
Semantic HTML gives an element meaning beyond its visual shape. It tells software what a region does, not how wide it is or which colour it uses. That meaning can support accessibility, make templates easier to maintain and give search systems cleaner page structure. It does not create an automatic ranking increase.
This guide maps the main structural elements to their actual jobs, shows valid nesting, explains when a div is the correct choice and provides an Elementor workflow for checking the rendered DOM. It extends the HTML section of our Mastering On-Page SEO Elements guide.
What semantic HTML means on a working page
HTML elements fall into two practical groups for this task:
A semantic element communicates a role or content relationship. Examples include
main,article,nav,aside,header,footerandsection.A generic element such as
divgroups content without assigning that kind of meaning.
The distinction is not “good tag versus bad tag.” A div is correct for layout, styling or scripting without a structural role. Problems arise when every container becomes section, minor links become nav, or several visible main elements appear.
Google’s SEO guide for web developers recommends semantic HTML where possible and says text intended for indexing should be accessible in the DOM. Its broader Starter Guide also warns that the web contains large amounts of invalid HTML, so Google Search cannot depend on every semantic distinction in the HTML specification. The balanced reading is clear: use accurate elements because they improve the document, not because each tag carries a fixed ranking value.
A landmark map for a WordPress article
Several native HTML elements create accessibility landmarks when used in the right context. Landmarks allow assistive-technology users to move between major page regions without reading everything in sequence.
| Page region | Suitable element | Main purpose | Repeat on one page? |
|---|---|---|---|
| Site header | header | Site identity and introductory or navigational aids | Yes in nested content, but one top-level banner is the usual page pattern |
| Primary navigation | nav | A major block of links for site or page navigation | Yes; label repeated navigation regions |
| Dominant page content | main | Content unique to the current page | Only one visible main in a standard document |
| Self-contained post | article | A composition that can stand or be reused independently | Yes |
| Thematic subsection | section | A named grouping within a document or article | Yes |
| Supporting content | aside | Tangential content that remains meaningful separately | Yes; distinguish multiple regions where needed |
| Article or site footer | footer | Authorship, related links, copyright or closing information | Yes; its scope depends on its nearest sectioning ancestor |
The W3C ARIA Authoring Practices Guide advises giving repeated landmarks unique labels. Two nav elements can represent “Primary” and “Article.” Concise labels avoid repeating a landmark type already announced by a screen reader.
Interactive visual guide
Semantic HTML for SEO
See how main, article, nav and aside describe a page—and when a plain div is correct.
Select a tag · drag to pan · pinch or wheel to zoom · double-click to fit
<main><article><section>…</section></article></main><main>…<main>duplicate dominant region</main>…</main>Sources: Google Search Central · WHATWG HTML Standard · W3C WAI Landmark Regions · Elementor container documentation.
Use main for the page’s dominant content
The main element represents the document’s dominant content. On a blog post, it normally wraps the article area while excluding the global header, navigation, sidebar and site footer.
The WHATWG HTML Standard permits only one main without the hidden attribute in a document. This restriction matters in Elementor templates. A theme may already output main, while a page builder container is also changed to main, producing nested or competing regions.
<body>
<header>Site header</header>
<nav aria-label="Primary">Site links</nav>
<main>
<article>Current blog post</article>
</main>
<footer>Site footer</footer>
</body>Before assigning main in Elementor, inspect the page source or rendered Elements panel. If the theme already wraps the content in main, keep the inner Elementor container as div or choose a more specific element based on its job.
Use article for self-contained content
An article represents a complete composition that can stand independently or be reused, such as a blog post, news story, forum entry, review or comment. The test is conceptual: would this content still make sense if it appeared in a feed, archive or another context?
A Single Post template can place the title, byline, body and article footer inside article. A related-post card can also qualify if it presents a self-contained entry. A decorative hero does not.
Articles can be nested. Comments are a common example:
<article class="post">
<header>Post title and byline</header>
<p>Post content...</p>
<section aria-labelledby="comments-title">
<h2 id="comments-title">Comments</h2>
<article class="comment">First reader comment...</article>
<article class="comment">Second reader comment...</article>
</section>
<footer>Article update and related links</footer>
</article>The outer footer belongs to the post because its nearest sectioning ancestor is the outer article. It is not the site-wide footer.
Use nav for major navigation blocks
The nav element identifies a section containing navigation links to other pages or locations within the current page. It suits the primary menu, breadcrumb navigation, pagination and a substantial table of contents.
Not every group of links needs nav. WHATWG states that nav is primarily intended for major navigation blocks. A short terms-and-privacy list in the footer can remain inside footer without an extra nav wrapper.
Pages can contain several navigation landmarks. Give each a distinct accessible label:
<nav aria-label="Primary">
<!-- main site menu -->
</nav>
<nav aria-label="Article">
<!-- table of contents links -->
</nav>Avoid identical unlabeled navigation landmarks. A screen-reader landmark list containing three entries called “Navigation” gives the user no clue which one opens the site menu, article contents or pagination.
Use aside for related but separate material
The aside element contains material tangentially related to its surrounding content. Examples include an author biography, a related-resource panel, a glossary note, advertising or a sidebar that remains understandable when separated from the article.
An aside is not a universal two-column tag. If the right-hand column contains a core step in the article, separating it as complementary content misrepresents its importance. Keep essential information within the article flow, regardless of its visual position.
An aside inside an article supports that article. A top-level aside next to main can represent a site-level complementary region. Label repeated asides as “Author”, “Related guides” or “Sponsored”.
Header and footer follow their nearest context
header is not limited to the top of the website. It represents introductory or navigational material for the page or for the section containing it. An article header can contain its title, author and publication date. A section header can introduce one chapter of a long guide.
Likewise, footer belongs to its nearest sectioning ancestor. A footer inside article can contain article-level information, while a footer directly under body applies to the page.
At the top level, header and footer commonly expose banner and content-information landmarks. W3C notes that nested versions do not create those same top-level landmarks.
Section is not a replacement for every div
section represents a thematic grouping, commonly with a heading. Chapters, tab panels and major parts of a guide can qualify. WHATWG explicitly says section is not a generic container and recommends div when an element exists only for styling or scripting.
Use this decision test:
Does the group have a distinct topic or purpose?
Would that group reasonably appear in the document outline?
Can a descriptive heading or accessible label identify it?
If the answers are no, keep a div. Grid wrappers, background layers, spacing containers, icon groups and responsive alignment wrappers rarely need sectioning semantics.
This is correct:
<section aria-labelledby="formats-title">
<h2 id="formats-title">Image formats</h2>
<div class="card-grid">
<article>WebP guide...</article>
<article>AVIF guide...</article>
</div>
</section>The section names a topic, the div controls the grid and each card is independently meaningful.
A faulty semantic structure and its repair
The following markup uses semantic-looking elements but assigns them by visual position:
<main class="site-shell">
<header class="hero">Sale banner</header>
<main class="post-content">Article...</main>
<nav class="social-icons">Share links</nav>
<section class="spacer"></section>
<aside class="checkout-step">Required payment details...</aside>
</main>Problems include two visible main elements, a promotional hero treated as the page header, a minor share-link group promoted to major navigation, an empty section, and essential checkout information marked as tangential.
A repaired version might use one outer main, a div for the banner and spacer, a labelled share group without a navigation landmark, and a normal section for the required checkout step. Semantic quality comes from accurate relationships, not the number of specialised tags.
Set semantic tags in Elementor without guessing
Elementor containers use div by default in many layouts, and that is safe for purely visual wrappers. Elementor’s container layout documentation provides an HTML Tag dropdown for choosing a suitable element. Older section and column interfaces expose a similar control under Layout, as shown in Elementor’s HTML tag instructions.
Use this implementation sequence:
Open the template responsible for the page region, not only the post body.
Identify the container’s job in plain language: dominant content, independent article, major navigation, complementary content, thematic section or visual wrapper.
Check whether the WordPress theme or parent template already supplies that element.
Choose the HTML Tag value that matches the role; retain
divfor layout-only containers.Add a concise accessible label when multiple landmarks share the same type.
Update the template and inspect several affected pages.
Do not infer semantics from an Elementor template name. A container named “Main Content” can sit inside a theme-generated main; inspect the output.
Verify the rendered DOM and accessibility landmarks
Open the published page in a private browser window and use developer tools:
Right-click the content area and select Inspect.
Search the Elements panel for
<main,<article,<nav,<aside,<header,<footerand<section.Confirm that one visible
maincontains the dominant page content.Trace each element’s ancestors to learn whether a header, footer or aside is page-level or article-level.
Check the accessibility tree or landmarks panel for names and duplicate regions.
Inspect desktop and mobile layouts because responsive duplicates may remain in the DOM.
The browser console can produce a compact list:
[...document.querySelectorAll('main,article,nav,aside,header,footer,section')]
.map((el) => ({
tag: el.tagName.toLowerCase(),
label: el.getAttribute('aria-label') || '',
hidden: el.hidden || el.offsetParent === null
}));This output finds native elements, but it does not judge whether the assigned meaning is correct. Read the content and test the landmark list with an accessibility inspector.
Semantic HTML checks for Elementor templates
Keep one visible, hierarchically correct
main.Use
articlefor self-contained posts, comments or cards, not ordinary layout blocks.Reserve
navfor major navigation and label multiple navigation regions.Use
asideonly when the content is complementary or tangential.Apply
headerandfooteraccording to their nearest content context.Use
sectionfor thematic groups that deserve a place in the document structure.Keep
divfor styling, grids, spacing and script hooks without semantic roles.Inspect the rendered DOM rather than trusting editor labels.
Check global templates and reusable components before making page-level repairs.
Retest representative URLs after changing a Theme Builder template.
Questions about semantic HTML SEO
Does semantic HTML directly improve Google rankings?
Google recommends semantic HTML where possible, but no reliable evidence supports a fixed ranking boost for changing a div to section or article. Accurate markup can help systems interpret the page and improves accessibility and maintenance. Use it as structural quality, not a ranking guarantee.
What is the difference between main and article?
main identifies the dominant content of the entire document, with one visible instance in a standard page. article identifies a self-contained composition and can repeat or nest. A blog page can therefore contain one main holding one or more articles.
Can a page contain more than one nav or aside?
Yes. A page can have several navigation or complementary regions when each has a valid purpose. Give repeated landmarks distinct labels so users can tell them apart.
Does every section need a heading?
A section should represent a thematic group and is commonly identified by a heading. If a container has no meaningful topic or label and exists only for layout, use div. Do not add empty headings to justify a section.
How do I change semantic HTML tags in Elementor?
Select the relevant container, section or column, open its Layout settings and choose the appropriate HTML Tag. Check the surrounding theme output first, retain div for visual wrappers, and inspect the published DOM after updating the template.
Let each element describe its real job
Semantic HTML works when the rendered structure matches the content model. main identifies the page’s dominant content, article contains an independent composition, nav marks major navigation, aside holds complementary material and section groups a named topic. header and footer take their meaning from context, while div remains the right tool for neutral layout.
Elementor gives editors control over these tags, which also means templates can introduce duplication or misleading landmarks. Map each region before changing it, inspect the published DOM and review accessibility landmarks after every global edit.
For connected guidance on metadata, headings, image elements and rendered HTML, return to Mastering On-Page SEO Elements: Meta Tags, HTML, and Image Optimization Explained.
