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

这么做可以让辅助程序更容易理解网站的内容，帮助视觉障碍人群更方便地使用网站，也可帮助搜索引擎的爬虫更好地解析网站内容。

一个非语义化的页面：

<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>

<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>

$$

一个语义化的页面：

<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

<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>

$$

常用的语义化元素

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

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