语义 HTML。是什么、为什么以及如何

在我的上一篇文章中，我们学习了如何创建布局模型，以帮助开发人员创建像素完美的网站。然而，在开始将此模型转换为 HTML 和 CSS 之前，有一个先决条件：语义 HTML。

什么

语义 HTML 帮助开发者和浏览器打造出色的开发体验和无障碍访问体验。根据W3Schools的定义，语义元素能够清晰地向浏览器和开发者描述其含义。

为什么

它的主要优势之一，或许也是最重要的优势，就是它有助于提升网站的可访问性。屏幕阅读器或任何辅助设备都会扫描网页，寻找任何赋予其含义的元素，例如“ ”，从而识别出这是一个<p></p>段落或<header></header>标题。

无障碍网站能够向所有类型的用户提供内容，这是任何网站和网页开发者的主要目标。不仅如此，它还能带来诸多益处，例如避免诉讼（例如新闻报道）、提升 SEO 效果，以及发现原本无法发现的可用性问题。因此，即使开发网站需要投入更多精力和精力，但额外的时间绝对值得。

别忘了，除了语义化 HTML 之外，网站无障碍访问还有很多其他方面，例如图片的 alt 值、aria 标签以及正确的颜色对比度。不妨看看这个评估工具，它能帮助你在项目中打造无障碍体验。

语义 HTML 提供的其他好处：

更轻松的开发体验。开发人员更容易理解<button></button>触发某些事件的意义，而不是<div></div>通过事件监听器。
更适合移动设备。根据Mozilla的说法，语义化的 HTML 文件比非语义化的意大利面条式代码更轻量。而且，它更容易实现响应式设计。
有利于 SEO。搜索引擎更重视链接、标题或页脚中的关键词，而不是简单的div“s”或span“s”中的关键词。这意味着我们的网站更容易被客户发现。

如何

既然我们已经知道语义化 HTML 极其重要，那么我们必须学习如何在新旧项目中应用它。语义化标签共有 13 个，但最常用的是、、、、article和。aside接下来是一份速查表footer，它能帮助您开发语义化网站。同样，我建议您查看这篇W3Schools 文章中的其他内容。headernavsection

一旦您学习并实践了这些标签，将来编写语义站点的代码就会变得容易得多，并且您会发现了解它们使您与许多开发人员区别开来。

示例

这是一个我们不应该做的事情的例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />   
    <title>Non-Semantic HTML</title>
  </head>
  <body>
    <div class="navigation">
      <span>Logo<span>        
      <div aria-label="menu" class="navigation__button" />
      <div class="navigation__links">
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
      </div>
    </div>
    <div class="hero">
      <img class="hero__video" alt="Promotion video" src="assets/video.png" />
      <div class="hero__left">
        <div class="hero__text-box">
          <h1 class="heading-primary">Work around you and your team</h1>
          <h3 class="text">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus lacus ac justo mollis hendrerit. Nulla justo diam, efficitur eu dolor non, mollis semper urna.
          </h3>
          <div class="btn btn--purple">get started</div>
        </div>        
      </div>
      <img class="hero__image" alt="Colorful waves" src="assets/groove.png" />
    </div>    
  </body>
</html>

这对于开发人员来说极其难以理解和长期维护；想象一下看到数百个这样的标签。如果我们没有编写这些类，我们就需要不断检查每个元素并了解它们在网站上的含义。同样，屏幕阅读器和浏览器也难以解析这些类，这会降低我们的 SEO 效果和覆盖范围。

现在，如果我们将其转换为语义 HTML，它将如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="index.css" />
    <title>Pixel Perfect Layout</title>
  </head>
  <body>
    <header class="navigation">
      <h1>Logo<h1>     
      <button aria-label="menu" class="navigation__button"/>     
      <nav class="navigation__links">
        <!-- 
          Using lists helps screen readers 
          receive orienting information about 
          related content.
        -->
        <ul>
          <li>
            <a href="/">Home</a>
          </li>
          <li>
            <a href="/about">About</a>
          </li>
          <li>
            <a href="/contact">Contact</a>
          </li>
        <ul>
      </nav>
    </header>
    <section class="hero">
      <img class="hero__video" alt="Promotion video" src="assets/video.png" />
      <div class="hero__left">
        <header class="hero__text-box">
          <h1 class="heading-primary">Work around you and your team</h1>
          <p class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus lacus ac justo mollis hendrerit. Nulla justo diam, efficitur eu dolor non, mollis semper urna.
          </p>
          <button class="btn btn--purple">get started</button>
        </header>      
      </div>
      <img class="hero__image" alt="Colorful waves" src="assets/groove.png" />
    </section>
  </body>
</html>

我们可能会发现，新代码对开发者来说非常易读。此外，浏览器和屏幕阅读器也能高效地解析它。

结论

语义化 HTML 对用户、开发者和浏览器都有很多重要的好处。对于我们这些 Web 开发者来说，编写易于理解且高效的 HTML 必须成为一项基本实践。它不仅能提高开发者的可读性，还能提升用户体验，而用户体验正是任何网站最重要的目标。

现在我们已经了解了如何创建布局模型和语义化 HTML，可以开始创建令人惊叹的布局了。在本系列的最后一部分，我们将把流畅的设计转化为响应式、高效的 HTML 和 CSS。

想要了解更多最新的 Web 开发内容，请在Twitter和Dev.to上关注我！感谢阅读！😎

你知道我有一份新闻通讯吗？📬

如果您想在我发布新博客文章时收到通知并获得精彩的每周资源以保持领先地位，请访问https://jfelix.info/newsletter。

鏂囩珷鏉ユ簮锛�https://dev.to/joserfelix/semantic-html-what-why-and-how-14n0