一、什么是HTML语义化
<h1>文字内容1</h1> <span>文字内容2</span>
- 上面的代码中，文字内容1所用标签为h1，h1具有标题一的含义，文字内容2所用标签为span，span标签则没有独特的含义。
- HTML语义化指的是使用恰当语义的HTML标签，使页面具有良好的结构和含义，从而使机器和人都能快速理解网页内容。
- 其实从我们开始学习HTML标签开始，就接触了各式各样的语义化标签，他们通常可以根据所使用的单词或缩写了解到他们的含义，而非语义化的标签其实只有div、span。
二、语义化标签的优势
- 代码结构清晰，方便阅读，有利于团队合作开发；
- 方便其他设备解析，以语义的方式来渲染网页；
- 有利于搜索引擎优化（SEO）
三、常见的语义化标签
- hn：h1~h6，分级标题，h1 与 title 协调有利于搜索引擎优化。
- ul：无序列表。
- li：有序列表。
- title：页面主体内容。
- header：页眉通常包括网站标志、主导航、全站链接以及搜索框。
- nav：标记导航，仅对文档中重要的链接群使用。
- main：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
- article：定义外部的内容，其中的内容独立于文档的其余部分。
- section：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
- aside：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
- footer：页脚，只有当父级是body时，才是整个页面的页脚。
四、实际网页分析（以图虫为例）
图虫是国内优质摄影师交流社区，拥有中国最大的图片版权素材库，由此它的语义化程度一定不低。 ![J$(TTR])_8A]T2PF7%P9L@7.png](p1-juejin.byteimg.com/tos-cn-i-k3…) 在图虫主页按F12，即可弹出调试窗口，可在元素区查看到具体的标签用以分析，但一个个数太慢了，我们在控制台输入脚本：
var total = 0 var obj = Array.prototype.reduce.call(document.querySelectorAll('*'), (acc, cur) => { let tag = cur.tagName.toLowerCase() acc[tag]= acc[tag] || 0 acc[tag]++ total++ return acc }, {}) var list = [] for(let k in obj) list.push({tag: k, times: obj[k], ratio: (obj[k] * 100 / total).toFixed(2) + '%'}) console.clear() console.table(list.sort((a, b) => b.times - a.times))
按回车执行后，即可得到如下统计数据：
| (索引) | tag | times | ratio |
|---|---|---|---|
| 0 | 'a' | 137 | '29.27%' |
| 1 | 'div' | 125 | '26.71%' |
| 2 | 'li' | 38 | '8.12%' |
| 3 | 'p' | 34 | '7.26%' |
| 4 | 'i' | 30 | '6.41%' |
| 5 | 'span' | 26 | '5.56%' |
| 6 | 'script' | 14 | '2.99%' |
| 7 | 'img' | 14 | '2.99%' |
| 8 | 'meta' | 13 | '2.78%' |
| 9 | 'h3' | 9 | '1.92%' |
| 10 | 'link' | 7 | '1.50%' |
| 11 | 'br' | 6 | '1.28%' |
| 12 | 'section' | 4 | '0.85%' |
| 13 | 'ul' | 2 | '0.43%' |
| 14 | 'html' | 1 | '0.21%' |
| 15 | 'head' | 1 | '0.21%' |
| 16 | 'title' | 1 | '0.21%' |
| 17 | 'style' | 1 | '0.21%' |
| 18 | 'body' | 1 | '0.21%' |
| 19 | 'header' | 1 | '0.21%' |
| 20 | 'main' | 1 | '0.21%' |
| 21 | 'input' | 1 | '0.21%' |
| 22 | 'footer' | 1 | '0.21%' |
由此可见，图虫首页的语义化程度达到了67.71%，在使用了语义化标签后，仅从HTML部分代码观看，就能了解整个网页的结构，非常清晰明了，能够非常方便后期维护以及团队协作。
