语义 HTML：2019 年最佳实践

已发表: 2019-08-31

语义 HTML 现在比以往任何时候都更重要，特别是因为谷歌不断地改变页面排名算法。每个查询中的热门位置变得越来越具有竞争力。您需要一个秘密武器，而语义 HTML 是您的武器库中的好武器。您可能会在您的网站上使用一些语义代码，但是您为重要内容插入的内容越多，搜索引擎就越能抓取您的网站并了解您为潜在访问者提供的内容。

什么是语义 HTML？

简而言之，语义 HTML 是人类可以阅读和理解的 HTML。任何人类，不仅仅是编码人员和开发人员，如果人类可以更轻松地阅读它，机器人也可以。如果机器人可以更轻松地阅读您网站的结构，那么他们就可以就您的网站在各种搜索查询中的表现做出更明智的决定。

基本上，您是在告诉搜索引擎爬虫“这是一篇博文”或“这是一个导航菜单”或“嘿，这只是页脚，所以请不要因为重复的内容而伤害我。”

但它是如何做到的？嗯，它使用了大量非常具体的特殊 HTML5 标签。让我们深入研究一些例子，你可以自己看看。

文本格式

文本格式是最常见的语义 HTML，您每天都会看到它。以前，单个字母用于表示格式，代表粗体、斜体、下划线等。

<p>This is <b>bold text</b></p>
<p>While <i>this is italics</i>, and this is <u>underlined</u>.</p>

使用语义 HTML，您可以使用从强到粗的文本并显示其强烈的重要性，或者使用em来斜体（或强调）文本。有趣的是， U仍然用于给文本加下划线；但是，MDN 建议通过带有text-decoration: underline; 的CSS 对其进行样式设置。来区分它。

<p>This is <strong>bold text</strong>, while <em>this is italics</em>.</p>
<p>This would be <u style=text-decoration: #222000 wavy underline;">underlined</u>.</p>

我们也喜欢用del来展示~~删除线~~删除的文本。

<p>We are also fond of <em>del</em> to show <del>strikethrough</del> deleted text.</p>

我们认为我们将以突出显示结束对语义 HTML 文本格式的研究。字面上地。如果您在文本周围使用标记，那么您将突出显示您所包含的任何内容。

<p>Make sure that you remember <strong>this term for your test</strong>.
<p>But you should remember <mark>this information about how to use it in context</mark>.</p> 
<p>If you do that, you will be fine.</p>

MDN 说这不能像使用strong那样使用。您使用strong表示文本中重要的内容，并使用mark突出显示与理解相关的内容。

部分、标题和菜单

也许最好的开始方式是使用页眉和页脚。您知道，每个人最喜欢构建和处理的网站部分。使用传统的 HTML，您可能有一个这样编码的标头：

<div>
  <h1>Page Title Goes here</h1>
    <p>Tagline!</p>
  <div>
  	<ul>
  	  <li><a href="example.com">Home Page Link</a></li>
  	  <li><a href="example.com">Blog Page Link</a></li>
  	  <li><a href="example.com">Podcast Page Link</a></li>
  	</ul>
   </div>
</div>

查看该代码，您可以看到所有内容。然而，只有当你知道你在看什么的时候。您有几个嵌套的 div（容器），它们将标题、标语和（非常基本的）菜单分开。这种设置没有任何问题，但当然也没有什么真正正确的。如果你更进一步，你可以使用 CSS id 和 class 标记来使内容更具可读性。

 <div class="header" id="hero-section">
  <h1 class="page-title">Page Title Goes here</h1>
    <p>Tagline!</p>
  <div class="header-menu">
  	<ul>
  	  <li><a href="example.com">Home Page Link</a></li>
  	  <li><a href="example.com">Blog Page Link</a></li>
  	  <li><a href="example.com">Podcast Page Link</a></li>
  	</ul>
   </div>
</div>

使用语义 HTML，事情看起来更清晰、更易于阅读，您不必依赖 div，并且您选择的类和 id 可以仅用于样式。

<header>
  <h1>Page Title Goes Here</h1>
    <p>Tagline!</p>
  <nav>
    <a href="example.com">Home Page Link</a>
    <a href="example.com">Home Page Link</a>
    <a href="example.com">Home Page Link</a>
  </nav>
</header>

这不是更容易阅读和了解发生了什么吗？您有一个标题标签，让您知道这是页面的标题，还有一个导航标签，指示导航菜单。（它甚至足够聪明，不需要额外的样式来水平列出条目。）

从技术上讲，您还可以使用以下代码，如果想确保您的样式正确应用，以及有一种方法可以链接到网站的特定部分。在这种情况下， section标签的工作方式与前面示例中div标签的工作方式类似。当然，除了它是可读的并且对人眼有意义。

<section id="hero-section">
  <header>
    <h1>Page Title Goes Here</h1>
      <p>Tagline!</p>
    <nav>
      <a href="example.com">Home Page Link</a>
      <a href="example.com">Home Page Link</a>
      <a href="example.com">Home Page Link</a>
    </nav>
  </header>
</section>

此外，请注意id="hero-section" 的使用，这是可选步骤的可选步骤，但您可以将section样式设置为 CSS 选择器本身。

外卖

在您可能想使用外部 div 的地方使用section 。
使用可以使用header来指示页面的哪一部分是您的页眉。您还可以在文章或帖子中使用它来指示该帖子的标题，该标题与网站本身是分开的。
为站点设置主导航菜单时使用导航。导航不是搜索引擎查找链接的一种方式，而是查找用户浏览您网站的主要方式。任何链接集合（如面包屑等）也可以包含在导航中

页脚

关于页脚不需要说太多，但我们必须提到它。在许多方面，它是 header 的直接类比。传统的基本页脚可能如下所示：

<div class="site-footer>
    <p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
    <a href="example.com/contact">Contact Us!</a>
    <img src="/logo.png">
</div>

而语义页脚可能如下所示：

<footer>
    <p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
    <a href="example.com/contact">Contact Us!</a>
    <img src="/logo.png">
</footer>

诚然，基本设置在这里没有太大区别，但是看到您网站的机器人会很感激您的澄清。另请记住，您可以将页脚用于页面、帖子或站点页脚。

主要、文章和旁白

语义 HTML 的另一个主要组件是文章标签。除此之外，还有一边。这两者都可以让您构建网站的实际内容，以便搜索引擎知道主要文本是什么，从而让他们专注于您正在解决的问题和您关注的主题。

通常，博客文章或页面是一个简单的 HTML 文档，但页眉、页脚、内容、侧边栏、插入内容等都可以混为一谈。

<body>
  <div class="post-header>
    <h1>Article title</h1>
  </div>
  <div class="post-content>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
      <div class="article-aside">
        <p>Text block</p>
      </div>
  </div>
 <div class="post-footer">
    <img src="/subscribe.png">
  </div>
</body>

现在，这不是漂亮的代码，但有效。然而，它并不漂亮，它需要相当多的 CSS 才能在渲染时看起来几乎可读。通过使用main 、 article和side ，您可以轻松构建页面以提高可读性。

<main>
  <article>
    <header>
      <h1>Article title</h1>
    </header>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
      <p>Paragraph 3</p>
      <aside>
        <p>Text block</p>
      </aside>
    <footer>
      <img src="/subscribe.png">
    </footer>
  </article>
</main>

但是，您应该注意，您只能一次指示页面的主要内容。这意味着你可以只使用一个主每页。您可以在单个主条目下嵌套多篇文章以指示目录或独立内容目录（您甚至可以使用多个H1标签以这种方式向搜索引擎显示这些帖子是独立的。

外卖

每页使用一个主标签
每页可以使用多个文章标签来标识单独的、独立的内容（包括每页多个H1 ）
Aside可用作侧边栏或插入帖子或页面

其他较少使用的元素

诚然，我们上面讨论的元素和标签是语义 HTML 中最常用的部分。毕竟，互联网上几乎每个网站都包含它们的某种组合，而其余支持的语义标签则更加具体和有限。然而，它们在实现其目的时同样有用，并且它们在交互和搜索索引方面有很大帮助。

详细信息和摘要

详细信息和摘要元素创建了一个可以对用户隐藏的扩展内容层，除非他们专门激活它（如 Divi 或其他页面构建器中的手风琴模块）。

<details>
  <summary>Headline that will be shown and clicked on</summary>
    <p>Content that will be hidden</p>
    <a href="example.com">Link that will be hidden</a>
</details>

摘要的任何子项都将隐藏和展开，您可以通过关闭详细信息元素来添加其他文本。

图和图说明

这些是不言自明的。图是您帖子中的某种视觉辅助工具。照片、图表、嵌入的 YouTube 视频，也许吧。那么， figcaption就是您添加的标题，用于解释上图的用法。虽然它们本质上是使用语义的技术，但您可以将其用于您想要专门索引的任何内容，作为主要帖子或页面中的辅助工具。

<figure>
  <img src="/chart.jpg">
    <figcaption>Explanation of this chart in short text</figcaption>
</figure>

这些标签是在 Google 上获取精选片段的绝佳方式，例如，当您专门指出问题的解决方案或解释时。我们建议使用这些，因为它不仅减少了用于添加标题和样式的代码，而且还将图形和标题保持为页面的单个元素，而不是单独的元素。

时间

时间是很少使用的标签之一，但是当您遇到特别需要搜索引擎知道所涉及的时间或日期的事件或特殊场合时，请使用它而不是简单地加粗或强调文本。

<article>
  <h1>Title</h1>
   <p>The event will begin on <time datetime="2019-12-25">December 25th</time> and last for <time datetime="PT12H30M0S">12 and a half hours</time>.</p>
</article>

将datetime与time元素一起使用可以使您的开发更好地与时间挂钩，然后您可以将其与日历和各种其他 API 集成。您将能够从您的网站发送提醒，人们会更频繁地回来。

结论

虽然使用非语义 HTML 并没有错，但如果您在工作中养成这种习惯，您会发现您的搜索引擎排名有所提高。这很重要，但可能更重要的是，您将节省您在如何构建和设计网站样式方面的时间，并避免为跟随您的项目的人们带来很多麻烦和技术债务.

您遵循哪些语义 HTML 的最佳实践？

文章精选图片来自 whiteMocca / shutterstock.com