I am excited to introduce Semantic Elements & Custom HTML Wrappers for Divi 5.
Now, you can change the element type of any module and utilize semantic tags like nav, section, header, and button to give inherent meaning to each. It’s important for accessibility and SEO, as it enables screen readers and bots to understand a page’s structure. You can build your own menu using Divi elements and then change the semantic tag to ‘nav’ to inform screen readers of its purpose.
We also added the ability to add custom HTML before and after any element, giving you more freedom to create custom wrappers and inject code into specific areas of the page that a code module can’t access.
Check out the following video to see the new feature in action. 👇
Semantic Elements
You may be familiar with various HTML tags, such as div and span. Each tag has a specific purpose; the a tag is for creating links, the p tag is for holding a paragraph of text, and so on.
HTML5 introduced new tags, including many semantic structural tags such as section, article, header, and footer. Placing content inside these tags gives inherent meaning to your HTML, which means screen readers can identify where your page content begins and where one block of content starts and ends. Furthermore, elements like buttons let screen readers know that something is clickable.
With Divi 5, you can build anything, with infinitely nested elements, custom interactions, and more. You can create a button from an icon, or even develop your own navigation using text modules and off-canvas custom mega menus.
Now, you can build those custom elements using proper semantic tags; turn the icon into a button, and turn your custom menu into a nav. If you are building a one-page website and not using the Theme Builder, you can group content into semantic sections, such as header, article, and footer, among others.
Every element comes with a new HTML option group in the advanced tab of the settings panels. Select your desired tag from the Element Type menu.
Custom HTML Wrappers
Within the new HTML option group, you’ll also find two new code settings for injecting HTML before and after any element.
It works like two built-in code modules, allowing you to add code directly to an element, which isn’t possible with the code module due to how Divi elements are separated.
Try Divi 5 Today
Semantic Elements and Custom HTML Wrappers are now available for Divi 5. Give them a try and let us know your thoughts.
We rebuilt Divi from the ground up and packed it full of dozens of your most requested features. Forget everything you thought you knew about Divi, because Divi 5 is an entirely different beast.
Have You Tried Canvases For Divi 5?
In case you missed it, we recently released Canvases for Divi 5.
A canvas is a workspace detached from your main post content. You can use them as staging areas for design updates, a place to store and organize off-canvas components, or simply as a safe space to experiment with new ideas. You can create global canvases to build website-level off-canvas menus and popups, as well as local canvases for specific posts.
Watch this video for all the details. 👇
More Divi 5 Updates Are On The Way
2025 is the year of Divi 5. The tedious work is behind us. We built the super-fast foundation, and now it’s time for Divi to make its comeback.
If you’re here for the Divi comeback, do us a huge favor and let us know by liking this video and leaving a comment. It means a lot to us to see you cheering Divi on, and it’s essential to feed the algorithm and spread the word.
Don’t forget to follow us on YouTube and subscribe to the Divi newsletter so you never miss an update. I’ll see you soon for another Divi 5 feature announcement, which I promise will be right around the corner. 😁
a closer step to accessibility in Divi 5, thank you!!
Interesting addition. You might consider adding ul/ol and li and perhaps a very basic div element on which these can be applied. We need to have access to such elements to layout loops in the correct manner. The basic div element also opens up more layout possibilities for other structures.
Dare I say it, moving to a pure HTML/CSS experience is more in line with the way I work now as per what we are seeing with Etch, but I guess we are looking at two differs audiences.
I will test out and feedback.
Ok, I see ul and li have been added since the video. Also, shouldn’t new section now be automatically set to section?
On the section question: no, section is not a generic container, it must fulfill some requirements, such as represent a group of content and have an accessible name via heading. Sections we use in the page builder are just for layout, it has a presentation objective, not a accessible one. Section is just a name the devs used for a wrapper basically, it could have been anything else… elementor uses containers for example.
Hope this clarifies, cheers!
In most layout situations a section is a full width element and usualy has an inner container (sometimes refered to as inner) and this dtermines the content width of the site. This is generally how it would be treated in Bricks and Etch for example. The section module in Divi has up until now been a plain div with a class applied to set it with section properties.
Being able to swtich this to a proper (or or or ) is a good start, but for most use case in layouts we generally start with , hence the reason for my suggestion to just make this the default. In relation to the container, the row module stands in for our content width container, but in terms of basic layout, without the nesting inhernt in many of Divi’s modules, a plain div would suffice for some of us for that inner container serving as the content width. From there just flex or grid the content within.
For me at this stage its academic wether Divi updates to allow for such workflows or not as new builds are currently done in Bricks. I comment here only because I would lke others to have the benefit of having good work environments no matter what tool they use and there are still some sites made with Divi that I maintain for clients.
You can choose the default tag for any element. Just update your default section preset.
A good option
Applying the A element doesn’t include the HREF attribute so these items are still not accessible to keyboard-only and assistive technology users.
You can add href=”” as a Custom Attribute on the Module level. To do this, go to Settings > Advanced > Attributes. That will add the href attribute to your newly changed a element tag.
where is the best way to put “role: main” to complete landmark (accessibility)?
– on top section of the page by adding an attribute, but it must be on every page
– only once in the global body, but it will mistake: blank page
– or by adding it to the snippet plugin, please share a code
In Divi 5, you can set any container or module with the element tag.
But, the element should be used only once per HTML document. Strongly consider both where starts, and where is closed.
Also, for Theme Builder templates, note that role=”main” is already inserted for the body. The role is a valid semantic landmark, so you don’t need to also add
This means you will likely be manually setting either or role=”main” only on your static pages designed in Divi.