Blog

Semantic HTML and Landmarks: header, nav, main, article, section, aside, footer and search

Semantic elements turn into landmarks in the accessibility tree; but an unnamed section does not become a region, a header inside an article does not become a banner, and an h1 inside a section is still level one. In this post we move Bookstore's book detail page from div soup to a semantic structure, read every step from Chromium's accessibility tree, and settle the section/article/div decision, the search element, the single main rule and heading hierarchy without an outline algorithm.