摘要：语义化简单来说，我们可以理解为用正确的标签做正确的事情。正确使用语义标签可以带来很多好处。一些语义类标签介绍用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。表示小时制时间。表示术语的一个定义。
本文最初于 2018-09-21 发布于 知乎 ，后在 《重学前端》 专栏的学习中，重新复习整理，发布于 Github 上，并计划写一系列前端学习相关的文章。欢迎 star 。HTML 语义化
简单来说，我们可以理解为：用正确的标签做正确的事情。
例如：
段落用 p 标签，标题用 h 系列标签，边栏用 aside 标签，主要内容用 main 标签。正确使用语义标签可以带来很多好处。
为什么要关注 HTML 语义化？（为什么要使用语义类标签？）对人：
增强可读性，对开发者更友好，在没有 CSS 的情况下也能较好地呈现网页的内容结构与代码结构，便于团队的开发和维护。
对机器：
有利于 SEO ，可以让搜索引擎爬虫更好地获取到更多有效信息，搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重，有效提升网页的搜索量。
支持读屏软件，方便其他设备的解析（如屏幕阅读器、盲人阅读器等），利于无障碍阅读，提高可访问性。
一些语义类标签介绍用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。
表示最近一个章节内容或者根节点元素的页脚。通常出现在尾部，包含一些作者信息、相关链接、版权信息等。
表示跟文章主体不那么相关的部分，可能包含导航、广告等工具性质的内容。
侧边栏是 aside，aside 不一定是侧边栏。
aside 和 header 中都可能出现导航 ，header 中的导航多数是到文章的目录，而 aside 中的导航多是到关联页面或者整站地图。
footer 中可以包含此元素。
容易误用，并非表示单纯的地址，而是表示「文章作者的联系方式」。
可以让作者为它最近的 或者 祖先元素提供联系信息。在后一种情况下，它应用于整个文档。
表示标题组。
表示重音。同样一句话里如果重音不同，表达的意思也许大相径庭。
表示文本十分重要，一般用粗体显示。
表示缩写。
横向分割线，表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。
表示段落级引述内容。
表示行内的引述内容。
表示引述的作品名。
表示24小时制时间。
两者常配合使用，表示一段独立的内容，并且作为一个独立的引用单元。
当它属于主体(main flow)时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。 -- MDN
这是一张图片。
表示术语的一个定义。
The Internet is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.
导航栏、有序列表、无序列表
中的内容会保持原有格式。
元素用于标识计算机程序输出。
表示一段计算机代码。
对于语义类标签的使用也许会带来一些争议，我们应该遵循的原则是：
尽量只用自己熟悉的语义标签。用对比不用好，不用比用错好。
提示：
你可以在百度或者谷歌搜索中输入「标签名称」+「MDN」这两个关键字来查看更加专业和详细的解释。
另外安利一个 HTML 标签的学习链接：
HTML Reference - A free guide to all HTML elements and attributes
（完）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/53803.html
摘要：代码示例语义化语义化语义化语义化语义化年月日小维语义化标签包括还有等。而没有语义化的元素如则推荐使用。语义化包含了标签语义化和命名语义化。 什么是Web语义化 Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内...
摘要：语义化的页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器如果访客有视障能够读懂内容。 我眼中的Web 语义化 web语义化是什么？ Web语义化，使用语义恰当的标签，可以让页面具有良好的结构，页面元素具有良好的含义，从而让人和机器都能快速理解。语义化的...
摘要：语义化的页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器如果访客有视障能够读懂内容。 我眼中的Web 语义化 web语义化是什么？ Web语义化，使用语义恰当的标签，可以让页面具有良好的结构，页面元素具有良好的含义，从而让人和机器都能快速理解。语义化的...
摘要：逻辑学的语义学着眼点在于逻辑系统的语义解释，是一个理想化的模型系统，不直接涉及自然语言。例如，通过帮助临床研究中的决策，语义技术将跨机构桥接多种形式的生物和医学信息。 showImg(https://segmentfault.com/img/bVbrJYw?w=758&h=420); 前端工程师的招聘中，经常有这样的要求：对Web 语义化有深刻理解。那么到底什么才是深刻理解Web语义化...
阅读 1079·2021-09-04 16:41
阅读 2166·2021-09-02 10:18
阅读 813·2019-08-29 16:40
阅读 2497·2019-08-29 16:14
阅读 732·2019-08-26 13:41
阅读 1178·2019-08-26 12:24
阅读 626·2019-08-26 10:24
阅读 2758·2019-08-23 17:54
