HTML中语义元素出现的背景

在我们的web页面中，常常包含头部、页脚、导航栏、主题内容等多个结构作为通用的页面结构。

在HTML4及之前的版本中，主要使用 < div > < span > 等通用标签来设计页面的结构；

使用 < div > < span > 等通用标签设计页面结构内容的劣势：

1. 结构不清晰

   对于 < div > < span > 标签，无具体的含义，页面内容过多时，会出现大量的div和span标签，此时无法直观清晰地查看页面结构；

2. 降低搜索效率

   对于通过搜索引擎进行内容定位时， < div > < span > 标签无法明确提供内容结构信息，搜索难度增大；

3. 代码设计可读性差，可维护性差
   • 每个结构使用 < div > < span > 来定义，设置每个结构对应的样式时，需要使用 class 或 id 属性 增加页面结构的选择器属性，使得代码非常冗余；
   • 代码开发中会出现多层 `div` 嵌套，阅读难度增大。

HTML5 语义元素

• 语义元素

  标签名可以直接描述清楚标签意义， 如 < a > -链接， < form > -表单， < table > -表格， < img > -图片;

• 无语义元素

  无法清晰描述其意义的标签，如 < div > < span > 。

HTML5中新增了页面结构的语义元素

• < header > 定义页面的头部
• < nav > 定义导航链接栏
• < aside > 定义侧边栏，显示文章列表
• < article > 定义文章，定义文档内容
• < section > 定义章节，定义文档中的章节
• < footer > 定义页面的页脚
• 等等

对应的页面结构图

如下所示

语义化标签的意义

1. 提高代码可读性

   通过增加带结构意义的语义标签，每个标签直接反映对应的结构内容用途，提高了代码的可读性；

2. 简化开发流程

   结构化的代码在指定开发规范时，每个结构更加清晰，有助于标准化的开发流程，并减少冗余代码；

3. 提高维护效率

   在团队工作中，结构化的代码增加可读性，更方便于协作开发和后续的迭代；

4. 提高搜索效率

   对于搜索引擎，通过直接抓取 < article > < section > 等核心内容提高搜索效率；

5. 提高数据分析效率

   在进行数据分析时，经常需要用爬虫来获取信息，可以通过结构化标签针对性的抓取内容，进行数据分析。