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