Question

使用HTML 5引入了新的语义标记，其中包括页眉和页脚。但是我很困惑我应该使用什么，为什么？直接使用标头标记或给class =“ header”。哪个更好，为什么？

Answer 1

使用<header>和那些语义标记。

为什么？因为它们有意义，所以更易于阅读。

例如，考虑

<header id="article-header>
  ...
</header>

和

<div id="article-header" class="header">
  ...
</div>

如您所见，第一个更短，更易于阅读。

根据Inbound now，语义标签在SEO方面也更好。

另外，this和this问题也有有趣的答案

编辑：

我引用的是MDN：

编写语义标记的一些好处如下：


搜索引擎会将其内容视为影响页面搜索排名的重要关键字（请参见SEO）

屏幕阅读器可以将其用作路标，以帮助视障用户浏览页面

查找有意义的代码块比通过具有或不带有语义或命名空间的类的无尽div搜索要容易得多

向开发人员建议将要填充的数据类型

语义命名反映了自定义元素/组件的正确命名

此外，我很早以前就读过某个地方，语义标记用于定义文档的轮廓，div更适合于像框样式这样的可视部分（我找不到正确的源代码）现在）。

Answer 2

最好使用标题标签。标头元素代表一个介绍性内容的容器或一组导航链接。标头标签的块作用域与普通div标签的作用域相同。

<html>
<body>

<article>
  <header>
    <h1>Most important heading here</h1>
    <h3>Less important heading here</h3>
    <p>Some additional information here.</p>
  </header>
  <p>Lorem Ipsum dolor set amet....</p>
</article>

</body>
</html>

Answer 3

在CSS定义中

类构造：

.表示课程

.header{
...........
}

HTML

<div class=header>
..........
<div>

标题标签

这叫element名称本身，就像body或其他

header{
.............
}

HTML

<header>
................
</header>

HTML 5：使用<header>标记或class =“ header”

3 个答案: