一、什么是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部分代码观看,就能了解整个网页的结构,非常清晰明了,能够非常方便后期维护以及团队协作。