1.为什么要有语义化标签?
以前的html基本上就是div+css,然而div没有任何意义,全靠css显示页面的样式,因而近几年开发者提出了html结构的语义化,所以w3c就制订了语义化标签。
2.什么是语义化?
语义化就是构成html结构的标签要有意义,比如<header>
表示头部,<main>
表示页面主体,<footer>
表示页面底部,那么这些标签构成的html结构就是有意义的,有语义化的,如果页面的头部,内容,底部用div表示,那么它就不是一个语义化的html结构。
3.怎么知道自己的页面结构是否语义化?
只要去掉css,看html代码的结构是否清晰,再看页面内容是否正常显示。
4.语义化的优点?
- 有语义化的标签的html结构更加清晰,方便编写代码;
- 对于团队来说,方便团队的开发与维护;
- 对于爬虫有利于seo,对于浏览器更加方便解析,
- 最重要的是对于用户
- 因为网速的原因导致没有加载css,页面也能呈现出良好的页面结构;
- 某些标签属性alt,title能带来良好的用户体验,还有就是用好label标签更利于用户交互,
- 在特殊终端,如视障阅读器中语义化html可以呈现良好的结构)
5.怎么做才能写出语义化的html?
1.少使用或不使用<div>
和<span>
标签,用<p>
标签代替<div>
标签;
2.不使用样式标签如:<b>
、<foot>
标签;不使用<b>
和<i>
3.强调文本放在<strong>
或者<em>
标签中;
4.使用表格table时,标题用<caption>
,表头要用<thead>
,主体部分用<tbody>
包围,尾部用<tfoot>
包围,表头用<th>
标签,单元格用<td>
5.表单域用<filedset>
,用<lengend>
标签说明表单的用途;
6.<input>
通过id或者for属性与<label>
标签关联