语义化标签

HTML语义化标签是HTML5引入的一个重要特性

常见的语义化标签：

<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>

布局如下

底层实现逻辑&&好处

语义化标签其实底层实现逻辑和一般的标签是一样的，是一个js类。但是也有一些细微的差别

浏览器搜索层面

首先，语义化标签在浏览器搜索层面做出了卓越提升，有更好的可访问性，更好的seo效果以及更佳的浏览器兼容性，设备适配性。我们来一个个看他是如何做到的。

更好的可访问性：ARIA对象

ARIA (Accessible Rich Internet Applications，友好访问应用) 在es5中被加入到语义化标签的编程中，语义化标签何一般标签的一个很大的区别是它是有内置的默认ARIA角色的，这导致他能在内部对ARIA角色进行设置(一般的div需要手动），从而完成和屏幕阅读器的交互，通过ARIA文档的支持，达到提升可访问性的效果。

PS：ARIA使用方法：和role属性搭配使用，role用于设置非标准的tag的实际作用非标准的标签的实际作用，帮辅助工具辨识你这个标签干嘛的，ARIA就是辅助role来描述这个标签在可视化的情境中的具体信息。

更好的SEO效果

要理解他是如何实现的，我们就要先知道搜索引擎是如何进行爬虫的。

这是一个模拟爬虫思路的类，我们能看见浏览器的爬虫是提取页面结构和内容，从而分析处页面主要干嘛的。

<!-- 使用语义化标签 -->
<article>
  <header>
    <h1>文章标题</h1>
    <time datetime="2024-01-20">发布时间</time>
  </header>
  <section>
    <p>重要内容</p>
  </section>
</article>

<!-- 搜索引擎直接理解：
{
  type: 'article',
  title: '文章标题',
  publishTime: '2024-01-20',
  mainContent: '重要内容',
  importance: 0.9
}
-->

<!-- 使用div -->
<div class="article">
  <div class="header">
    <div class="title">文章标题</div>
    <div class="time">发布时间</div>
  </div>
  <div class="content">
    <div class="text">重要内容</div>
  </div>
</div>

<!-- 搜索引擎需要额外分析：
{
  type: '需要分析class判断类型',
  title: '需要分析层级判断是否是标题',
  publishTime: '需要分析上下文判断是否是时间',
  mainContent: '需要分析位置判断重要性',
  importance: '需要综合判断'
}
-->

由于浏览器的支持，搜索引擎能直接从语义化标签里面“提取”关键内容，少了分析这一步。除此之外，语义化标签能提供明确的内容结构，指示内容的类型和关系，所以对于浏览器，使用语义化标签的对象结构更加清晰，内容更加相关，更加重要，因此可以取得更高的SEO优先级。

更好的浏览器兼容性

他基本从这几方面实现更好的浏览器兼容性：

1.标准化行为   语义化标签在各个浏览器中有统一的默认行为俄日div可能需要处理额外的兼容性，比如给其添加class等

2.默认样式统一  无需重置默认样式，需要的css hac更少，并且能保证跨浏览器保持一致

3.降级处理  虽然html5标签时新提出的，但是他也提供成熟的降级处理方案，让旧版浏览器也支持，维护成本更低

作为HTML5标准的一部分，他有统一的实现标准和广泛的浏览器支持。

更好的设备适配性

浏览器会给语义化标签添加一些默认样式，比如说对于header：

header {
  display: block;
  margin: 0;  /* 清除边距 */
  width: 100%; /* 默认占满容器 */
}

其实改动并不多，不过可以这么说，他比一般的标签提供了一个更好的基础，让我们在实现响应式布局时更方便。

程序员编码方面

这些好处就很显而易见了。总结一下无外乎下面几点

代码更易读

结构更清晰

维护更方便

样式复用性更好