相对于非语义化的元素 <div> 和 <span> ，使用含有语义的元素能更清晰地描述内容。

$$tip

人虽然通过通过元素内容了解元素的作用，但是浏览器、爬虫、辅助阅读工具等却不可以。

尽量使用语义化的元素，可以让辅助阅读程序更容易理解网站的内容，帮助视觉障碍人群更方便地使用网站，也可帮助搜索引擎的爬虫更好地解析网站内容。

$$

一个非语义化的页面：

<div>
    <h1>编程教室</h1>
    <span>
        <a href="#">主页</a>
        <a href="#">课程</a>
        <a href="#">介绍</a>
        <a href="#">登录</a>
    </span>
</div>
<div>
    <p>学习编程是件很开心的事情。</p>
    <div>
        <img src="/coding.png" alt="编程" />
        <p>小猫爱编程</p>
    </div>
</div>
<div>©copyright 2022</div>

$$demo

<div style="height: 432px"> <div>

<h1>编程教室</h1>

<span>

<a href="#">主页</a> <a href="#">课程</a> <a href="#">介绍</a> <a href="#">登录</a>

</span>

</div>

<div>

<p>学习编程是件很开心的事情。</p>

<div>

<img src="/coding.png" alt="编程" />

<p>小猫爱编程</p>

</div>

</div>

<div>©copyright 2022</div> </div>

$$

一个语义化的页面：

<header>
    <h1>编程教室</h1>
    <nav>
        <a href="#">主页</a>
        <a href="#">课程</a>
        <a href="#">介绍</a>
        <a href="#">登录</a>
    </nav>
</header>
<article>
    <p>学习编程是件很开心的事情。</p>
    <figure>
        <img src="/coding.png" alt="编程" />
        <figcaption>小猫爱编程</figcaption>
    </figure>
</article>
<footer>©copyright 2022</footer>

$$demo <div style="height: 432px"> <header> <h1>编程教室</h1> <nav> <a href="#">主页</a> <a href="#">课程</a> <a href="#">介绍</a> <a href="#">登录</a> </nav> </header> <article> <p>学习编程是件很开心的事情。</p> <figure> <img src="/coding.png" alt="编程" /> <figcaption>小猫爱编程</figcaption> </figure> </article> <footer>©copyright 2022</footer> </div> $$

$$tip

与非语义化的页面相比，程序便可以根据 nav 元素定位导航栏，通过 article 元素定位元素内容，通过 footer 元素定位页尾。

试想一下，视觉障碍人士的辅助阅读工具就可以通过 nav 元素念出网站上有哪些页面，通过 article 元素念出页面的主要内容，而不是去念一些无关的广告内容。

爬虫也可以快速抓取你页面的主体内容，放到百度谷歌等的搜索结果当中。

如此可见一个语义化的网站的好处。

$$

常用的语义化元素

以下是一些常用的语义化元素，大部分元素在 HTML5 标准中定义。

元素	描述
<article>	文章
<aside>	侧边栏
<details>	文档的详细信息
<figcaption>	<figure> 的说明文本
<figure>	定义独立的内容，图片、代码、列表等等
<footer>	文档的页脚、底部栏等
<header>	文档的页眉、头部栏等
<main>	文档的主体内容
<mark>	标记文本
<nav>	导航栏
<section>	文档中的区块
<summary>	<details> 的标题
<time>	定义时间
<em>	强调文本
<strong>	重要文本
<del>	删除文本
<ins>	插入文本