HTML语义化案例分析 ｜ 青训营

HTML语义化的优点

在项目中采用 HTML 语义化，有以下的无障碍优点：

1. 更便于开发 — 可以使 HTML代码更易于理解，同时能够轻松地实现一些功能。
2. 更适配移动端 — 语义化的 HTML 文件比非语义化的 HTML 文件更加轻便，并且更易于响应式开发。
3. 更便于 SEO 优化 — 搜索引擎更加重视存在于标题、链接等元素中的关键字，与使用非语义化的<div>标签相比，采用 HTML 语义化可以增强网页在搜索引擎中的可见性，使其更容易被用户搜索到。

对于屏幕阅读器用户来讲，最佳辅助功能之一是拥有标题，段落，列表等内容的良好结构。一个良好的语义化示例如下：

<h1>My heading</h1>

<p>This is the first section of my document.</p>

<p>I'll add another paragraph here too.</p>

<ol>
  <li>Here is</li>
  <li>a list for</li>
  <li>you to read</li>
</ol>

<h2>My subheading</h2>

<p>
  This is the first subsection of my document. I'd love people to be able to find this content!
</p>

<h2>My 2nd subheading</h2>

<p>
  This is the second subsection of my content. I think is more interesting than the last one.
</p>

屏幕阅读器将会阅读每个标题，告知用户标题内容，段落等等。阅读器会在每个元素之间停顿，使用户可以按照自己的节奏前进。在许多屏幕阅读器中，用户可以跳转到下一个/上一个标题，还可以显示所有标题的列表，使用户能够方便地浏览和查找特定内容，就像使用便捷的目录一样。

有时，人们可能会使用展示性的HTML和换行符来编写标题、段落等，如下所示：

<font size="7">My heading</font> <br /><br />
This is the first section of my document.
<br /><br />
I'll add another paragraph here too.
<br /><br />
1. Here is
<br /><br />
2. a list for
<br /><br />
3. you to read
<br /><br />
<font size="5">My subheading</font>
<br /><br />
This is the first subsection of my document. I'd love people to be able to find this content!
<br /><br />
<font size="5">My 2nd subheading</font>
<br /><br />
This is the second subsection of my content. I think is more interesting than the last one.

然而，这种方式对于屏幕阅读器来说没有任何结构信息，因此无法构建有用的目录，整个页面将被视为一个大块内容，从而导致阅读器一次性读出所有内容。此外，除了无障碍性问题外，这种写法还可能使得使用CSS进行样式设计更加困难，或者使用JavaScript进行操作时也更具有挑战性，因为缺乏可用作选择器的元素。

实际网站分析

以 MDN 网站任意一篇文章的页面为例，使用了以下等语义化标签：

• <main>：用来包裹网页的主要内容，通常是页面上最核心的部分。使用<main>可以帮助屏幕阅读器和搜索引擎理解哪些内容是页面的主要焦点。这对于提高可访问性和SEO很重要。

• <aside>：用于定义页面的侧边栏内容，通常包含与主要内容相关但不是核心的信息。例如，侧边栏可能包含相关文章链接、广告或其他补充信息。这可以帮助用户更好地理解页面的上下文。

• <header>：用来标识网站顶部的内容区域，通常包含网站的标题、标志、导航菜单和其他与页面头部相关的内容。这有助于用户迅速识别页面所属的网站，提高导航的易用性。

• <nav>：用于定义导航菜单，其中包含指向网站不同部分或页面的链接。通过使用<nav>，开发者可以明确指出哪些内容是导航链接，帮助用户更轻松地浏览网站。

• <article>：用来标识独立的、完整的文章内容。这有助于搜索引擎更好地索引页面，并且让阅读器能够单独抽取和理解这篇独立的文章。例如，新闻文章、博客帖子或论坛帖子都可以使用<article>。

• <section>：用来将页面内容划分为逻辑上相关的部分，帮助组织内容并增强可读性。一个<section>可以包含一个主题或话题，有助于将页面分成易于管理的部分。

• <h1>：<h1>到<h6>是标题元素，用来表示不同级别的标题。<h1>通常用于页面的主标题，而后续级别的标题则表示更小的子标题。正确使用标题元素可以帮助搜索引擎理解内容的结构，同时也让屏幕阅读器用户更轻松地浏览页面。

• <footer>：位于页面底部，通常包含版权信息、联系方式、社交媒体链接和其他页脚相关内容。这可以为用户提供与网站相关的重要信息，同时也有助于界定页面的结束。

通过合理使用这些语义化的HTML元素，可以为用户和开发者提供更好的网页体验，同时提高搜索引擎优化和可访问性水平。

非语义化标签 VS 语义化标签

语义化标签的代码更具有可读性和可理解性。每个标签都传达了明确的内容意义，有助于开发者和工具更好地理解页面的结构。这种结构也有助于提高可访问性和SEO效果，使页面内容更容易被搜索引擎索引和用户理解。

反之，非语义化标签的代码虽然可以达到样式目的，但缺乏明确的含义，可能需要依赖大量的CSS和JavaScript来实现期望的样式和功能，不利于可维护性和可访问性，不利于SEO优化，搜索引擎难以理解页面的关键内容。