All geek questions in one place

Should the <nav> tag be outside the <main> tag?

My question is semantic HTML5.

In the case where the main navigation is not part of the design header, but is still available for the entire site, should it be embedded in the tag <main>?

The W3C specification specifies the tag <main>:

"The main content of the body of the document or application. The main content area consists of content that is directly related to or extends to the central theme of the document or the central functionality of the application."


For me, this would mean that I should put <nav>out <main>like this:

<body>

  <header>
    [...]
  </header>

  <nav>
    [...]
  </nav>

  <main>
    [...]
  </main>

  <footer>
    [...]
  </footer>

</body>


I also understand that a tag <main>can be used at the c level <header>and <footer>and effectively include everything between these two tags:

<body>

  <header>
    [...]
  </header>

  <main>
    <nav>
      [...]
    </nav>
    [...]
  </main>

  <footer>
    [...]
  </footer>

</body>


? ?

<main> , .

, , ?

, <aside>, - , <main>, .

+6
5

<main> , ( ).

, , <main>.

, , , .

, , <nav> <main> , , <main>, . , , <main>.

+16

, , , .

<main> , , <nav> , . <nav> <nav> <main>, , , , . .

, <nav> , - , - -

<header>
     <!-- header stuff -->
</header>

<div id="mainPanel"> <!--(or whatever)-->
     <nav>
          <!--your nav-->
     </nav>
     <main>
          <!--main content-->
     </main>
</div>

. , , - , , div , div .

: , , , nav header. header W3C, , - .

+8

, . , , , , . .

<html>

<head></head>

<body>
  <!-- HEADER -->
  <header>
    <div class="banner" role="banner"></div>
  </header>
  
  <!-- NAV -->
  <nav>
    <div class="brand"></div>
    <div class="menu" role="menu"></div>
  </nav>
  
  <!-- CONTENT -->
  <main>
    <section class="container"></section>
    <section class="container"></section>
    <section class="container"></section>
  </main>
  
  <!-- FOOTER -->
  <footer>
    <div class="copyright"></div>
  </footer>
  
</body>

</html>
Hide result
0
<nav> should be declared in this format:\

<header>
<nav>....</nav>
</header>
<main>
<nav>....</nav>

</main>

<footer>....</footer>
-1

nav 

<body>
<header>
<nav>
  [...]
</nav>
[...]
</header>
<main>
[...]
</main>
<footer>
[...]
</footer>
</body>
-2

Source: https://habr.com/ru/post/1532759/

More articles:


All Articles