HTML语义化的案例分析 | 豆包MarsCode AI刷题

语义化做法：

• 文章标题通常会用

-

标签来表示不同级别的标题。比如一篇新闻报道的主标题会用

，副标题可能用

，这样搜索引擎和屏幕阅读器等能轻易识别出内容的层级结构，也方便开发者后续维护和样式调整。例如：

重大突发！某地发生地震

目前已造成一定人员伤亡和财产损失

具体情况是……（正文内容）

标签清晰划分，列表内容会用

（无序列表）或
（有序列表）搭配
1. 标签来呈现。比如新闻中的相关事件列举：
   • 已派出多支救援队伍赶赴现场
   • 当地政府启动应急响应机制
   非语义化对比： 如果不用语义化标签，可能就全部用
   标签来包裹内容，像这样：

   重大突发！某地发生地震

   目前已造成一定人员伤亡和财产损失

   具体情况是……（正文内容）

   这样的话，搜索引擎难以准确判断哪些是重要标题，屏幕阅读器也不能很好地为视障用户传达内容层级，而且对于开发者来说，后期要调整样式或者对内容进行提取等操作就会更麻烦，因为无法直观从标签判断内容属性。

   电商类网站（如淘宝商品详情页）

   语义化做法：

   • 商品名称会用合适的标题标签，比如

   突出主商品名。

   某品牌智能手机

   这款手机具有……（商品描述段落）

   • 商品的参数列表可能会用定义列表

   ，其中每个参数用

   表示定义术语（参数名），

   表示定义描述（参数值）。

   屏幕尺寸

   6.5英寸

   内存容量

   8GB

   非语义化对比： 若都用非语义化的

   标签来构建：

   某品牌智能手机

   这款手机具有……（商品描述段落）

   屏幕尺寸：6.5英寸

   内存容量：8GB

   同样，搜索引擎无法很好地理解各部分内容的准确含义，不利于商品信息在搜索结果中的准确呈现。对于开发者而言，后续修改样式等操作也缺乏清晰的结构依据。

   企业官网（以某科技公司官网为例）

   语义化做法：

   • 公司名称、logo所在区域可能会用

   标签来标识这是页面的头部区域，里面的导航栏用 标签。

   某科技公司

   • 首页
   • 产品
   • 关于我们

   • 公司的主要业务介绍、服务内容等可以放在 或 标签内，方便区分不同的内容模块。

   非语义化对比： 要是都用

   标签：

   某科技公司

   • 首页
   • 产品
   • 关于我们

   （业务介绍内容）

   这使得页面结构不清晰，搜索引擎难以准确抓取关键信息，而且对于网站的可维护性和扩展性也较差，因为没有明确的语义标识来指导后续的开发和优化工作。

   总的来说，使用HTML语义化标签能让网页结构更清晰，便于搜索引擎优化、提升可访问性以及方便开发者后续的维护和扩展等，而非语义化标签则会在这些方面带来诸多不便。