HTML标签语义化

HTML5新增了许多标签，比如<header> <footer>，这些标签的出现，使的html5标签更加语义化，赋予了页面标签更多含义，也使html5更加强壮

什么是语义化

语义化就是使用有意义的标签使页面内容结构化。

为什么要语义化

1. 语义化的html在没有css的辅助下，也可以很好的显示页面结构

2. 有利于SEO优化。在便于开发者阅读的同时优雅的写代码，同时便于爬虫和机器很好的解析。

3. 方便与团队优化与维护。

4. 简单来讲，移动端设备对于css的支持形式有欠缺的，html标签语义化，可以方便其他设备更好的解析页面结构，不依赖于css来表现页面结构

怎么语义化

在说这个问题以前，我们要先搞明白一个基本问题，html才有语义化，css不存在语义化。

html相当于撑起整个房间的架构，表明了哪里是房顶，哪里是窗户，而css不过是来实现你想如何装修这所房间，比如哪里是红色，哪里是黄色，而我们将html标签语义化，就是为了在不使用css时也可以很好的展示页面结构。

布局的标签是通过HTML内在的上下文语境来决定当前的语义化的结构，而不是通过外在的样式表现来决定能衬托的标签。

关于html标签语义化的建议

• 尽可能地减少使用 <div> <span> 等无语义的标签
• 根据上下文结构选用最适合表达当前语义的标签
• h 标签应当是逐级递减的，没有断层
• 不要使用纯文本标签，尽可能的使用css来表现文本样式（维护css远比维护html的成本低）
• 正确使用内容容器 比如 p 标签
• 使用表格时，标题要用<caption>，表头用<thead>，主体部分用 <tbody>包围，尾部用 <tfoot>包围。表头和一般单元格要区分开，表头用<th>，单元格用<td>
• 每个<input>标签对应的说明文本都需要使用<label>标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来
• 表单域要用fieldset标签包起来，并用legend标签说明表单的用途