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>有关。我应该担心'Untitled Section'吗？就我而言，导航并不需要一个标题...

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。我不知道为什么我会收到“无标题部分”＃39;那里。玩耍表明这实际上与<nav>有关。我应该担心“无题”部分吗？就我而言，导航并不需要一个标题...

每个部分（分段内容元素，如section和nav，以及分割根元素，如body和blockquote）＆＃34; longs＆＃34;为标题。如果你没有提供一个，大纲可能会显示类似＆＃34;无标题的部分＆＃34;。这是一个部分，没有标题。不，你不必担心：每个部分都有一个标题（导航可以是一个例子）并不一定有用/适当。

Q2。 [...]我理解这些标签不是这样的分段元素，但如果没有，那么它们是什么，特别是在和？的情况下？

每个部分都可以包含header和footer（以及address）元素。他们的工作？标记content that is not considered to be the main content of that section。因此，header作为body的子项是整个文档的标题，header作为article的子项只是本文的标题等。{{3 }}）。

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

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

1 个答案: