HTML 5概述：为什么这两个示例生成不同的大纲？

时间：2015-03-18 22:17:44

标签： html5 outline

我想知道为什么以下两个（相似的）示例生成完全不同的HTML5轮廓。

示例＃1

这会生成以下大纲：

Example #1: Outline

这个大纲对我来说没问题。

示例＃2

这会生成以下大纲：

Example #2: Outline

这个大纲对我来说不合适：主要内容现在是标题的一部分！

不同之处在于“这是主要内容”h1标签周围的单个section容器。

有人能解释一下这背后的逻辑吗？

更新：示例＃3

正如answer below所指出，重要的是要知道header，footer和main 不开始新的部分，虽然h元素的大小与之前的h元素相同确实开始一个新的部分。

因此，需要记住以下简单的经验法则：**当页面顶部有header时，中间有main，而header位于页面顶部在底部，然后每个都必须以h1开始（它启动隐式部分）。在这些h1元素下，您可以添加尽可能多的其他部分（通过切片元素[nav，aside，section和article]或隐含地由较低的h - 元素[h2至h6]投放。

我创建了另一个例子（在我看来）类似于完美的HTML5大纲 - 这对于HTML5之前的设备来说也是100％可理解的。

这会生成以下大纲：

Example #3: HTML5 outline Example #3: pre-HTML5 outline

1 个答案:

答案 0 :(得分：1)

这是<article>，<section>，<nav>和<aside>标记的全部内容（就spec而言“分段内容”）：它们定义了较大文档的子部分。

你说“主要内容现在是标题的一部分”，但这不是大纲显示的内容 - 它表明<section>是主文档（<body>）的一个小节，标题为<h1>Header</h1>。

在你的第一个例子中：

<body>
  <header><h1>Header</h1></header>
  <main><h1>This is the main content</h1></main>
  <footer><h1>Footer</h1></footer>
</body>

.. <header>，<main>和<footer>元素不会影响大纲。 （甚至有a note to that effect in the spec - 查找“标题元素不是分段内容;它不会引入新的部分。”），所以出于概述算法的目的，它等同于：

<body>
  <h1>Header</h1>
  <h1>This is the main content</h1>
  <h1>Footer</h1>
</body>

在你的第二个例子中，

<body>
  <header><h1>Header</h1></header>
  <main>
    <section>
      <h1>This is the main content</h1>
    </section>
  </main>
  <footer><h1>Footer</h1></footer>
</body>

.. <section>元素引入了<body>元素第一部分的子部分，因此它等同于：

<body>
  <div>
    <h1>Header</h1>
    <section>
      <h2>This is main content</h2>
    </section>
  </div>
  <div>
    <h1>Footer</h1>
  </div>
</body>

（我添加了<div>来标记概述算法隐含的文档的逻辑部分。）

所以这个大纲是：

1. Header
  1.1. This is the main content
2. Footer

对于规范中的示例，这可能更有意义：

<!DOCTYPE HTML>
<title>The Tax Book (all in one page)</title>
<h1>The Tax Book</h1>
<section>
 <h1>Earning money</h1>
 ...
</section>
<section>
 <h1>Spending money</h1>
 ...

产生以下大纲：

1. The Tax Book
  1.1 Earning money
  1.2 Spending money

请注意，“税务簿”是文件的标题，“收入”和“消费”是小标题。

另见the article on HTML5 outlines on MDN，它提供了该功能的一些背景知识，希望能让这一切更加清晰。

相关问题
最新问题