Semantic Element

Semantic Element

1.什么是语义化

根据内容的结构，选择合适的标签（代码语义化）便于开发者阅读。写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

语义（semantic）　

语义化标记，是指每种标记表示一种特定的内容形态，例如标题、列表、表格等。与之对应的概念，是样式标记（presentational markup）。

Tim最初设想HTML应该是一种纯语义化的标记语言，然而在混沌无序的初始阶段，各家浏览器厂商多少受到另一种通行多年的标记语言SGML的影响，由于该语言同时存在语义化标记和样式标记，于是早期的HTML也被设计成了两类标记的杂合体。

不过随着90年代末CSS的逐步应用以及随之而起的“内容与表现分离”理念，样式标记在新的HTML版本中被逐渐废除，但出于向后兼容的考虑，仍然有部分样式标记被保留，例如：i（样式）/ em（语义）；b（样式）/ strong（语义）。

2.为什么要语义化

• 语言性质: HTML本身就是语义化标记语言，使用符合语义的标记，才谈得上正确使用HTML
• 可访问性: 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
• 有利于SEO: 和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重。
• 增强扩展性: 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页。
• 便于开发和维护: 语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

3.写HTML代码时应注意什么？

• 尽可能少的使用无语义的标签如：div、span；
• 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
• 不要使用纯样式标签，如：b、font、u等，改用css设置。
• 表单域要用fieldset标签包起来，并说明表单的用途；

• 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

  Tags	Description
  <thead>	Specifies a table header
  <tbody>	Specifies a table body
  <td>	Specifies a table cell
  <tr>	Specifies a table row
  <th>	Specifies a table header
  <tfoot>	Specifies a table footer

• 过分使用diV标签，html的语义化很不好，div 是一个没有语义的标签，但是没有语义不代表没有意义，建议div只用来构建布局，除此之外尽量少用。
• Div与span在html中都是用在辅助布局的，都是没有语义的，不同点是，div是块元素，span是内联元素，从逻辑结构上讲，div 用来划分块元素，span用来划分内联元素。把<a>里边套一个<span>我们常用的技巧。检查Html页面是否语义化最好的方法, 便是去掉页面的Css链接, 看网页结构是否井然有序, 页面是否仍然有很好的可读性。