語義 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" 的使用，這是可選步驟的可選步驟，但您可以將部分樣式設置為 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