【问题标题】：How to properly use the HTML semantic elements in a blog? [closed]如何在博客中正确使用 HTML 语义元素？ [关闭]
【发布时间】：2017-07-08 14:47:43
【问题描述】：

我阅读了很多关于w3schools 的信息。它将<section> 定义为：

元素定义文档中的一个部分。 [...] 主页通常可以分为介绍、内容和联系信息等部分。

所以，基本上，<section> 可以是<header>（介绍）和<footer>（联系信息）？

元素指定文档或部分的标题。

所以我可以把<header> 里面一个<section>？但是<section> 可以用于“介绍”，所以它基本上是一个标题？ <footer> 元素也是如此。

问题

我实际上应该如何使用这些元素？

我应该将<header> 用作<article> 的标题还是用于包含徽标和导航的网站部分？
我应该将<footer> 用于<article> 的数据还是用于包含版权和页脚导航的网站部分？
我应该在我的<article> 标签周围放一个<section> 标签吗？

假设我有一个简单的网站，包含一个徽标、导航、几篇文章和一些页脚文本。做标记的最佳方法是什么？

<!DOCTYPE html>
<html>

<head>
    <title>My site</title>
</head>

<body>
    <header>
        <img src="logo.png" alt="My logo!">
        <nav>
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
        </nav>
    </header>

    <section>
        <article>
            <header><h2>Article 1 title</h2></header>
            <footer>Posted on Foo.Bar.2017</footer>
        </article>

        <article>
            <header><h2>Article 2 title</h2></header>
            <footer>Posted on Foo.Bar.2017</footer>
        </article>

        <article>
            <header><h2>Article 3 title</h2></header>
            <footer>Posted on Foo.Bar.2017</footer>
        </article>
    </section>

    <footer>
        <p>Copyright</p>
    </footer>
</body>

</html>

如果我这样做，Nu HTML Checker 会说：

警告：部分缺少标题。考虑使用 h2-h6 元素为所有部分添加标识标题。

我不想要 <h1> 声明 <section> 包含 <article> 标签。我应该删除<section> 吗？它似乎是一个灵活的标签，但我找不到放置它的有效位置。

正确的标记是什么？

【问题讨论】：

“我阅读了很多关于 w3schools 的信息。”这是你的第一个错误。它与 w3c 没有任何关联，并且有很多不准确的信息。如果您想知道要使用哪些 HTML 元素，请阅读the actual spec。

标签： html tags semantic-markup

【解决方案1】：

`header` / `footer`

有sectioning content 和sectioning root 元素。 header/footer 元素始终“属于”这些分段（内容/根）元素之一。

<body>

  <header>belongs to the 'body'</header>

  <article>
    <header>belongs to the 'article'</header>
    <footer>belongs to the 'article'</footer>
  </article>

  <div>
    <header>belongs to the 'body'</header>
    <footer>belongs to the 'body'</footer>
  </div>

  <footer>belongs to the 'body'</footer>

</body>

请注意div 元素不是分段元素，这就是为什么它的header/footer 子元素属于body（这是一个分段根元素），而不是div。

因此，您可以将header/footer 元素用于站点范围的内容，方法是放置它们，以便它们最近的分段父元素是body 元素。

`section`

header/footer 可以由一个或多个section 元素组成，但这通常只有在header/footer （异常）复杂时才有意义。

一般来说，什么时候使用section 才有意义？如果您有一个隐式 section，或者如果您需要在文档大纲中输入一个条目。请看我的相关回答：

how to decide which sectioning content element to use（附三个博客标记示例）
section in article vs. article in section（在博客上下文中）
a rule of thumb when to use section

请注意，当分段内容元素没有标题元素时，验证器会报告 a warning, not an error。它们不需要有标题，但这可能表明分割内容元素被滥用：通常只有在它可以有标题时才有意义，即使您实际上没有提供标题。

【讨论】：

【解决方案2】：

标题与标题不同。您使用

标签作为标题（页眉），使用

到

作为标题（标题、副标题等）。这就是标题和标题之间的区别。除此之外，您的标记似乎足够合乎逻辑，除了页眉标题问题，我不会使用
- 页脚的标签来显示日期或作者等数据。

HTML5 语义非常合乎逻辑 -

、

但是

可以是

的一部分。一个部分也可以是文章的一部分。所以我的观点是，如果你遵循 HTML 标签的逻辑，你就不必过多担心语义。

哦，回答你的问题。我会这样做：

<section>
    <article>
        <h2>Article 1 title</h2>
        <p>Posted on Foo.Bar.2017</p>
    </article>

    <article>
        <h2>Article 2 title</h2>
        <p>Posted on Foo.Bar.2017</p>
    </article>
</section>

如果需要，您可以将标记与

标记一起使用，但我不会（因为兼容性）

【讨论】：

问题

header / footer

section

`header` / `footer`

`section`