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

Question

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

<section>元素定义文档中的一个部分。 [...]主页通常可以分为几个部分，用于介绍，内容和联系信息。

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

<header>元素指定文档或节的标题。

所以我可以在 <section>放一个<header> <section> ？ 但是<section>可以用于“引入”，所以它基本上是一个标题？ 与<footer>元素相同的故事。

问题

我怎么实际上应该使用这些元素？

• 我应该使用<header>作为<article>的标题还是包含徽标和导航的网站部分？

• 我应该使用<footer>作为<article>的数据还是我的网站包含版权和页脚导航的部分？

• 我应该在 <article>标签周围添加<section> <article>标签吗？

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

 <!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>吗？ 它似乎是一个灵活的标签，但我找不到一个有效的地方来放它。

什么是正确的标记？

Answer 1

header / footer

有分段内容和分段根元素。 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元素不是sectioning元素，这就是它的header / footer子元素属于body （它是一个切片根元素）而不是div 。

因此，您可以通过放置header / footer元素来使用header / footer元素，以便它们最近的切片父元素是body元素。

section

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

一般来说，何时使用section有意义的？ 如果您有隐式部分 ，或者您需要文档大纲中的条目。 请参阅我的相关答案：

• 如何决定使用哪个分区内容元素 （有三个博客标记示例）
• article中的section与section中的article （在博客上下文中）
• 根据经验，何时使用section

请注意，当分区内容元素没有标题元素时，验证程序会报告警告，而不是错误 。 它们不需要标题，但可以表明分段内容元素被滥用：如果它可以有标题，通常只有使用它才有意义，即使你实际上没有提供标题。

Answer 2

标题与标题不同。 对标题（页眉）使用<header>标记，为标题使用<h1>到<h6>（标题，副标题等）。 这是标题和标题之间的区别。 除了你的标记看起来合乎逻辑，除了标题标题问题，我不会使用<footer> - 页脚的标记来显示一些数据，如日期或作者。

HTML5语义非常合乎逻辑 - <header>，<nav>，<main>内容，主要内容的内容，<aside>内容等......

但<article>可以是<section>的一部分。 部分也可以是文章的一部分。 所以我的观点是，如果你遵循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> 

如果需要，您可以将<time>标签与<p>标签一起使用，但我不会（因为兼容性）