HTML5之語義化標籤

時間 2019-12-13

標籤 html5 html 語義標籤欄目 HTML5 简体版

原文原文鏈接

在HTML5以前採用HTML+CSS文檔結構寫法：css

ID選擇器說明 id選擇器——用於標識頁面上特定元素(好比站點導航、頁眉、頁腳)並且必須惟一; 也能夠用來標識持久結構性元素（如主導航、內容區域）html

class選擇器說明 class類選擇器——能夠應用於頁面任意多個元素，很是適合標識內容類型或其餘類似的條目。瀏覽器

代碼：ide

<body>
    <div id="header">...</div>
    <div id="nav">...</div>
    <div class="artical">
        <div class="section"></div>
    </div>
    <div id="side-bar">...</div>
    <div id="footer">...</div>
</body>

HTML5出現，解決上述問題，專門添加頁眉、頁腳、導航、文章內容等跟結構相關的結構元素標籤模塊化

HTML5結構代碼字體

<body>
  <header>...</header>
  <nav>...</nav>
  <article>
     <section>
       ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

咱們將對HTML5解構代碼的標籤作詳細解釋：優化

< title>：簡短、描述性、惟一（提高搜索引擎排名）。
搜索引擎會將title做爲判斷頁面主要內容的指標，有效的title應該包含幾個與頁面內容密切相關的關鍵字，建議將title核心內容放在前60個字符中。
<hn>：h1~h6分級標題，用於建立頁面信息的層級關係。
對於搜索引擎而言，若是標題與搜索詞匹配，這些標題就會被賦予很高的權重，尤爲是h1。
<header>：具備引用或導航做用的解構元素，一般包括網站標誌、主導航、全站連接以及搜索框。也適合對頁面內部一組介紹性或導航性內容進行標記。
<nav>：元素表明頁面的導航連接區域。用於定義頁面的主要導航部分。譬如：側邊欄上目錄，麪包屑導航，搜索樣式，或者下一篇上一篇文章。用在整個頁面主要導航部分上，不合適就不要用nav元素。
<article>：當前頁面或文章的附屬信息，能夠包含於當前頁面或主要內容相關的引用、側邊欄、廣告、導航條。
article能夠嵌套article，只要裏面的article與外面的是部分與總體的關係。
<section>：具備類似主題的一組內容，好比網站的主頁能夠分紅介紹、新聞條目、聯繫信息等條塊。元素表明文檔中的「節」或「段」，「段」能夠是指一篇文章裏按照主題的分段；「節」能夠是指一個頁面裏的分組。
若是隻是爲了添加樣式，請用div！
<aside>：指定附註欄，包括引述、側欄、指向文章的一組連接、廣告、友情連接、相關產品列表等。
<footer>：做爲其上層父級內容區塊或根區塊的腳註。一般包含腳註信息，如做者、相關連接或版權。網站

HTML5語義化標籤優勢

去掉或樣式丟失的時候能讓頁面呈現清晰的結構

並非樣式文件丟失後頁面的樣式會一直保存，而是瀏覽器都有有默認樣式，默認樣式的目的也是爲了更好的表達html的語義，依舊能夠清晰地呈現頁面。搜索引擎

屏幕閱讀器（若是訪客有視障）會徹底根據你的標記來「讀」你的網頁。

例如,若是你使用的含語義的標記,屏幕閱讀器就會「逐個拼出」你的單詞,而不是試着去對它完整發音spa

搜索引擎的爬蟲依賴標籤肯定上下文和權重問題。

搜索引擎優化的目的是爲了幫助搜索引擎爬蟲更好地瞭解網頁的信息和將網頁更好地歸類。搜索引擎爬蟲不比視覺閱讀器強多少，它須要更多的指引去肯定一個網頁的結構和主題。好的語義化的HTML可以體現頁面的結構。好比

（1）頁面的title；

（2）標題hn（搜索引擎會給標題中的文字以更高的權重。您的網頁關鍵字優化應該至少一次出如今h1中，並且相關的關鍵字在其餘標題（hx）中。包含關鍵字的標題有助於搜索引擎優化）；

（3） img標籤的alt屬性（用來描述圖片信息，該文本應該和圖片文本信息一致，不然會失去更多的引擎排名值）；

（4） table（表格，使用表標題th做爲表格的表頭，使用thead、tbody和tfood適當劃分表格，爲表格提供一個caption，說明是什麼信息在表格中。Caption和th最好放置關鍵字）；

（5） strong em b i 起到物理強調和邏輯強調的做用，搜索引擎會給這四個標籤更高的權重。可是過量使用會形成損失重點。

你的頁面是否對爬蟲容易理解很是重要，由於爬蟲很大程度上會忽略用於表現的標記，而只注重語義標記。所以，若是頁面文件的標題被標記，而不是關鍵字被標記，那麼這個頁面在搜索結果的位置可能會比較靠後。除了提高易用性外，語義標記有利於正確使用CSS和JavaScript，由於其自己提供了許多「鉤鉤」來應用頁面的樣式與行爲。SEO主要仍是靠你網站的內容和外部連接的。
移動設備可以更完美的展示網頁（對css支持較弱的設備）

語義化標籤爲移動設備提供了渲染頁面所需的信息，設備能夠以有意義的方式來渲染網頁。好比對於標題文字，手機能夠加粗顯示，而Pad能夠以較大字體顯示。不管哪一種方式均可以突出標題的文本信息。