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

时间:2017-07-08 14:47:43

标签: html html5 tags semantic-markup

我在w3schools上阅读了很多信息。它将<section>定义为:

  

&lt; section&gt; element定义文档中的一个部分。 [...]主页通常可以分为几个部分,用于介绍,内容和联系信息。

所以,基本上,<section>可以是<header>(简介)和<footer>(联系信息)吗?

  

&lt; header&gt; element指定文档或部分的标题。

所以我可以将<header> 放在 <section>内?但是可以使用<section>&#34;进行介绍&#34;,所以基本上标题?与<footer>元素相同的故事。

问题

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

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

  • 我应该将<footer>用于<article>的数据还是包含版权和页脚导航的网站部分?

  • 我应该在<{em} <{em>

我们说我有一个简单的网站,包含徽标,导航,几篇文章和一些页脚文字。什么是做标记的最佳方法?

&#13;
&#13;
<section>
&#13;
&#13;
&#13;

如果我这样做,Nu HTML Checker说:

  

警告:科缺乏标题。考虑使用h2-h6元素为所有部分添加识别标题。

我不希望<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>包含<h1>标记。我应该删除<section>吗?它似乎是一个灵活的标签,但我无法找到一个有效的地方。

什么是正确的标记?

2 个答案:

答案 0 :(得分:2)

header / footer

sectioning contentsectioning 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是有意义的?如果您有隐式部分,或者您需要文档大纲中的条目。请参阅我的相关答案:

请注意,当分区内容元素没有标题元素时,验证程序会报告a warning, not an error。它们不需要标题,但可以表明分段内容元素被滥用:如果它可以有标题,通常只有使用它才有意义,即使你实际上没有提供标题。

答案 1 :(得分:0)

标题与标题不同。你使用&lt; header&gt;标题(页眉)和&lt; h1&gt;的标记到&lt; h6&gt;为你前往(标题,副标题等)。 这是标题和标题之间的区别。除了你的标记似乎合乎逻辑,除了标题标题问题,我不会使用&lt; footer&gt; - 页脚的标记,用于显示日期或作者等一些数据。

HTML5语义非常符合逻辑 - &lt; header&gt;,&lt; nav&gt;,&lt; main&gt;内容,主要内容的内容,&lt;旁边&gt;内容等...

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

如果需要,您可以使用&lt; time&gt;使用&lt; p&gt;标记标签,但我不会(因为兼容性)