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

不完全是我认为它应该概述的方式。

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

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

我没有使用<section> 标签的原因是因为我知道它们不应该用作样式包装器，而更多地用于“页面的章节”。这个页面没有任何章节（唯一独立的东西已经用<article>和<aside>区分了）所以我不明白为什么我应该使用<section>。

我还尝试在<header> 和<footer> 中使用<h1> 标签，这似乎解决了我的问题。

<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)。

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

每个部分（分割内容元素，如section 和nav，分割根元素，如body 和blockquote）“长”为标题。如果您不提供，大纲可能会显示类似“无标题部分”的内容。这是一个部分，只是没有标题。不，您不必担心：每个部分都有一个标题不一定有用/合适（导航就是一个例子）。

第二季度。 […] 我知道这些标签本身并不是分割元素，但如果不是，那么它们是做什么用的，尤其是在 and 的情况下？

每个部分都可以有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 元素的分组父级（但如果这有意义取决于您的实际内容）。