HTML语义化是关于使用正确的标签来表达网页内容的结构，而不是样式。关注语义化可以提高网页的可访问性，有利于SEO，使代码更易于团队维护。避免滥用div，使用如h系列、p、aside、main等标签能更好地描述内容。此外，合理使用strong、em、fieldset、legend等语义标签能提高代码可读性和可维护性，尤其在多人协作和长期维护的项目中显得尤为重要。
什么是 HTML 语义化？
官方回答--HTML：超文本标记语言，负责网页的结构。什么是网页的结构呢？通俗的说，就是告诉你：“这是一个一级标题或二级标题”，“这是一个段落”，“这是头部”，“这是一个导航栏”，并不会告诉你：“这是红色的”，“这个有多么宽，多么高”。这就是简单的HTML语义化：表现网页的结构。语义化的HTML元素指的是那些使用最恰当的HTML进行标记的内容，在标记构成中并不关心内容显示。语义化的HTML是构建有效网站的基石。
简单来说，我们可以理解为：用正确的标签做正确的事情。
例如：
段落用 p 标签，标题用 h 系列标签，边栏用 aside 标签，主要内容用 main 标签。
为什么要关注 HTML 语义化？
对人：
①便于团队的开发和维护。
②在没有加载 CSS 的情况下也能呈现较好的内容结构与代码结构，易于阅读(毕竟一份代码不可能一个人维护到底，总有个接锅的)。
对机器：
①有利于 SEO ，搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重。
②方便其他设备的解析(如屏幕阅读器、盲人阅读器等)，利于无障碍阅读，提高可访问性。
DIVS该停止(滥用)了
在现实中很多程序员会过度滥用div块，它已经存在了几十年，这几十年来，当需要将一些内容包裹起来达到(添加)样式或者布局目的的时候，它都会成为程序员的首选元素。像下面这些内容的情况依旧很常见：
Why you should buy more cheeses than you currently do Part 1: Variety is spicy Part 2: Cows are great 上面这段代码里有很多的div标签。虽然我们不可否认它有效，然而，它有些严重的问题：
可访问性 - 许多浏览器非常智能，会尽力解析页面结构，以帮助用户按照页面制作者的意图来引导用户，并为用户提供简单的跳转链接来指引他们到自己关心的页面部分。然而，
标签并没有真正传递有关文档结构的任何有用信息。浏览器不是人类，不能指望其解析class和id属性，或能够识别全世界开发人员命名块元素的奇怪和狂野的方式。我可以识别到是一个副标题，但是机器不能。可读性 - 要阅读此代码，你需要仔细扫描类名，从样板之间挑选出来。一旦你(的代码)深入几个层次，跟踪哪个
开始标记对应，那就变得很棘手了。你开始非常依赖IDE功能，例如着色不同的缩进级别或突出显示匹配的标记以跟踪您的位置，而在较长的文档中，它可能需要在这些功能之上进行大量的滚动。
一致性和标准 - 开始新的工作或转移到新项目，并且必须从头学习代码库中使用的让人抓狂的标记，那可能会令人很沮丧。如果每个人都有标准化的方法来标记web文档中常见结构，那么在不熟悉代码库的情况下，都可以很容易的浏览HTML文件并快速处理它应该展示的内容。如果只有一个这样的标准...
总的来说，div本身来说并不是错，而滥用div也并不会给性能带来多大的影响，主要是影响了HTML语义化的本意，虽然你用了很多的div，你说你能读得懂，但是你要知道这份代码你肯定不会是惟一的维护者，有可能因为人事变故或者说你一夜暴富之后一走了解，那么后面接坑的兄弟姐妹会非常得痛苦，这种情况下，读懂你的代码比重构一遍更加高成本，所以这些细节一定要注意！
最后我们来说一下，在写HTML代码时应该注意：
①尽可能少的使用无语义的标签div和span；
②在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
③不要使用纯样式标签，如：b、font、u等，改用css设置。
④需要强调的文本，可以包含在strong或者em标签中(浏览器预设样式，能用CSS指定就不用他们)，strong默认样式是加粗(不要用b)，em是斜体(不用i)；
⑥使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
⑦表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
⑧每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
觉得本文对你有帮助？请分享给更多人
关注「入坑互联网」加星标，提升前端技能
The End
如果你喜欢，记得关注大坑
万水千山总是情，点个 “在看” 行不行
316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
