Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Should sidebars be inside <main>?

Tags:

html

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:

  #####
 #     #
       #
    ###
    #

    #
like image 830
Sandwich Avatar asked Jan 14 '18 21:01

Sandwich


Video Answer


1 Answers

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.

like image 135
Silvio Mayolo Avatar answered Nov 15 '22 06:11

Silvio Mayolo