HTML语义化的案例分析(图虫)

22 阅读3分钟

一、什么是HTML语义化

<h1>文字内容1</h1> <span>文字内容2</span>

  • 上面的代码中,文字内容1所用标签为h1,h1具有标题一的含义,文字内容2所用标签为span,span标签则没有独特的含义。
  • HTML语义化指的是使用恰当语义的HTML标签,使页面具有良好的结构和含义,从而使机器和人都能快速理解网页内容。
  • 其实从我们开始学习HTML标签开始,就接触了各式各样的语义化标签,他们通常可以根据所使用的单词或缩写了解到他们的含义,而非语义化的标签其实只有div、span。

二、语义化标签的优势

  1. 代码结构清晰,方便阅读,有利于团队合作开发;
  2. 方便其他设备解析,以语义的方式来渲染网页;
  3. 有利于搜索引擎优化(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))

按回车执行后,即可得到如下统计数据:

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