In Divi 5, you can change the element type of any module and use semantic tags like nav, section, header, article, footer, and button to give your content inherent meaning.
This helps accessibility and SEO because screen readers and bots can better understand your page structure and what each element does.
You can also add custom HTML before and after any element using the new HTML option group. This lets you create custom wrappers and inject code into places that a Code module cannot reach.
What are semantic elements, and why do they matter
In HTML, tags are not just visual containers. They describe what the content is:
pis a paragraphais a linkbuttonis an interactive controlheader,section,article, andfooterdescribe the structure of the page
These semantic elements give structure and meaning to your HTML:
Screen readers can identify where the main content starts and ends.
They can tell where one block of content stops and another begins.
They know which elements are clickable or interactive.
When you use semantic elements correctly, your site becomes easier to navigate with assistive technologies and easier for search engines to understand.
Change the element type of any module
Divi 5 lets you change the HTML element type of any module. That means you can:
Turn a module into a section, article, header, or footer element.
Turn a clickable element into a proper button element.
Turn a custom navigation layout into a nav element.
You do this in the module's settings:
Open the module settings.
Go to the Advanced tab.
Find the new HTML option group.
Use the Element Type dropdown to pick the tag you want.
Once you choose a tag, Divi 5 outputs that element with the new semantic type on the front end, while your design and layout stay the same visually.
Build anything with proper tags
Divi 5 gives you a very flexible building system: infinitely nested elements, custom interactions, and off-canvas layouts. You are not limited to the default "Button" or "Menu" modules.
You can:
Build a button from an icon and a text module.
Build your own navigation using text modules, icons, and off-canvas mega menus.
Build a one-page site with all content on a single page.
With Semantics elements, you can assign proper semantic tags to those custom builds:
Turn your custom icon-based button into a real "button" element.
Turn your custom navigation row into a "nav" element.
Group main content into "section", "article", and "footer" elements on a one-page site when you are not using Theme Builder templates.
This lets you keep all your creative layouts while still following good HTML structure practices.
Example: Build a custom menu and mark it as nav
A simple pattern you can follow:
Use Divi 5 to build your own menu layout using text modules, icons, and off-canvas canvases.
Wrap these menu modules inside a container (for example, a row or section).
Open the settings for that container element.
In the Advanced tab, open the HTML option group.
Set the Element Type to nav.
Now screen readers and bots know that this block is a navigation area, even though you built it from standard modules.
Example: Structure a one-page site semantically
If you are building a one-page site and not using Theme Builder templates, you can still provide a clear structure:
Wrap your hero and logo area in an element set to header.
Wrap each main content block in elements set to section or article.
Wrap your final block with contact info and links in an element set to the footer.
You get all the design flexibility of Divi 5, but with a clean structural outline under the hood.
Custom HTML wrappers around any element
The new HTML option group also includes two powerful fields:
HTML Before Element
HTML After Element
These work like two built-in Code modules attached directly to the element.
You can:
Inject HTML before the element.
Inject HTML after the element.
This makes it possible to:
Wrap elements in custom markup.
Add additional wrapper elements around modules.
Inject code into parts of the page that a normal Code module cannot reach because Divi elements are separated.
Why custom wrappers are useful
Because Divi modules are separate blocks, a Code module cannot always wrap other modules in custom HTML. With custom HTML wrappers in the HTML option group, you can now:
Add a custom parent "div" or other element around a module.
Add helper markup required by third-party scripts.
Inject tags or data attributes before or after the module's main HTML.
This gives you finer control over the output while still working inside the Visual Builder.
Practical ideas for semantic elements and custom wrappers
Here are a few concrete ways to use semantic elements and custom HTML wrappers in Divi 5:
Mark your custom navigation container as "nav" so assistive tech knows it is a menu.
Turn interactive icon/text combos into real "button" elements to make them more accessible.
Wrap main content blocks in "section" or "article" to make the page structure more transparent.
Use "header" and "footer" element types to outline top and bottom areas on single-page layouts.
Add custom HTML wrappers to integrate special scripts or markup around specific modules.
By combining semantic element types and custom HTML wrappers, you keep full control over Divi 5's visual layouts while producing clean, meaningful HTML that works better for accessibility, SEO, and advanced integrations.