Question

每当我创建一个HTML5页面时，我都会在哪里放置主页标题。每个人都以不同的方式处理......

情况如下：

假设我有一个名为“Meo's frontend adventures”的网站。在这个网站上有一个名为“Abracadabra Semantics”的页面，其子标题并不重要，例如“lorem ipsum delor”

网站顶部还有一个导航，一个页脚和一些内容。

在HTML 4.0中我会这样做：

- div.header
   + div.nav
   + a.siteName:  "Meo's frontend adventures"
- div.contents
   + h1.pageTitle: "Abracadabra Semantics"
   + strong.lead: "lorem ipsum delor"
   - div.cn
     + h2
     + p
     + etc..
+ div.footer 
     +ul.footerNav

现在，在HTML5中，基本上每个结构元素都获得H1。我应该在哪里放置实际页面的标题？

我会这样：

- header
   + h1.siteName:  "Meo's frontend adventures"
   + nav
- section.contents
   - header
      -hgroup
        + h1: "Abracadabra Semantics"
        + h2: "lorem ipsum delor"
   - article
     - header
       +h1.ArcticleTitle
     + p
     + etc..
- footer
     + nav

我不确定将实际页面的标题放在主要部分中是否正确，或者它是否应该在文档的标题中。我刚从旧的HTML4思维中做到这一点。

将它放在文档的标题中对我来说更合乎逻辑，因为这个页面是关于这个主题的。但在我发现的每个例子中，页面标题都在主要部分，网站的标题位于标题中。

在HTML 4中，很容易决定：h1 =主题标题。但在HTML5中我并不是那么清楚。

Google或屏幕阅读器如何确定内容的标题是什么？你会用什么结构？

Answer 1

有趣的问题，我将为答案提出一个反驳点：你如何看待这个标题？

让我们说被质疑的标题是指整个文件。在这种情况下，从语义上讲，我们会将该文本放在文档的标题中。然而，页面标题可能是另一回事。如果我们查看与内容相关的页面标题（例如，如果Abracadabra Semantics正在引导文章本身），那么它不属于页面的子项，而是属于文章或部分的子项。因此，在这种情况下，我们的HTML可能如下所示：

<!-- Head stuff here -->
<body>
  <header>
    <h1>Meo's frontend adventures</h1>
    <h2>Lorem Ipsum Dolor Sit Amet...</h2>
    <nav>
      <!-- ul of navigation items -->
    </nav>
  </header>
  <section>
    <header>
      <h1>Abracadabra Semantics</h1>
      <h2>Lorem Ipsum Dolor Sit Amet...</h2>
      <!-- optional introductory text -->
    </header>
    <article>
      <p>Lorem Ipsum Dolor Sit Amet...</p>
    </article>
    <!-- Other potential related articles -->
  </section>
  <!-- Possible footer -->
</body>

从语义上讲，我们在层次结构中组织页面 - 上面的标记告诉我们这个标题（或任何类型的子标记）属于什么。在这种情况下，我们可以有两个标题元素（一个提供对网站的介绍，另一个提供对该节的介绍）。

然而，并非所有人都以同样的方式看待这组语义。例如，他们可以将单个页面视为相关部分，因此他们可以在页眉中包含其页面标题。或者，他们的部分可能是他们的主导元素，并且标题是该部分的第一个孩子。这是关于您对内容的估计的观点。屏幕阅读器将根据您布置文档的顺序组织网站;然而，并非所有人都会以同样的方式做到这一点。 HTML4迫使屏幕阅读器的一些开发人员考虑CSS定位，但HTML5试图通过添加更多语义元素来重新组织您的网站来纠正这一点。

无论如何，既然你已经看过你可以做什么，以及它是如何工作的，那么你可以做出自己的决定。考虑一下如何理解与周围内容相关的内容，并进行相应的组织。

为了进一步帮助您，请查看规范：http://www.w3.org/TR/html-markup/header.html

Answer 2

实际页面的标题应该保持在每个其他标题之上。

然后，如果您对页面的不同段落或部分有不同的标题，则可以在文本流之后在相关内容之前编写它们。

基本上，您可能希望以这样的方式放置标签，即使没有任何格式化，文本仍然可以正确读取。因此，例如首先是页面标题，然后是每个段落重复的段落标题和段落文本。

Answer 3

有关此主题的有趣读物：http://www.iheni.com/html-5-to-the-h1-debate-rescue/

使用HTML5，每个元素都可以拥有自己的H1，反过来，每个分割元素的层次结构和嵌套确定每个H1的标题级别。查看上面的示例，其中的H1将高于其中包含的H1。

HTML5语义：主要内容标题属于哪里？

3 个答案: