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.