HTML语义化的一些个人理解

1. 语义化的背景:

   以前的HTML的结构,基本上就是div+css,然而,div并没有什么实际意义,全靠css显示页面的样式.后来,开发者提出了HTML结构的语义化,w3c也制定出了语义化标签.

2. 什么是语义化:

   语义化就是构成HTML结构的标签要有意义,比如有这样的标签:head表示头部,main表示内容主体,footer表示页面底部.那么这些标签构成的HTML结构就是语义化的.如果头部,主体,底部都用div来表示,那么他就不是一个语义化的HTML结构了.

3. 怎么知道页面结构是否语义化?

   可以去掉css,看html代码的结构是否清晰,再看页面内容呈现是否便于阅读;

4. 为什么要语义化?

   • 对于开发者来说,更加容易开发,阅读与维护;

   • 对于爬虫,搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,有利于SEO;

   • 对于浏览器来说,语义化的html结构更加清晰,更加方便解析;

   • 对于用户,能提供更好的用户体验——一是假如css加载失败,页面也能呈现出良好的结构,二是某些标签如label和有些标签属性如alt,title能带来良好的用户体验;三是在特殊终端如视障阅读器中语义化的HTML可以呈现良好的结构.

5. 如何做到语义化?

   • 用正确的标签做正确的事情,如尽量不使用样式标签b,font;强调文本放在strong,em中,不使用b,i等;使用表格table时,标题用caption,表头用thead,主体用tbody,尾部用tfoot,表头节点用th,单元格用td;input标签通过id属性或for属性与label标签关联等等;

   • html语义化,css类名也要语义化;

   • html5新增了一些语义化标签,如header,footer,nav,aside,article等等;