主要内容标题的 HTML5 语义标记

Question

我再次向你寻求帮助，Stack Overflow。这次我很难理解 HTML5 关于我网站主要内容标题的语义。下面是两个例子，我应该使用哪一个？也许我应该走一条完全不同的路？

编辑：我混淆了代码示例！

示例 1

使用此代码，我得到如下大纲：

1. 类别：foo
2. 博文#1
3. 博文#2

这似乎不正确，因为博客文章是在该类别下发布的？

<header id="header">
    <h1>My awesome website!</h1>
    <!-- Primary navigation and such -->
</header>
<div id="content">
    <section id="title">
        <h1>Category: foo</h1>
        <p>Some content</p>
    </section>
    <article>
        <h1>Blog post #1</h1>
        <p>Some content</p>
    </article>
    <article>
        <h1>Blog post #2</h1>
        <p>Some content</p>
    </article>
</div>

示例 2

使用此代码，我得到如下大纲：

1. 类别：foo
   1. 博文#1
   2. 博文#2

这对我来说似乎是正确的，但 HTML5 Doctor 表示不应将 <section> 用作主要/主要内容包装器。

另外，如果我要使用这个示例，如果主要内容没有自然标题（例如显示所有帖子的索引页面），我会将<section id="content> 与<div id="content"> 交换吗？

<header id="header">
    <h1>My awesome website!</h1>
    <!-- Primary navigation and such -->
</header>
<section id="content">
    <header id="title">
        <h1>Category: foo</h1>
        <p>Some content</p>
    </header>
    <article>
        <h1>Blog post #1</h1>
        <p>Some content</p>
    </article>
    <article>
        <h1>Blog post #2</h1>
        <p>Some content</p>
    </article>
</section>

Answer 1

尝试以老式方式使用 h1-h6 标签。

<h1>My awesome website!</h1>

<section> 

    <h2>Category: foo</h2>
    <p>Some content</p>

    <article>
        <h3>Blog post #1</h3>
        <p>Some content</p>
    </article>

   <article>
       <h3>Blog post #2</h3>
       <p>Some content</p>
   </article>
</section>

<section>  
    <h2>Category: bar</h2>
    <p>some content</p>

    <article>
        <h3>Blog post #3</h3>
        <p>Some content</p>
    </article>

    <article>
       <h3>Blog post #4</h3>
       <p>Some content</p>
    </article>
</section>     

这类似于包含<article>s 的<section> 的HTML5Doctor's own example。

从技术上讲，您可以将<h2> 和<h3> 标记替换为<h1>，这同样有效。使用 h1-h6 的优点是保持与旧用户代理（尤其是屏幕阅读器）的向后兼容性。

Answer 2

这可能会对您有所帮助：http://visitmix.com/writings/article-vs-section-weve-finally-gone-mad

看起来像你想要的

<section id="content">
    <h1>Category: foo</h1>
    <p>Some content</p>
  <article>
    <h1>Blog post #1</h1>
    <p>Some content</p>
  </article>
  <article>
    <h1>Blog post #2</h1>
    <p>Some content</p>
  </article>
</section>

Answer 3

我会像@Patrick McElhaney 所做的那样标记页面——每个类别都有一个SECTION。我刚刚添加了另一个名为“内容”的包装器，以允许对子内容元素进行分组。这反映了您的原始布局。

<header id="header">
    <h1>My awesome website!</h1>
    <!-- Primary navigation and such -->
</header>

<section id="content">
    <section class="category" id="catFoo">
        <hgroup id="title">
            <h2>Category: Foo</h2>
            <p>Category Description</p>
        </hgroup>
        <article>
            <h3>Blog post #Foo1</h3>
            <p>Some content</p>
        </article>
        <article>
            <h3>Blog post #Foo2</h3>
            <p>Some content</p>
        </article>
    </section>

    <section class="category" id="catBar">
        <hgroup id="title">
            <h2>Category: Bar</h2>
            <p>Category Description</p>
        </hgroup>
        <article>
            <h3>Blog post #Bar1</h3>
            <p>Some content</p>
        </article>
    </section>
</section>