欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 前端技术 > HTML >内容正文

HTML

HTML-语义类标签

发布时间:2025/3/19 HTML 47 豆豆
生活随笔 收集整理的这篇文章主要介绍了 HTML-语义类标签 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

如何理解HTML语义化?

所谓的语义主要分成两个部分

  • 为了让人更容易读懂
  • 让机器更容易读懂

让人更容易读懂

对于人来说,代码可读性、语义化就是一个非常广泛的概念了,例如定义 JS 变量的时候使用更易读懂的名称,定义 CSS class 的时候也一样,例如length list等,而不是使用a b这种谁都看不懂的名称。

让机器更容易读懂

问题就在这里 —— HTML 为何要自己规定那么多标签名称呢,例如p div h1 ul等 —— 就是为了语义化。其实,如果你精通 CSS 的话,你完全可以全部用<div>标签来实现所有的网页效果,其他的p h1 ul等标签可以一个都不用。但是我们不推荐这么做,这样做就失去了 HTML 语义化的意义。

拿搜索引擎来说,爬虫下载到我们网页的 HTML 代码,它如何更好地去理解网页的内容呢?—— 就是根据 HTML 既定的标签。h1标签就代表是标题;p里面的就是段落详细内容,权重肯定没有标题高;ul里面就是列表;strong就是加粗的强调的内容 …… 如果我们不按照 HTML 语义化来写,全部都用<div>标签,那搜索引擎将很难理解我们网页的内容。

为了加强 HTML 语义化,HTML5 标准中又增加了header section article等标签。因此,书写 HTML 时,语义化是非常重要的,否则 W3C 也没必要辛辛苦苦制定出这些标准来。
···
<body>

<header>……</header> <article><header>……</header><section>……</section><section>……</section><section>……</section><footer>……</footer> </article> <article>…… </article> <article>…… </article> <footer><address></address> </footer>

</body>
···
body 里面有自己的 header 和 footer,然后里面是竖篇的 article,每一个 article里面都有header、section、footer

总结

以上是生活随笔为你收集整理的HTML-语义类标签的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。