html - 关于如何在 HTML5 中创建语义正确的帖子列表(博客)结构的一些疑问？

Question

我是 HTML5 的新手，我需要实现一个文章容器(例如，我需要为 WordPress 文章创建经典结构，用户可以在其中看到一系列文章依次排列)，但我有一些疑问关于新 HTML5 组件的语义使用。

为了做到这一点，我想到了这样的事情:

<section>
    <h1>My Posts:</h1>
    <article>
        <header>
            <time datetime="2010-11-10" pubdate>10/11/2010</time>
            <h2>FIRST POST TITLE</h2>
        </header>
        <p>
            POSTS CONTENT
        </p>

        <footer>
            <address><a href="mailto:nonesiste@non.st">MY NAME</a></address>
        </footer>
    </article>

    <article>
        <header>
            <time datetime="2010-11-01" pubdate>01/11/2010</time>
            <h1>SECOND POST TITLE</h1>
        </header>
        <p>
            POSTS CONTENT
        </p>

        <footer>
            <address><a href="mailto:nonesiste@non.st">MY NAME</a></address>
        </footer>
    </article>
</section>

所以我的推理如下:

• 所有显示的帖子都包含在外部 <section> 中元素(因为遵循 HTML5 规范，<section> 表示文档的通用部分，在本例中是显示帖子的区域)，<sections>有它的<h1>标题。
• 每个帖子都由一个特定的 <article> 表示元素(在语义上应该是正确的)。
• 每个文章元素代表一个特定的帖子并包含一个<header>包含发布日期和帖子标题的元素。我用了 <header>元素包含这些信息，因为此元素用于表示“一组介绍性或导航辅助设备”。
• 那我有经典<p>包含文章的文本内容(但我也可以将其包装到一个 div 中，或者如果文本又长又详细，最好使用新的 <section> 吗？)
• 最后，我将电子邮件联系方式放入 <footer> 中元素，因为它是有关容器的信息(<article> 元素)。

对于我的问题，这是一个有效的结构吗？它在 HTML5 中语义正确吗？

Answer 1

这对我来说看起来很棒。 header 和 footer 不久前更改为允许它们在 section 和 article 中使用.

但是，p 元素应该用于单个段落。您的文章很可能会有多个段落，而 WordPress 通常会根据换行符为您生成这些段落。如果您需要将所有文章内容包装到一个元素中，一个 div 就足够了。如果您的文章很长并且有多个部分，您可以改用这些部分。

address 元素首先让我有点反感，因为没有多少人使用它，但它的目的是描述文档(或文档的一部分)作者的联系地址，所以你的用法是绝对正确的。

对于奖励积分，您可以考虑实现用于格式化电子邮件的 hCard 标准:http://microformats.org/wiki/hcard

基本上，除了用段落元素包裹整篇文章外，这绝对没问题!你在你的决定背后表现出了很多想法，这在当今是非常罕见的。