0

我第一次真正正确地查看 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”&gt;
        <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>页面内容区分开来。我知道这些标签本身并不是分割元素，但如果不是，那么它们是做什么用的，尤其是在 and 的情况<header>下<footer>？我的理解是，<main>应该在您可能使用过<div id="main">或<div id="wrapper">过去使用过的地方使用它，并且应该表示页面的主要区域，这正是它正在做的事情。

我没有使用<section>标签的原因是因为我知道它们不应该用作样式包装器，而更多地用于“页面的章节”。这个页面没有任何章节（唯一独立的东西已经用<article>and区分了<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”&gt;
        <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

但这并不是一个很好的解决方案，因为虽然页眉可能应该有一个标题，但我不想给我的页脚一个标题......任何替代建议将不胜感激。我只想让事情尽可能简单，同时仍将标签用于正确目的。

我感谢任何人花时间阅读整个问题。如果我对这个大纲过于痴迷，请告诉我。

4

1 回答 1

0

一个典型的网页（即网站的一部分）应该将站点标题（而不是主要内容标题）作为分body节根的标题。为什么？因为像导航这样的站点范围的东西不应该在页面的主要内容标题的范围内。

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

请参阅我的答案示例（另一个）。

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

每个部分（像 and 那样对内容元素section进行分段，以及像and那样对nav根元素进行分段）“长”一个标题。如果您不提供，大纲可能会显示类似“无标题部分”的内容。这是一个部分，只是没有标题。不，您不必担心：每个部分都有一个标题不一定有用/合适（导航可以是一个例子）。bodyblockquote

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

每个部分都可以有header和footer（和address）元素。他们的工作？标记不被认为是该部分主要内容的内容。所以headeras child ofbody是整个文档的标题，headeras child ofarticle只是本文的标题等（参见示例）。

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

于 2014-12-30T05:44:09.580 回答