wordpress - 主要内容标题的 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>与 a 进行交换？<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

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

这类似于HTML5Doctor 自己的<section>包含<article>s 的示例。

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

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>