HTML语义化的案例分析 ｜ 青训营

一、语义化标签使用意义

1. 标签具有语言的意义，使得代码变得更易读
2. 有利于爬虫抓取更多信息，提升网站排名

二、常用语义化布局标签

1. 页面头部：header
   
   • 含有网站logo、导航、搜索框
2. 页面主体：main
   
   • 含有网站主要部分
3. 页面底部：footer
   
   • 含有网站服务信息、版权数据
4. 其他：
   
   • 文章：article；侧边栏：aside；导航：nav；区域：section

三、分析实际网站HTML结构，对比非语义化标签差异

1. about.google/
   分析网站结构：该网站采用语义化标签布局页面，总体界面布局采用header+main+footer header标签对应网页头部logo区域
   main标签对应网页主体区域，多用section标签划分一个区域，类似于这样的一个区域 footer标签对应网页底部区域
2. blog.51cto.com/u_15722979/…
   分析网站结构：多为div布局
3. 对比分析：
   
   • 采用语义化方式，网页开发人员需要多记几个标签名，但同时可提升代码的易读性
     
   • 采用div非语义化布局方式，无额外的记忆负担，但其他开发人员需要仔细研读类名，才能准确知道代码编写结构，易读性有待提升