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关联起来。