什么是语义 HTML？没有任何意义？

所谓语义HTML将从代码层面表达程序员的思想和想法，同时描述网站的结构：

1. ，也与程序员进行沟通。一个人类，并帮助程序员快速掌握当前的代码。这其实可以通过评论来实现，但是使用Semantic HTML可以节省一些评论，哈哈。
2. 与用代码构建的系统（例如禁用人士阅读器和搜索引擎搜索程序等）进行通信，帮助他们快速准确地实现目标。由于此类系统与人类智能相比是有限的，因此它们必须就如何通信达成一致，而W3C的分辨率是语义HTML的标准。

最近在补前端基础的时候，碰到了这个知识点，发现市面上的信息大多比较杂乱，往往只能理解而无法用语言表达。很难从中找到任何实用价值，所以我写了这篇文章。 ，不求广泛分析，但求实用为先。

文档章HTML代码

文档章HTML标签可以反映网页的结构，因此它也具有最语义化的HTML标签。

/

这两个代码的语义比较相似。它们都代表文档中的一个独立区域（独立实体），在结构上也可以分为 / 等部分。比较这两个代码，比高一级：

1. ❀>，例如：是通常是博客文章下方或侧面的“相关文章”列表。然后整个 HTML 块可以用 包裹，并且“相关文章”的小 HTML 块可以由 section 表示；再比如，文章的“版权信息”也可以用部分来表示。
2. 可以包含，例如：一篇文章和这篇文章的用户评论，整个HTML可以是> （您可以考虑包括 ），蓝色框的部分部分可以使用。

   再例如，对于一篇文章，您可以使用来表示文章标题/作者/发表日期等，并且可以使用。

   既然我们提到了 / ❀>❀>就提到了。 顾名思义，它是整个页面的主体部分。与 / 不同，一页只能有一个 。 仅包含页面的核心内容，例如文章，不应包含其他外围内容，例如搜索字段、菜单等。

   通常指页面主要内容以外的侧边栏，例如上面提到的“相关文章”，或者“作者简介”，如果是这样的话那么它通常会包含在中。另外，还可以代表一些工具功能，比如“分享文章”、“返回顶部”等功能。

   代表网站上的导航，但并不是所有的导航都需要用来实现。建议只用它来实现比较重要的导航。例如，对于网页页脚中的链接列表，只需使用。此外，每个页面可以有多个。

   -

   -

   代表标题，共6级，其中

   权重最高，

   权重最低，其他按降序排列。一般来说，

   必须分配给网站名称/LOGO。如果提供二级域名，还可以分配子站网站名称/LOGO。对于搜索引擎来说，

   -

   是了解网站的重要方式，因此必须正确分配，例如：使用
   作为网站标题文章中，对文章中的每个副标题使用
   。

   文本级语义HTML标签

   文本级语义HTML标签有很多，但我认为其中很多没有实用价值。

   表示其他页面或当前页面其他地方的入口。这是一个历史悠久的语义标签，也是搜索引擎的基础。我想大家都很熟悉了。大家都已经很熟悉了，这里就不多说了。

   代表一个段落，也是一个长代码。从语义上来说，我更喜欢用
   来表示一段纯文本，而不是用
   来呈现特定的风格。

   /

   这两个代码用于强调特定的单词/句子。从音色上来说，比音色更强，分量也更强。据说这两个代码是用来语义替换和的。那么， 和 之间有什么区别？答案是，不再用来表示“重量”，而只是用来区分一些专有名词（如人名、书名等）和普通单词。 的情况与类似。不再表示强调。从某种程度上来说，它已经失去了语义，仅作为辅助代码来完成CSS样式。

   用于表示 24 小时时间或公历日期。如果它代表日期，它还可以包括时间和时区。对于，尽量使用机器可识别的时间格式，而不是使用一些模糊的表达方式，例如“一小时前”、“两天前”等。

   组合 HTML 标签

   表示一段富文本，可以是文章插图、代码片段或表格，通常与⸝ 搭配使用

   当然，为了表达这个富文本的描述/标题，一个❀下只能有一个。我想到了的典型用法，这是瀑布文本块：

   结构化数据

   根据已经绘制的一些规则，这个块在SEO领域非常重要到目前为止，您可以清楚地指示页面文本的不同属性。例如：如果用正则语义表示某个产品的详细信息页面，则搜索引擎只能检测到该产品的名称；然而，随着结构化数据的兴起，某些标签和属性可以用来指示产品的名称。价格、供应商、实物照片等；搜索引擎获取产品页面的各种属性后，会直接出现在搜索结果页面上，并且也会在排名中优先考虑。这方面的内容很多，建议参考各大搜索引擎的优化指南。毕竟，每个搜索引擎对这种结构化数据的支持程度都不同。

   作者：array_ Huang
   链接：https://juejin.im/post/5a9c8866f265da23741072bf
   来源：掘金属于。商业转载请联系作者获取授权。非商业转载请注明来源。