Below, HTML for And HTML na Fields allow you to add custom code snippets around specific parts of your layout as needed.
One thing to note, however, is that the existence of these controls does not mean that everything needs a semantic label.
Once semantic HTML becomes easy to apply, the natural impulse is to use it everywhere. The problem starts when every visual grouping is labeled as a header or footer just because the option exists. Screen readers rely on a clear hierarchy to help users navigate content, and flooding the document with semantic tags that serve no real purpose makes that navigation more difficult.
Divi sites typically already have a global header, a main content area, and a global footer provided by the theme or Theme Builder templates. Because that page-level structure is usually already in place, you rarely have to recreate it in your layout.
Most sites have a generic header and footer, along with a main content area provided by the theme or Theme Builder templates. If that structure is already in place, you rarely need to recreate it in your layout.
These elements determine how the page itself is organized, so recreating them within your layout is not necessary. Overriding these elements with custom roles can change the way assistive technologies interpret the page. So it’s best to avoid this unless you have a specific reason. Divi takes care of all the page level. What matters now is the level of content.
In HTML5,
They still need to be scored correctly. A page level
Once you understand that distinction, it becomes easier to see where adding these elements actually helps.
The best time to add header or footer elements is when part of your layout behaves like its own content unit. In Divi, this usually becomes apparent when you look at how the content is structured rather than what it looks like.1. Self-contained content sections built with sections or rows
Feature breakdowns need a clear beginning and end. The same goes for documentation blocks or step-by-step instruction areas. These sections introduce a topic, discuss the details, and conclude with next steps or related actions.
In Divi you often build these using a single section or row. At the top there is a headline and a short intro. The center contains one or more content modules that explain the function or process. At the bottom you will find a call-to-action or related links that will help readers further.
If the block represents a separate topic, consider displaying the outer packaging as a
Assigning a
The header and footer here enclose the content roles, not the layout containers. The surrounding section remains generic, meaning the semantic structure lives exactly where it matters. Assistive technologies can now read the section as a complete, self-contained unit without affecting the page-level structure.
2. Loop Builder items that represent individual pieces of content
When you display twenty blog posts or a grid of case studies, each item should stand alone. Loop layouts are one of the clearest cases where semantic structure becomes really useful, because you set it once and it is automatically applied to each item.
Each loop item in Divi 5 usually represents something meaningful:
- A preview of a blog post
- A resource card
- A case study summary
- A product listing
In the builder, each loop item usually consists of several modules stacked on top of each other. Giving the loop item an internal structure turns a loose group of modules into something organized and navigable.
Use one
Use one
For many loop layouts, the cleanest approach is to display each loop item as a
Because each loop item repeats the same structure, it’s easy to visually see the pattern and confirm that the semantic labels are doing their job throughout the layout.
3. Canvases used as standalone UI panels
Canvases are located outside the main page layout. An off-canvas menu, slide-in panel, or contextual tool works as its own little interface with a clear purpose, defined controls, and a natural endpoint.
If the panel requires a clear name for assistive technologies, make sure the title is explicit and consistent (for example, ‘Menu’ or ‘Filters’) and avoid adding additional global-style landmarks within the panel.
Because an off-canvas panel behaves as a standalone UI component, its internal structure is just as important as its visual style. Adding one
These header and footer elements remain correctly positioned because the panel is its own UI component and not a replacement for the site’s header or footer. This prevents the panel’s structure from being confused with the site’s header or footer. The semantic intent matches the UI behavior perfectly, making this one of the clearest examples of when and why to use these tags.
4. Modules that are manually composed of multiple elements
When you build a content block piece by piece using multiple modules, you determine how everything fits together. A Module Group can combine a headline, supporting text and one or more actions into one function card or information panel.
Because each piece of content is its own element, you can clearly separate what introduces the block from what concludes it. Assigning a
This approach works especially well for feature maps, resource lists, or information panels where each block behaves like a small article. It also avoids the limitations of modules that manage their own internal markup.
A good rule is this: if you wouldn’t describe the content as an introduction and a conclusion, don’t use it
Header and footer elements should not be used for visual grouping or styling purposes. If the goal is to control spacing, alignment, or layout, a section, row, column, or generic wrapper is the way to go. Avoid use
Divi themes and Theme Builder templates typically provide the header, footer, and content region of the main page. Recreating or overwriting these elements in your layout is unnecessary and can lead to conflicting semantics. If an element does not clearly introduce or end a meaningful content block, it should not be marked as a header or footer.
Start building in Divi 5 today!
Divi 5 sites typically provide a basic page structure through the theme or Theme Builder templates, including a global header, a main content area, and a global footer. The ability to add semantic header and footer elements within layouts exists to support clearer content structure, and not to replace what Divi handles automatically.
When used intentionally for standalone sections, loop items, canvases, or manually constructed modules, these elements help browsers and supporting technologies understand how content is organized. If they are applied everywhere by default, they cause noise. The key is restraint. Use header and footer elements to describe the purpose and structure, not the layout.
Are you a Divi user? Find out how to get more out of Divi! 👇
Browse hundreds of modules and thousands of layouts.
Visit Marktplaats
Find out how to improve your Divi workflow 👇
Learn about the new way to manage your Divi assets.
Buy Divi Cloud
Want to speed up your Divi website? Find out how 👇
Get fast WordPress hosting optimized for Divi.
Accelerate Divi
#HTML #header #footer #elements #Divi