✅ <main> and <nav> HTML tags in v4 container elements missing

[alexanderpankart]

Describe the Problem

My usual website structure for sites is:

// <header>
// <nav> **This is missing**
// </nav>
// </header>

// <main> **This is missing**
// <article>
// <section>
// </section>
// </article>
// </main>

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

Propose a Solution

Please add <main> and <nav> HTML tags :)

Additional Context

The <main> and <nav> HTML tags are crucial for Search Engine Optimization (SEO) primarily because they enhance a website's semantic structure and accessibility. The <main> tag explicitly identifies the primary, unique content of the document, allowing search engine crawlers (like Googlebot) to instantly distinguish the most important content from boilerplate elements (like headers, sidebars, and footers). This clarity helps search engines understand the page's main topic and correctly index it, which is vital for relevance ranking. Simultaneously, the <nav> tag clearly delineates the navigation links, providing crawlers with a structured and reliable map of the website's architecture. A clear <nav> improves site discoverability, helps with link equity distribution across important pages, and contributes to a better user experience (UX), which Google considers a ranking factor.

Agreement

• I confirm I have read and followed all the guidelines and instructions outlined in the Feature Request form.
• I agree that my discussion may be closed without further action if it doesn't meet all the requirements outlined in the Feature Request form.

[nicholaszein]

Hi @alexander-pankart!

Thank you for sharing your feedback, and apologies for the delay! 🙏

We may consider including these tags in these widgets in a future release, but please note:

The <main> tag as well as the <nav> tag should be located in their respective elements. For the <main> tag you should be using the Document/Page Settings and applying this tag there (the same for Headers, Footers). As for the <nav> it should be part of a Menu element, wrapping around a proper navigation, not as part of the entire header.

Whike we understand there are use cases for what you are requesting, make sure not to apply duplicates and nest these tags repeatedly. Elementor already applies the appropriate tags to documents such as the <main>. Nesting this tag consecutively would generate non-semantically html.

That being said, we will discuss this internally. We appreciate you submitting this idea.

Kind regards

[alexanderpankart]

Thank you for your response. Where can i set .main on a regular page in page settings?

On single page templates yes, but as far as i know not on a regular "page"?

[alexanderpankart]

There is no <main> tag on my website on regular pages without template, so

Elementor already applies the appropriate tags to documents such as the <main>

is not correct.

Would love and need (accessibility) to set <main> to the outer container manually on the V4 flexbox container.

[nicholaszein]

Hey @alexanderpankart!

We have great news! 🙌

📢 We're happy to announce that this feature was released with Elementor 4.3.0! 🥳

✅ Feel free to check it out and update your plugin to the new version!

Check the changelog for more information:
Changelog of Elementor and Elementor Pro

Cheers 🥂