I'm unsure about the <main>
element's relation to a site's sidebar, and would appreciate some guidance, or at least communal majority consensus. ;) Given the following page elements:
<body>
<header>Logo and stuff</header>
<nav>Main Nav</nav>
...
<footer>Copyright blah</footer>
</body>
How should the <main>
element and a sidebar element be arranged, if replacing the ...
?
Option 1:
<main>
<article>...</article>
<div class='sidebar'>Sidebar</div>
</main>
Option 2:
<main>
<article>...</article>
</main>
<div class='sidebar'>Sidebar</div>
Option 3:
#####
# #
#
###
#
#
From MDN: (emphasis mine)
The content of a
<main>
element should be unique to the document or section the element contains. Content that is repeated across a set of documents or document sections such as sidebars, navigation links, copyright information, site logos, and search forms should not be included unless the search form is the main function of the page.
So Option 2 would seem to be the idiomatic choice.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With