使用语义元素提升你的HTML

介绍

确保您的网站易于搜索引擎爬取和解析是非常重要的。同样重要的是，确保您的网站结构良好以使其对读者更易于访问。

您可以改善网站结构的一种方法是通过使用语义HTML元素。因此，在本篇文章中，我们将快速了解语义HTML元素是什么以及如何自己使用它们。

什么是语义元素？

语义元素只是具有意义的HTML元素，例如 <article>、<nav> 和 <footer>。这些可以使用非语义元素（如 <div> 和 <span>）替代。

例如，让我们假设我们有一个使用非语义HTML的基本博客文章页面布局：

<body>
    <div id="header">
    </div>
  
    <div id="navigation">
    </div>
  
    <div id="content">
        <div id="blog-content">
        </div>

        <div id="blog-sidebar">
        </div>
    </div>
  
    <div id="footer">
    </div>
</body>

如果我们想用语义元素改写这个结构，它可能看起来像这样：

<body>
    <header>
    </header>
  
    <nav>
    </nav>
  
    <main>
        <article>
        </article>

        <aside>
        </aside>
    </main>
  
    <footer>
    </footer>
</body>

如您所见，我们已删除所有的 <div> 元素，并用具有特定目的的元素替换了它们。

在非语义版本中，我们使用ID在标签上显示标签的用途。通常，ID被添加到HTML中，以便我们可以使用CSS（级联样式表）来样式特定的元素或使用JavaScript来操作它们。因此，通过使用语义标签，我们已减少了一名开发者查看HTML时的认知工作量。

以下是从 W3Schools 的便捷列表，显示了我们在构建网页时可以使用的一些不同的语义元素：

<article> - 定义独立的、自含内容的。
<aside> - 定义页面的其他内容。
<details> - 定义用户可以查看或隐藏的附加详细信息。
<figcaption> - 定义一个<figure>元素的标题。
<figure> - 指定独立的内容，如插图、图表等。
<footer> - 定义文档或部分的页脚。
<header> - 指定文档或部分的页眉。
<main> - 指定文档的主要内容。
<mark> - 定义标记的高亮文本。
<nav> - 定义导航链接。
<section> - 定义文档中的部分。
<summary> - 定义一个可见的<details>元素的标题。
<time> - 定义日期和时间。

如果你刚开始使用语义HTML并且想知道应该使用哪个元素，你可以查看《HTML5元素流程图》 - 由HTML5Doctor提供的"HTML5 Element Flowchart"。

提高无障碍性

使用语义HTML元素的一个巨大好处是它可以提高网站的无障碍性。例如，假设我们有HTML的两个版本

非语义版本

<p class="heading-1">
    Heading 1
</p>

<p class="heading-2">
    Heading 2
</p>

语义版本

<h1>
    Heading 1
</h1>

<h2>
    Heading 2
</h2>

为了本例的目的，我们将假设heading-1和heading-2CSS类应用于更改文本的外观并使其看起来像是用户想要的标题。我们还将假设在人类视觉观看页面的情况下，输出是相同的。

现在，尽管人类通过传统网络浏览器看到他们看起来相似，但屏幕阅读器将有所不同。屏幕阅读器不知道通过CSS和JS添加的样式和脚本，并由视力受损或失明的人使用，以便他们可以使用他们的计算机。实际上，根据AbilityNet，英国有近200万人生活在视力丧失中。

由于屏幕阅读器用户只能看到由HTML生成的结构，他们不会看到应用heading-1和heading-2样式后的文本外观。因此，用户不会有这两部分文本实际上是标题的认识。然而，通过使用<h1>和<h2>标签，屏幕阅读器能够检测到标题并按需朗读它们。

除了提高屏幕阅读器的无障碍性外，通过使用正确元素，您还可以提高页面的键盘无障碍性。例如，让我们假设我们有这个非语义HTML

<div class="btn">
    Play Audio
</div>

起初，这种样式对于观看者来说可能看起来没问题，因为btn样式将应用样式使其看起来像一个按钮。然而，用户无法使用键盘（通过按“Tab”）选择它，因此无法按“Enter”键（没有更好的词）来按它。要更改此，您可以更新元素以看起来更像是这个

<button class="btn">
    Play Audio
</button>

正如你所看到的，我们将<div>标签替换为使用<button>元素。我们还将保留“btn”类，这样按钮在传统浏览器中仍然可以按照预期的外观进行显示。但是，用户现在可以使用键盘选择它，屏幕阅读器也可以识别该元素为一个可以与之交互的实际按钮。

提高SEO

使用语义化HTML的另一个好处是它可以帮助SEO（搜索引擎优化）。当搜索引擎爬取你的网站进行索引时，它会查看你的网页结构。通过检查结构，它能够了解页面内容、页面上有哪种内容以及应该为哪些关键词进行排名。它是这样做的其中一种方式就是检查页面的标题。

继续上面的例子，爬虫以与屏幕阅读器相似的方式理解哪些文本是标题。因此，对于使元素成为标题来说并不重要，以便机器人可以快速了解你的页面内容以及它覆盖的内容类型。众所周知，越容易让机器人爬取和理解你的网站，就越能从搜索排名中获得好处。

作为一个小的补充说明，如果你想了解更多改进你网站的方法，请查看《17种让您的网站赢在起跑线上的方法》。

据Jason Barnard报道，Bing的Fabrice Canel表示，使用正确语义元素的页面比没有使用这些元素的页面具有SEO优势。他还说，Google的Martin Splitt在2020年也确认了这一点。所以，如果这不是开始使用语义化HTML的激励，我不知道还有什么是！

结论

希望这篇文章能让你对语义化元素的含义及其如何在HTML中使用它们有一个简要的了解。

如果你觉得这篇文章对你有所帮助，我非常愿意听说。同样，如果你有任何反馈可以改进这篇文章，我也非常乐意听到。

如果你有兴趣在每次我发布新文章时都得到更新，请自由注册我的通讯。

继续建造精彩的东西！🚀

介绍

什么是语义元素？

提高无障碍性

提高SEO

结论

你可能还会喜欢的其他文章

如何使用Larastan将你的Laravel应用从0升级到9

无需 traits 标准化 API 响应

在您的 Laravel 项图中通过 Discord 通知收集反馈