How can Elementor templates output semantic HTML wrappers?

Definition: A semantic HTML wrapper is an element that describes the structural role of the content inside it, such as a header, navigation area, article, section, or footer. In an Elementor template, the wrapper is chosen from the template part's HTML Tag setting.

Key facts

• Elementor's documentation says that theme parts such as the header, footer, and menu can be wrapped with HTML tags including <header>, <footer>, and <nav> (Elementor's template HTML tags documentation).
• For a header template, the documented workflow is to open the template settings, open the HTML Tag dropdown under General Settings, and choose header. The article was last updated on 21 September 2023.
• The documented choices are div, header, footer, article, section, aside, and nav.
• The HTML Standard defines header as a group of introductory or navigational aids and footer as a footer for the nearest sectioning content or the body (WHATWG HTML Standard, Sections).

How is a wrapper selected in an Elementor template?

Elementor's documented procedure starts in the template part being edited. Click the cog in the lower-left of the editor panel, open General Settings, open the HTML Tag dropdown, and choose the element that matches the template part. For a header, the article gives header as the example choice. The setting is attached to the template part, so the choice belongs in the template's structure rather than in the text of an individual widget.

The article lists these selectable tags:

<div>
<header>
<footer>
<article>
<section>
<aside>
<nav>

The list is the complete set shown by that Elementor documentation page, whose last-update notice says September 21, 2023. The page calls the tags useful for wrapping theme parts such as headers, footers, and menus.

Which tag fits a header, footer, menu, or content block?

The HTML Standard provides the structural meaning behind the choices. A header represents introductory or navigational aids. A footer belongs to its nearest ancestor sectioning content element, or to the body when there is no such ancestor. That makes header the documented match for a header template and footer the match for a site or section footer.

Use nav for a section that links to other pages or to parts of the same page. The standard says that a short group of footer links usually needs only the footer element, while nav is primarily for major navigation blocks. Use article for a complete, self-contained composition that is in principle independently distributable or reusable. Use section for a thematic grouping, typically with a heading. Use aside for content tangentially related to the surrounding content, such as a sidebar. Use div when the block is needed only for styling or scripting, because the standard describes section as unsuitable for a generic container.

Can a template use main as its wrapper?

The Elementor article's documented list does not include main. The HTML Standard defines main as the dominant contents of the document and says that a document must not have more than one main element without the hidden attribute. A page's main-content wrapper therefore has a distinct meaning from a header, navigation block, sidebar, or footer, even though main is absent from the choices listed in this Elementor article.

The current Elementor interface may differ from the 2023 documentation. The source does not document a main choice or describe the emitted markup for every template context, so the list above should be treated as the documented interface rather than a version-independent inventory.

Related terms

• Semantic HTML
• HTML heading structure
• How are semantic HTML tags assigned to Framer layers?

FAQ

Which tag should you choose for an Elementor header template?

Choose header in the template part's HTML Tag dropdown. Elementor's example specifically pairs a header being edited with the header HTML tag.

Should you use nav for every group of links?

No. The HTML Standard reserves nav for a section of navigation links and says that a short list of links in a footer usually needs only footer.

When should you choose section instead of div?

Choose section for a thematic grouping, typically with a heading. Choose div when the block is only a generic container for styling or scripting.

Sources

1. Elementor, "How to Add HTML Tags to My Templates", 21 September 2023
2. WHATWG, "HTML Standard, Sections", undated
3. WHATWG, "HTML Standard, Grouping content", undated

---

Check how a page reads to answer engines. Open the GEO score analyzer