作者 | Thaís V
譯者 | 彎月，責編 | 屠敏
以下為譯文：
為了讓你的 html5 代碼引起google等搜索引擎的注意，你需要在HTML語言規則上下一番功夫，并在編寫代碼時應用一些策略。編寫這樣的代碼其實并不難，而且還有很多好處。
在本文中，我們將介紹：
-
HTML5 結構化語義的作用是什么？
-
為什么這種語義如此重要？
-
如何才能引起Google等搜索引擎的注意？我會舉例說明！
-
如何善加利用驗證工具？
下面，讓我們開始吧！
1.HTML5 結構化語義的作用
HTML5結構化語義的作用是通過語義標簽來組織文檔的內容，它用到了設計目的各異的若干標簽。
語義化的HTML標簽旨在描述HTML文檔內容的含義，還可以幫助程序員、瀏覽器和搜索引擎更加清楚地了解這些含義。
因此，語義化的代碼可以讓用戶導航更易于訪問、模式化且易于維護。HTML的作用不是構造文檔本身，而是通過語義標簽賦予內容含義。
正確使用語義元素對于構建現代化、組織化、標準化的網頁至關重要，而且還能方便閱讀和維護代碼。
2.語義真的很重要嗎？
語義是Web平臺特有的主要優勢之一，因此語義很有必要性。編寫具有恰當結構的代碼有助于搜索引擎（比如Google）評估網站的內容。除此之外，還有一些有價值的原因值得注意：
-
正確的標簽可以增加網站的競爭力；
-
正確的標簽可以方便有特殊需求的用戶訪問網站的內容，例如視力障礙者；
-
正確的標簽可以減輕其他開發人員維護網站的壓力；
-
正確的標簽可以讓你的工作更加專業；
-
正確的標簽甚至可以影響到你的網站是否會出現在Google的搜索結果中。
猜猜看，誰將閱讀網站的語義，并決定網站的內容是否與搜索關鍵字相關？沒錯，正是Google等搜索引擎！網站在搜索結果中的排名也是由搜索引擎決定。
3.你是不是應該重視起來了？
而引起等搜索引擎注意的正是主要的語義標簽！
下面，我列出了一些主要的語義標簽：
<!DOCTYPE html>：<!DOCTYPE>不是HTML的標簽。這個標簽為瀏覽器提供了有關HTML版本的信息，在創建HTML時我們首先應該寫明的就是這個標簽。
<head>：<head>是<title>、<link>、<script>等元素的容器，這些元素不會在瀏覽器中顯示。
<html>：<html>標簽是HTML元素的容器，包括那些不會顯示在瀏覽器中的元素。
<nav>：<nav>由一組鏈接列表組成。
<main>：一個HTML文件應該只有一個<main>，它的作用是組織主要內容，它不應該出現在頁腳或文章等其他標簽中。
<section>：每個<section>都可以包含一系列有序的文章標題和其他標簽。它代表文檔的一個部分，例如文檔的章節、頁腳、旁邊或其他信息。
<article>：<article>應該用于標記出一段獨立的內容，不需要依賴其他內容。
<aside>：<aside>的內容應該作為對主題的補充。你還可以用它添加與文檔主要內容不相關的內容，比如廣告。
<figure>：<figure>的出現表明文檔中包含圖像。
<figcaption>：<figcaption>包含了對圖像的說明。
<footer>：<footer>定義了站點的頁腳，或某一部分的頁腳。這個標簽的內容多種多樣，例如導航菜單、社交媒體鏈接、服務條款、隱私政策、商標等等。
如果你有興趣查看更多標簽，那么請訪問w3school 在線教程。
4.驗證工具
驗證工具可以檢查你的代碼是否符合結構化語義的規則，還會說明需要修改的地方。
在這里介紹一個工具：Validator W3（https://validator.w3.org/），這個工具使用起來非常簡單。首先你需要上傳HTML文件，或將代碼復制粘貼到網站上。你可以在網站上練習正確的語義結構，并找到最佳實踐。
5.總結
本文提及的實踐非常重要。因為這種實踐可以提高網站的訪問量，提高你的網站在搜索引擎中的排名，而且也可以方便理解和維護你的代碼。
我們需要花點心思鉆研代碼，并讓我們的努力更加有價值。讓我們一起努力吸引Google等搜索引擎的注意！
原文：https://hackernoon.com/you-and-html5-can-impress-googles-robots-and-be-on-the-first-pages-s5122b8a
本文為 CSDN 翻譯，轉載請注明來源出處。
