Semantic layout
Semantic layout
Introduction
Use semantic HTML elements over non-semantic elements for layouts, such as<header>
instead of<div id="header">
.
HTML5 introduced
-
<main>represents the main content of the body of a document or app. -
<header>represents a group of introductory or navigational aids. -
<footer>represents a footer for a section and can contain information about the author, copyright information, etc. -
<nav>represents a section of the document intended for navigation.
When it goes wrong
When semantic HTML elements for layout aren't used, the page has no structure or definition available to assistive technologies.
These layout elements provide navigation landmarks, which assistive technologies can navigate over to find the area they want on the page. These elements also section content into their defined elements.