上查看所有课程
根据语义化，HTML 标签可分为两类：
- 语义化标签
- 非语义化标签
语义化标签
准确描述其用途并描述其内容类型的标签称为语义化标签。例如，
<h1>Header</h1>从上面的代码中，我们可以准确地知道 <h1> 标签内的内容是一个标题。
一些语义化标签的例子是：<h1>-<h6>、<form>、<table>、<main> 等。
非语义化标签
HTML 非语义化标签没有特定的含义或用途。它们用于为内容创建通用容器，而不提供任何额外的含义或上下文。例如，
<span>Some Text</span>从上面的代码中，我们无法提取文本的含义。这段代码可能来自文档的任何部分，因此它没有为文档添加语义价值。
一些非语义化标签的例子是：<div>、<span> 等。
一些语义化标签的示例
有许多语义化 HTML 标签可用于为网页内容赋予含义。一些语义化 HTML 标签包括：
| 语义化标签 | 描述 |
|---|---|
<p> |
定义文档的一个段落 |
<header> |
定义文档或文档某个部分的页眉 |
<footer> |
定义文档或文档某个部分的页脚 |
<nav> |
定义页面中包含导航链接的部分 |
<article> |
用于指定独立、自包含的内容 |
<aside> |
定义与放置它的内容旁边的某些内容。它更像一个侧边栏 |
<main> |
指定文档的主要内容 |
<section> |
定义文档的某个部分 |
<details> |
定义用户可以查看或隐藏的附加详细信息 |
<summary> |
定义 <details> 元素的可见标题 |
为什么要使用语义化 HTML？
我们使用语义化 HTML 是因为语义化 HTML 使得
- 使代码更易于阅读
- 使网站更具可访问性
- 带来更好的 SEO
我们将详细探讨其中的每一个。
语义化 HTML 使代码更易于阅读
像 <main>、<aside>、<header> 等一些语义化 HTML 标签没有附加功能，并且与 <div> 标签的作用相同。但是，这些语义化标签使代码更易于阅读。
让我们看以下两个示例。
使用语义化标签
<body>
<header>
<h1>Heading</h1>
</header>
<section>
<main>
<article>
This is the main content of the website.
</article>
</main>
<aside>Extra information.</aside>
</section>
<footer>Copyright 2022</footer>
</body>浏览器输出
使用 <div> 标签
<body>
<div>
<h1>Heading</h1>
</div>
<div>
<div>
<div>
This is the main content of the website.
</div>
</div>
<div>Extra information.</aside>
</div>
<div>Copyright 2022</footer>
</body>浏览器输出
如您所见，两个示例都产生了相同的输出。但是，第一个更容易理解。这是一个小示例，但对于大型文档，它可以为开发人员节省数小时的时间。
语义化 HTML 使网站更具可访问性
语义化 HTML 可以帮助残障人士提高网站的可访问性，因为它允许辅助技术（如屏幕阅读器）更轻松地解释和导航网页内容。例如，
使用 <h1> 标签表示主标题，而不是仅仅通过 CSS 将文本变得大而粗，这允许屏幕阅读器能够正确地将内容识别为标题，并赋予其适当的重要性级别。
这有助于视障用户更好地理解页面的结构和层次。
语义化 HTML 带来更好的 SEO
语义化标签使搜索引擎更容易索引内容。由于它们为内容提供了清晰的结构和层次，因此也有助于识别网页上的重要关键字。
例如，使用 <h1> 标签表示页面的主标题，使用 <h2> 和 <h3> 标签表示副标题，可以帮助用户和搜索引擎轻松识别页面上的most important keywords。