Changes on Twenty Nineteen HTML structure in WordPress 5.3

In some templates, Twenty Nineteen was using a <main> HTML element which was appearing as a direct descendant of a <section> HTML element. This resulted in markup errors on the following templates:

  • 404.php
  • archive.php
  • image.php
  • index.php
  • page.php
  • search.php
  • single.php

For reference, see HTML specifications:

A hierarchically correct main element is one whose ancestor elements are limited to html, body, div, form without an accessible name, and autonomous custom elements.

Source: HTML Living Standard

WordPress 5.3 will change that behavior by using a neutral <div> element instead of <section>.

Previous HTML rendering example:

<section id="primary" class="content-area">
    <main id="main" class="site-main">
        …
    </main>
</section>

New HTML rendering example:

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        …
    </main>
</div>

WordPress users who are using Twenty Nineteen as a parent theme are encouraged to check their child themes stylesheets are not using selectors like section#primary or section.content-area and to update them to #primary or .content-area if needed.

For reference, see the related Trac ticket: #47066

#5-3, #dev-notes