Semantic Element

野性酷女 2022-03-06 03:08 194阅读 0赞

# 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；
    
    <table> 
     <thead> 
      <tr> 
       <th align="left">Tags</th> 
       <th align="left">Description</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td align="left"><code>&lt;thead&gt;</code></td> 
       <td align="left">Specifies a table header</td> 
      </tr> 
      <tr> 
       <td align="left"><code>&lt;tbody&gt;</code></td> 
       <td align="left">Specifies a table body</td> 
      </tr> 
      <tr> 
       <td align="left"><code>&lt;td&gt;</code></td> 
       <td align="left">Specifies a table cell</td> 
      </tr> 
      <tr> 
       <td align="left"><code>&lt;tr&gt;</code></td> 
       <td align="left">Specifies a table row</td> 
      </tr> 
      <tr> 
       <td align="left"><code>&lt;th&gt;</code></td> 
       <td align="left">Specifies a table header</td> 
      </tr> 
      <tr> 
       <td align="left"><code>&lt;tfoot&gt;</code></td> 
       <td align="left">Specifies a table footer</td> 
      </tr> 
     </tbody> 
    </table>
 *  过分使用diV标签，html的语义化很不好，div 是一个没有语义的标签，但是没有语义不代表没有意义，建议div只用来构建布局，除此之外尽量少用。
 *  Div与span在html中都是用在辅助布局的，都是没有语义的，不同点是，div是块元素，span是内联元素，从逻辑结构上讲，div 用来划分块元素，span用来划分内联元素。把`<a>`里边套一个`<span>`我们常用的技巧。检查Html页面是否语义化最好的方法, 便是去掉页面的Css链接, 看网页结构是否井然有序, 页面是否仍然有很好的可读性。

[fieldset]: https://devdocs.io/html/element/fieldset