整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者 | Thaís V
譯者 | 彎月，責編 | 屠敏
以下為譯文：
為了讓你的 HTML5 代碼引起Google等搜索引擎的注意，你需要在HTML語言規則上下一番功夫，并在編寫代碼時應用一些策略。編寫這樣的代碼其實并不難，而且還有很多好處。
在本文中，我們將介紹：
HTML5 結構化語義的作用是什么？
為什么這種語義如此重要？
如何才能引起Google等搜索引擎的注意？我會舉例說明！
如何善加利用驗證工具？
下面，讓我們開始吧！
HTML5 結構化語義的作用
HTML5結構化語義的作用是通過語義標簽來組織文檔的內容，它用到了設計目的各異的若干標簽。
語義化的HTML標簽旨在描述HTML文檔內容的含義，還可以幫助程序員、瀏覽器和搜索引擎更加清楚地了解這些含義。
因此，語義化的代碼可以讓用戶導航更易于訪問、模式化且易于維護。HTML的作用不是構造文檔本身，而是通過語義標簽賦予內容含義。
正確使用語義元素對于構建現代化、組織化、標準化的網頁至關重要，而且還能方便閱讀和維護代碼。
語義真的很重要嗎？
語義是Web平臺特有的主要優勢之一，因此語義很有必要性。編寫具有恰當結構的代碼有助于搜索引擎（比如Google）評估網站的內容。除此之外，還有一些有價值的原因值得注意：
正確的標簽可以增加網站的競爭力；
正確的標簽可以方便有特殊需求的用戶訪問網站的內容，例如視力障礙者；
正確的標簽可以減輕其他開發人員維護網站的壓力；
正確的標簽可以讓你的工作更加專業；
正確的標簽甚至可以影響到你的網站是否會出現在Google的搜索結果中。
猜猜看，誰將閱讀網站的語義，并決定網站的內容是否與搜索關鍵字相關？沒錯，正是Google等搜索引擎！網站在搜索結果中的排名也是由搜索引擎決定。
你是不是應該重視起來了？
而引起等搜索引擎注意的正是主要的語義標簽！
下面，我列出了一些主要的語義標簽：
<!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 在線教程。
驗證工具
驗證工具可以檢查你的代碼是否符合結構化語義的規則，還會說明需要修改的地方。
在這里介紹一個工具：Validator W3（https://validator.w3.org/），這個工具使用起來非常簡單。首先你需要上傳HTML文件，或將代碼復制粘貼到網站上。你可以在網站上練習正確的語義結構，并找到最佳實踐。
總結
本文提及的實踐非常重要。因為這種實踐可以提高網站的訪問量，提高你的網站在搜索引擎中的排名，而且也可以方便理解和維護你的代碼。
我們需要花點心思鉆研代碼，并讓我們的努力更加有價值。讓我們一起努力吸引Google等搜索引擎的注意！
原文：https://hackernoon.com/you-and-html5-can-impress-googles-robots-and-be-on-the-first-pages-s5122b8a
本文為 CSDN 翻譯，轉載請注明來源出處。
頁是一個包含HTML標簽的純文本文件
網頁制作離不開瀏覽器和制作網頁工具
瀏覽器推薦【谷歌瀏覽器】或【火狐瀏覽器】
制作網頁工具用電腦自帶的【記事本】即可
六步即可學會最基礎的網頁制作！
右擊桌面，選擇新建，選擇文本文檔
打開新建的文本文檔，輸入以下內容（建議照敲一遍）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
</body>
</html>上面這些內容就是超文本標記語言，也稱為HTML，現在HTML已經發展到第五代——HTML5，上面這些HTML5代碼是幫助我們寫出網頁的基礎。
右擊文檔重命名，修改文件后綴，將文件擴展名修改為.html
什么瀏覽器打開就會出現什么瀏覽器圖標
如果你看不到文件的擴展名那么就打開此電腦（我的電腦），在菜單欄查看勾選文件擴展名即可。
雙擊打開它，你會發現一片空白。
但并不是什么都沒有，上圖中箭頭指的那一串字母就叫URL，也稱“統一資源定位器”。因為這個文件只是本地文件，所以它現在的作用是定位你的文件存放位置，顯示文檔地址，說明文檔放在什么地方。
忍受不了空空的感覺，那么就開始添加一些東西吧！
右擊選擇打開方式，選擇用記事本打開
點擊其他應用可以看到記事本
試試看把標題改成“這是一個標題”，按快捷鍵ctrl+s保存
刷新一下瀏覽器，于是標題就變成了“這是一個標題”
那么我們就可以知道，修改<title></title>里面的內容可以改變標題；同時<title>標簽是<head>標簽中唯一要求包含的東西。
一鼓作氣，再添加一些內容吧！
在<body></body>這一對標簽里面加上這樣一段話：
<p>Hello</p>
<p>World</p>然后保存刷新
Hello World
恭喜你，你已經學會了最基礎的網頁制作了。
<p>這是什么意思呢？
這些被稱為標簽，上面出現尖括號的都屬于標簽，它們通常都是成對的，由開始標簽和結束標簽（結束標簽加上斜杠）構成一組標簽，例如<title></title>、<p></p>。
<p>標簽定義段落，我們寫文章一般是敲一下回車就換一行，但是網頁不一樣，你敲多少個回車都是不被識別的。
<p>有志者，事竟成，破釜沉舟，百二秦關終屬楚;
苦心人，天不負，臥薪嘗膽，三千越甲可吞吳!</p>
<p><p></p>可以看到上面的一段話，敲多少個回車都沒有用，而下面的一段話，用兩個<p>標簽就換行了。
av元素是什么？
Nav元素用于定義導航鏈接，是HTML5新增的元素，該元素可以將具有導航性質的鏈接歸納在一個區域中，使頁面元素的語義更加明確。其中的導航元素可以鏈接到站點的其他頁面或者當前頁的其他部分。
Nav元素可以用作頁面導航的鏈接組，在導航鏈接組里面有很多的鏈接，點擊每個鏈接可以鏈接到其他頁面或者當前頁面的其他部分，并不是所有的鏈接組都要被放在Nav元素里面，只需要把最主要的、基本的、重要的放在Nav元素里面即可。
比如說頁腳底部如果有個版權聲明，不建議使用Nav元素，而建議使用footer元素是最合適的。一個頁面中可用多個Nav元素作為整體或者不同部分的導航
示例代碼：
Nav元素示例代碼
在上面這段代碼中，通過在Nav元素內部嵌套無序列表ul來搭建導航結構。通常一個HTML頁面中可以包含多個Nav元素，作為頁面整體或不同部分的導航。
具體來說Nav元素可以用的場景如下：
1.傳統導航條：目前主流網站上都有不同層級的導航條，其作用是跳轉到網站的其他主頁面。
2.側邊欄導航：目前主流博客網站及電商網站都有側邊欄導航，目的是將當前文章或當前商品頁面跳轉到其他文章或其他商品頁面。
3.頁內導航：它的作用是在本頁面幾個主要的組成部分之間進行跳轉。
4.翻頁操作：翻頁操作切換的是網頁的內容部分，可以通過單擊“上一頁”或“下一頁”切換，也可以通過單擊實際的頁數跳轉到某一頁。
除此Nav元素也可以用于其他重要的、基本的導航鏈接組中。并不是所有的鏈接組都要被放進Nav元素，只需要將主要的和基本的鏈接放進Nav元素即可。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
