语义化标签介绍
html 提供了大量语义化标签，希望开发者能尽可能地用正确的 HTML 标签来表达正确的意图。
以下是一些比较常用的语义化标签：
<header>：表示文档或节的页眉。
<nav>：表示导航链接。
<main>：表示文档的主体内容，一个页面只能出现一次。
<article>：表示一个可以独立展示或分发的内容块，比如新闻文章、博客文章等。
<aside>：表示一个页面或文章的旁注栏，比如侧边栏、广告等。
<footer>：表示文档或节的页脚。
以一个博客网页为例
- 博客网页的导航栏适合使用
<nav>标签 - 博客文章的标题适合使用
<header>标签 - 博客文章的文章内容适合使用
<article>标签
语义化的意义
与只会使用div标签开发相比，使用语义化标签有以下优点
- 更便于开发：语义化标签可以使代码中的HTML标签结构更易于理解，并且可以直接使用标签自带的属性和方法。
- 更适配移动端：语义化的 HTML 文件比非语义化的 HTML 文件更加轻便，并且更易于响应式开发。
- 更便于
SEO优化：比起使用非语义化的<div>标签，搜索引擎更加重视在“标题、链接等”里面的关键字，使用语义化可使网页更容易被用户搜索到。 - 更能兼容不同设备：不同设备和浏览器可以根据标签的语义来正确地解析和显示页面。
语义化案例分析
以搜索引擎必应为例：
- 搜索内容上方的元素都使用
<header>包裹起来，表示页面顶部的内容；页面底部的备案号使用<footer>标签，结构清晰。
- 搜索框使用
<form>标签中嵌套<input>标签实现，符合表单与输入框的语义，便于理解。
- 搜索框下方的选项卡使用
<nav>标签与<ul><li>结构实现，当网络较差，浏览器无法加载CSS时，选项链接仍然能用。
- 搜索结果使用
<main>标签，表示网页的主体内容。
- 右侧的相关搜索使用
<aside>标签，符合侧边栏的语义信息。
值得注意的是，必应在使用语义化标签的同时，还使用了 aria-label 属性标注了该标签下主要作用，增强了 html 的可读性。
在日常开发中使用语义化标签
- 使用合适的标签划分页面的结构，如：使用
<header>标签，<main>标签，<footer>标签划分页面的顶部，主要内容，底部，使html结构更加清晰。 - 合理运用语义化标签自身的属性，
markdown渲染后的代码块往往会使用<pre><code>标签，不仅符合语义化，还使用到了预定义格式文本、代码文本带来的样式属性。 - 减少使用
<div><span>标签，使用时可以想想该标签能否被合适的语义化标签替代。
