浅谈HTML语义化

1、什么是HTML语义化

• 内容语义化：内容的结构化。
• 代码语义化：选择合适的标签。

2、为什么要语义化

• 在没有CSS的情况下，页面也能呈现出很好的内容结构、代码结构。
• 更好的用户体验，如title、alt用于解释名词或图片信息以及label标签的使用。
• 有利于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重。
• 方便屏幕阅读器、盲人阅读器、移动设备等其他设备渲染网页。屏幕阅读器、盲人阅读器会完全根据标记来“读”网页，如果使用含语义的标记，屏幕阅读器、盲人阅读器会根据标签来判断网页的内容，而不是一个字母一个字母的拼写出来；PDA、手机等设备可能无法像PC浏览器一样来渲染网页，因为它们对 CSS 的支持较弱，使用语义标记可以确保它们以一种有意义的方式来渲染网页。
• 提高可读性，减少差异化的东西，提高开发效率，甚至实现模块化开发，便于团队开发和维护。

  
  

3、写HTML代码时应注意什么？

• 少使用无语义的标签，如div和span。
• 可以使用div或p时，尽量用p，因为p在默认情况下有上下间距。
• 不要使用纯样式标签，如b、font、u等，用CSS设置。
• 需要强调的文本，可包含在strong（加粗，不要用b）或em（斜体。不要用i）标签中，但尽量用CSS。
• 使用表格时，标题用caption，表头用thead，主体用tbody，尾部用tfoot包围，表头和一般单元格要区分开，表头用th，单元格用td。
• 表单域要用fieldset标签包起来，并用legend标签说明表单的用途。
• 每个input标签对应的说明文本都要使用label标签，并通过为input设置id属性，在lable标签中设置for=id来让说明文本和对应的input关联起来。