我眼中的Web 語義化

我眼中的Web 語義化

web語義化是什麼？

Web語義化，使用語義恰當的標籤，可讓頁面具備良好的結構，頁面元素具備良好的含義，從而讓人和機器都能快速理解。語義化的web頁面一方面可讓機器在更少的人類干預狀況下收集並研究網頁的信息，從而能夠讀懂網頁的內容，而後將收集彙總的信息進行分析，結果爲人類所用；另外一方面它可讓開發人員讀懂結構和用戶以及屏幕閱讀器（若是訪客有視障）可以讀懂內容。

爲何要語義化？

• 有利於 SEO 。

SEO也就是Search Engine Optimization，搜索引擎優化。指經過站內優化好比網站結構調整、網站內容建設、網站代碼優化等以及站外優化，好比網站站外推廣、網站品牌建設等，使網站知足搜索引擎收錄排名需求，在搜索引擎中提升關鍵詞排名，從而吸引精準用戶進入網站，得到免費流量，產生直接銷售或品牌推廣。

人能夠經過視覺的劃分判斷內容的語義,而搜索引擎只能經過爬取網頁標籤等代碼來判斷內容的語義。獲得搜索引擎的有效爬取，是提升網站流量的有效方法之一。要使頁面儘量地對搜索引擎友好，因此就要儘量地使標籤和內容語義化。

• 在頁面去掉或樣式丟失的時候，能讓頁面呈現清晰的結構。html的一些標籤，例如h1（粗體）,strong（加粗）,em（斜體）,經過一些默認的樣式，可使頁面即便在缺失CSS樣式修飾時也能呈現清晰的結構。

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

• 團隊開發中，良好的語義化標籤，能夠減小不少差別化，減小成員間溝通成本，方便開發和後期維護，利於實現模塊化開發。

web語義化的分類

web語義化應該是樣式與結構分離的結果，重構中的語義化包含HTML標籤語義化和CSS命名語義化,HTTP的語義化是針對HTTP協議來講。

HTML標籤語義化

HTML爲網頁文檔內容提供上下文結構和含義。對於HTML體系而言，Web語義化是指使用語義恰當的標籤，使頁面有良好的結構，讓頁面元素有含義，便於被瀏覽器、搜索引擎解析。一般咱們所說的HTML應該是徹底脫離表現信息的，其中的標籤應該都是語義化地定義了文檔的結構。

例如：
爲了SEO，咱們會選擇h1標籤來突出標題，用strong標籤來突出關鍵字，這其實就是語義化的體現。SEO的原理實際上是分析源碼來體現或猜想網站要表達的內容。好比咱們想表達某篇文章的標題， 咱們或許會這樣寫：

<div class=」title」>文章的標題</div>

可是爲了更好的討好搜索引擎咱們最好寫成以下形式：

<h1>文章的標題</h1>

一些經常使用的標籤元素有：

• 自己無實在乎義，組合其餘HTML元素，經常使用於頁面佈局:div

• 設置文本，填充段落:h1~h6, p, span, strong, em...

• 表現列表：ul, li, ol, dl, dt, dd

• 表單相關：form,input,select,button

• 表格相關：table,thead,tbody,tfoot,th,tr,td

• 用於圖像顯示：img, canvas

• 打開連接，發送郵件，段落跳轉：a

此外，meta Description/meta keywords等針對搜索引擎和更新頻度的描述和關鍵詞的meta標籤也會用來實現網頁的SEO。
【詳細能夠參考：w3schools.com:https://www.w3schools.com/tag... 】

HTML 規範其實一直在往語義化的方向上努力，許多元素、屬性在設計的時候，就已經考慮瞭如何讓各類用戶代理甚至網絡爬蟲更好地理解 HTML 文檔。HTML5 更是在以前規範的基礎上，將全部表現層的語義描述都進行了修改或者刪除，增長了很多能夠表達更豐富語義的元素，也出現不少能夠提到DIV元素的更具象的標籤。

一個經典的頁面結構如圖：
html5表現內容.jpg

1. header區：

包含p h1~h6 hgroup等能夠表示標題和副標題。例如：

<header>
  <hgroup>
    <h1>標題</h1>
    <h2>副標題</h2>
  </hgroup>
  <p> 文本或者圖片</p>
</header>

2.Navigation區

nav標籤專門爲頁面導航功能定義一塊區域

<nav>
  <ul>
    <li><a href="#">主頁</a></li>
    <li><a href="#">關於咱們</a></li>

  </ul>
</nav>

3.Article 和 Section 區

Article包含頁面的實際內容，包含 Web 內容的相關的組件區。

<article>
    <section>
      Content
    </section>
    <section>
      Content
    </section>
</article>
<section>
  <article>
      Content
  </article>
  <article>
      Content
  </article>
</section>

4.figure標記

包含圖像、圖表和照片。figure標記能夠包含figcaption，figcaption表示圖像對應的描述文字，與圖片產生對應關係。

<figure>
  <img src="/figure.jpg" width="304" height="228" alt="Picture">
  <figcaption>Caption for the figure</figcaption>
</figure>

5.媒體元素

audio/video/source/embed

6.aside

包含一些補充性內容，能夠被移除而不會影響文章或文章所在的區段或頁面所傳達的信息。

<aside>
  <h4>Disney in France</h4>
  <p>Besides Euro Disney, there is a Disneyland in California.</p>
</aside>

7.footer等

總之，HTML語義化是反對大篇幅使用無語義化的div+span+class,而鼓勵使用HTML定義好的語義化標籤。固然，若是須要兼容低版本的IE瀏覽器，好比說IE8以及如下，那就須要選擇合適的兼容性的標籤了。

CSS命名語義化

CSS語義就是class和ID命名的語義。class屬性做爲HTML與CSS銜接的紐帶，其本意是用來描述元素內容的。指用易於理解的名稱對html標籤附加的class或id命名。若是說HTML語義化標籤是給機器看的，那麼CSS命名的語義化就是給人看的。良好的CSS命名方式減小溝通調試成本，易於理解。
CSS命名首先要知足W3C的命名規範和團隊的命名規範。其次是高效和可重用性。
就好像.main/.sidebar會比.left_content/.right_content的class命名靈活性更好。

<!-- 以表現爲中心 -->
<div class="lr margin10">
    <span>nickName:seg</span>
<div>

<!-- 以信息爲中心 -->
<p class="user-info">
    <em>nickName:seg</em>
<p>

Http+URL語義化

url語義化，可使得搜索引擎或者爬蟲更好地理解當前url所在目錄所須要表達的內容；而對於用戶來講，經過url也能夠判斷上一級目錄或者下一級目錄想要表示的內容，能夠提升用戶體驗。
例如我司的搜索品類的url：

https://mall.midea.com/index.php/category?id=10049&addr_code=440000,440100,440103
https://mall.midea.com/category?id=10049&addr_code=440000,440100,440103

這兩個url指向的是同一個資源，可是顯然第二個url對於用戶和搜索引擎更加友好。
url語義化能夠從如下標準來衡量：

1. url簡化，規範化。例如：url裏的參數兩個單詞的鏈接用下劃線_。

2. 結構化，語義化。好比：category "品類"

3. 採用技術無關的url：好比第一個連接中的index.php這種就不該該出如今用戶側的url裏。

參考文檔：

About HTML semantics and front-end architecture
HTML Element Reference
HTML語義化
IBM developerWorks®
url重構
search-engine-optimization-starter-guide-zh-cn