标签的语义
通过标签判断内容语义,例如根据h1标签判断出内容是标题,
根据p标签判断内容是段落、< input >标签是输入框等;
判断标签是否语义化
去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性;
为什么标签要语义化
1、搜索引擎友好;
2、更容易让屏幕阅读器读出网页内容;
3、去掉或样式丢失的时候能让页面呈现清晰的结构;
4、便于团队开发和维护;
如何使标签更具语义化
标题内容型
标题使用h标签而不是div class=h2,段落使用p标签,锚点使用a标签;
表单
分组表单用 fieldset 标签包起来,并用 legend 标签来说明的用途;
每个 input 标签对应的说明文本都需要使用 label 标签,并且通过 input 设置id属性,在<label>标签中设置“for=someId”来让说明文本和响应的<input>关联起来;
表格
表格标题要使用<caption>,表头使用<thead>包围,尾部使用 tfoot 包围,表头和一般单元格要区分开,表头用 th 一般单元格用 td;
应注意的问题
- 尽可能减少使用无语义标签div和span;
- 语义不明显,可以用p也可以使用div的情况下,尽量用p;
- 不要使用纯样式标签,例如:b、font 和 u等,改用CSS设置;
- 使用HTML5的结构元素(HTML5新特性)。