主要内容标题的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">交换？< / p>

<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

这可能会对您有所帮助：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 2

尝试以老式的方式使用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>     

这与包含<section>的{​​{1}}的{​​{3}}类似。

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

Answer 3

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

<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>