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:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2cccdccc7d1cbd1d6c7e2cccdcc8cd1d6" rel="noreferrer noopener nofollow">[email protected]</a>">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:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec828382899f859f9889ac828382c29f98" rel="noreferrer noopener nofollow">[email protected]</a>">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

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