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

基本上，除了使用paragraph元素包装整篇文章外，这绝对没问题！你已经在决策背后展示了很多想法，这些日子很少见。

Answer 2

你的加价很好。

（请注意，对于您使用article的第一个h2和第二个h1。{尽管两种方式都可行，为什么不坚持使用一个变体？）

如果文字冗长而详细，最好使用新的部分吗？

不要将整个文字包含在section中！但是，当您使用article，you are "encouraged" to use explicit section elements中的子标题对标题及其内容进行分组时。

有人怀疑如何在HTML5中创建一个语义正确的帖子列表（博客）结构？

2 个答案: