Semantic HTML Elements

Semantic HTML helps assistive technologies, browsers and other tools understand the structure of a page. YOOtheme Pro gives you full control over the markup of your layouts, so content is organized into meaningful landmarks and sections instead of generic containers.

YOOtheme Pro uses <header> and <footer> elements to define the site-wide header and footer, and the <main> element to identify the main content of each page. Menus and pagination are wrapped in <nav> elements, making navigation areas easier to recognize for assistive technologies.

In the page builder, sections, rows, columns, elements and their items can use semantic elements like <section>, <article>, <aside>, <header>, <footer>, <nav> and so on. The semantic HTML structure of the page layout is visually shown with icons in the page builder.

Heading elements can also be selected independently of their visual style. For example, a heading can look like an H4 while still being marked up as an H1, helping you maintain a clear document structure and correct heading hierarchy.

This creates a stronger foundation for accessible, well-structured and WCAG-compliant websites.