跳到主要内容

语义化HTML

提示
  1. 语义化与非语义化标签：HTML标签分为语义化标签（如<h1>, <footer>, <nav>）和非语义化标签（如<div>, <span>），语义化标签提供内容的额外含义。
  2. 语义化标签的作用：语义化标签清晰地定义了代码的目的和内容类型，易于阅读和理解。
  3. 语义化HTML的好处：使用语义化HTML能够提高代码的可读性，增强网站的可访问性，有助于更好的搜索引擎优化（SEO）。

在 HTML 中，标签可以根据语义被分为两类：

  • 语义化标签（Semantic Tag）
  • 非语义化标签（Non-semantic Tag）

语义化 HTML 元素清晰地定义了代码的目的和含义。

语义化标签​

那些准确描述其目的并描述其内容类型的标签被称为语义化标签。例如，

<h1>标题</h1>

从上述代码中，我们可以准确判断 <h1> 标签内的内容是一个标题。

语义化标签的一些例子包括 <h1>-<h6>、<form>、<table>、<main> 等

非语义化标签​

HTML 非语义化标签没有特定的含义或目的。它们用于创建通用的内容容器，而不提供任何额外的含义或上下文。例如，

<span>一些文本</span>

从上述代码中，我们无法提取文本的含义。这段代码可能来自文档的任何部分，因此它不会为文档增加语义价值。

非语义化标签的一些例子包括 <div>、<span> 等

一些语义化标签的例子​

有许多语义化 HTML 标签可以用来赋予网页内容意义。一些语义化 HTML 标签的例子包括：

语义化标签描述
<p>定义文档的一个段落
<header>定义文档或文档部分的头部
<footer>定义文档或文档部分的尾部
<nav>定义页面的一个包含导航链接的部分
<article>用于指定独立的、自成一体的内容
<aside>定义与其所处内容不同的一些内容，更像是一个侧边栏
<main>指定文档的主要内容
<section>定义文档的一个区段
<details>定义用户可以查看或隐藏的附加细节
<summary>定义 <details> 元素的可见标题

为什么使用语义化 HTML？​

我们使用语义化 HTML 是因为它使得：

  • 代码更易于阅读
  • 网站更易于访问
  • 有助于更好的搜索引擎优化（SEO）

我们将详细探讨这些方面。

语义化 HTML 使代码更易于阅读​

一些语义化 HTML 标签，如 <main>、<aside>、<header> 等，并没有附加功能，其行为与 <div> 标签相同。然而，这些语义化标签使代码更易于阅读。

让我们看以下两个例子。

使用语义化标签

<body>
  <header>
    <h1>标题</h1>
  </header>
  <section>
    <main>
      <article>这是网站的主要内容。</article>
    </main>
    <aside>额外信息。</aside>
  </section>
  <footer>版权所有 2022</footer>
</body>

浏览器输出 使用语义化代码的示例 HTML 文档

使用 <div> 标签

<body>
    <div>
        <h1>标题</h1>
    </div>
    <div>
        <div>
            <div>
                这是网站的主要内容。
            </div>
        </div>
        <div>额外信息。</aside>
        </div>
        <div>版权所有 2022</footer>
</body>

浏览器输出

不使用语义化代码的示例 HTML 文档

正如您可以看到的那样，这两个示例创建了相同的输出。但是，第一个示例更容易理解。虽然这只是一个小例子，但在大型文档的情况下，它可能会为开发人员节省数小时的时间。

语义化 HTML 使网站更具可访问性​

语义化 HTML 可以帮助提高残障人士的可访问性，因为它允许辅助技术（如屏幕阅读器）更轻松地解释和浏览页面的内容。例如，

使用 <h1> 标签来表示主标题，而不仅仅是使用 CSS 使文本变得大而粗，可以使屏幕阅读器正确识别内容为标题并赋予适当的重要性级别。

这有助于视力受损的用户更好地理解页面的结构和层次结构。

语义化 HTML 有助于更好的搜索引擎优化（SEO）​

语义标签使搜索引擎更容易索引内容。它还有助于识别网页上的重要关键词，因为它们为内容提供了清晰的结构和层次结构。

例如，使用 <h1> 标签表示页面的主标题，使用 <h2> 和 <h3> 标签表示副标题，使用户和搜索引擎可以轻松识别页面上最重要的关键词。

最后于 更新