1.什么是HTML语义化
1.HTML语义化就是指在使用HTML标签构建页面时,避免大篇幅的使用无语义的标签(比如div,span等),
要求尽可能的使用具有语义的标签(footer,header等)。
2.根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码
的同时让浏览器的爬虫和机器很好的解析。
2.为什么要语义化
1.为了在没有CSS的情况下,页面也能呈现出很好的内容结构和代码结构。
2.用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用
3.有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息(爬虫依赖于标签来确定上下文和各个关键字饿权重)
4.方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页
5.便于团队开发和维护,语义化更具可读性,是下一步网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化
3.写HTML代码时应注意什么
(1)尽可能少的使用无语义的标签div和span
(2)在语义不明显时,既可以使用div或者p时,尽量用p,因为p在默认情况下有上下间距,对兼容特殊终端有利
(3)不要使用纯样式标签,如:b、font、u等,改用CSS设置
(4)需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用css指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i)
(5)使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和单元格要区分开,表头用th,单元格用td
(6)表单域要用fieldset标签抱起来,并用legend标签说明表单的用途
(7)每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在label标签中设置for=someId来让说明文本和相对应的input关联起来
4.语义化的作用
1.易于用户阅读,样式文件未加载时,页面结构清晰。
2.有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
3.方便屏幕阅读器解析,如盲人阅读器根据语义渲染网页。
4.有利于开发和维护,代码更具可读性,代码更好维护。
5.注意点
HTML5语义化标签并没有广泛使用,比如京东、淘宝等,还是使用div元素,设置id是header或者footer,
这个可能是因为HTML5新增的语义化标签的作用不是特别大,网站没有必要重写