HTML5大纲的问题 - 部分和区分页眉/页脚

Question

我正确地看HTML5标签的第一次真正的，并想出这个页面结构（一个博客网站）：

<header> 
    <nav> 
     <ul> 
      <li>list 1</li> 
      <li>list 2</li> 
     </ul> 
    </nav> 
</header> 
<main> 
    <h1>Main page heading</h1> 
    <article><h1>Post 1</h1></article> 
    <article><h1>Post 2</h1></article> 
    <div id=“sidebar”> 
     <aside><h1>Aside heading</h1></aside> 
    </div> 
</main> 
<footer> 
    <aside><h1>Footer widget heading</h1></aside> 
    <aside><h1>Footer widget heading</h1></aside> 
</footer> 

当我运行这通过HTML大纲工具https://gsnedders.html5.org/outliner/我得到这个：

1. Main page heading 
    1. Untitled Section 
    2. Post 1 
    3. Post 2 
    4. Aside heading 
    5. Footer widget heading 
    6. Footer widget heading 

不正是我本来以为应该概括。

Q1。不知道为什么我在那里得到'无标题部分'。玩耍表明这实际上与<nav>有关。我应该担心'无题组'吗？就我而言，导航并不需要标题...

Q2。很明显，我的页面结构并没有真正达到预期的效果。我想将<header>和<footer>与<main>页面内容区分开来。我知道这些标签不是分段元素，但是如果不是，那么它们的用途是什么，特别是在<header>和<footer>的情况下？我的理解是，<main>应该用在过去可能使用过<div id="main">或<div id="wrapper">的地方，并且应该表示页面的主要区域，这正是它正在做的。

我没有使用<section>标签的原因是因为我明白，他们不应该被用作样式包装，更多的是'页面章节'。这个页面没有任何章节（唯一的自包含的东西已经与<article>和<aside>区分了），所以我不明白为什么我应该使用<section>。

我也尝试使用<h1>标签<header>和<footer>这似乎解决我的问题。

<header> 
    <h1>Site title</h1> 
    <nav> 
     <ul> 
      <li>list 1</li> 
      <li>list 2</li> 
     </ul> 
    </nav> 
</header> 
<main> 
    <h1>Main page heading</h1> 
    <article><h1>Post 1</h1></article> 
    <article><h1>Post 2</h1></article> 
    <div id=“sidebar”> 
     <aside><h1>Aside heading</h1></aside> 
    </div> 
</main> 
<footer> 
    <h1>Footer heading</h1> 
    <aside><h1>Footer widget heading</h1></aside> 
    <aside><h1>Footer widget heading</h1></aside> 
</footer> 

大纲：

1. Site title 
    1. Untitled Section 
2. Main page heading 
    1. Post 1 
    2. Post 2 
    3. Aside heading 
3. Footer heading 
    1. Footer widget heading 
    2. Footer widget heading 

但是，这并没有真正觉得自己是一个很好的解决方案，同时为标题，也许应该有一个标题，我不想给我的页脚中的冠军。任何替代建议将不胜感激。我只想保持尽可能简单的事情，同时仍然使用标签来达到正确的目的。

我感谢任何人阅读这整个问题的时间。如果我对这个轮廓线太过迷恋，请告诉我。

Answer 1

一个典型的网页（这是一个网站的一部分），应该有网站标题（而不是主内容标题）作为body切片根的标题。为什么？因为导航等网站内容不应位于网页主内容标题的范围内。

如果网站标题不是所需的，页面应该至少得到一个无标题的大纲条目，这可以通过在适当的地方使用分段内容元素explicitly来实现。

参见my answer with examples（another one）。

Q1。不知道为什么我在那里得到'无标题部分'。玩耍表明这实际上与<nav>有关。我应该担心'无题组'吗？资产净值并不真的需要一个标题就我而言......

逢节（切片内容元素，如section和nav，和切片的根元素，如body和）“多头”的标题。如果你没有提供，outliner可能会显示类似“无标题部分”的内容。这是一个部分，没有标题。不，你不必担心：每个部分都有一个标题（导航可以是一个例子）并不一定有用/合适。第二季度销售价格指数为：

Q2。 [...]我知道这些标签不是片段元素，但如果不是，那么它们是什么，特别是在和？

每个部分可以具有header和footer（和address）元素。他们的工作？要标记content that is not considered to be the main content of that section。所以header作为body的子项是整个文档的标题，header作为article的子项仅为本文的标题等（see examples）。

不需要给页脚一个标题（或使用它的一个部分）。只需使用footer，你明确表示内容是（在你的情况下）文档的页脚。如果页脚是复杂的，即包含许多内容，则节/标题可以是合适的。由于您的页脚中有两个aside元素，因此您可以考虑添加一个可以代表页脚的父代（无标题）section或用作两个aside元素的分组父代（但如果这样做有意义取决于您的实际内容）。