如何在博客中正确使用HTML语义元素？

How to properly use the HTML semantic elements in a blog?

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

The <section> element defines a section in a document. [...] A home page could normally be split into sections for introduction, content, and contact information.

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

The <header> element specifies a header for a document or section.

所以我可以在里面放一个<header>一个<section>？但是一个<section>可以用"for introduction"，所以基本上是一个header？ <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 会说：

Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

我不想 <h1> 声明 <section> 包含 <article> 标签。我应该删除 <section> 吗？貌似是个灵活的标签，但我找不到合适的地方放它。

正确的标记是什么？

A​​ header 与标题不一样。您使用

标记作为 header（页眉），使用

到

作为标题（标题、副标题等）。 这就是 header 和标题之间的区别。除此之外，您的标记似乎足够合乎逻辑，除了 header-heading 问题，我不会去使用