HTML語義化

什麼是HTML的語義，直觀的說就是HTML的含義，從HTML代碼自己就能夠判斷包含內容的做用。HTML標籤語義化是Web網頁標準化的重要一環，也是標準制定時重要的設計原則。HTML5中新增長的不少標籤（如：<article>、<nav>、<header>和<footer>等）就是基於這樣的設計原則。頁面標籤語義化的優勢明顯，標籤語義化使得諸如搜索引擎以及第三方內容抓取工具等更容易讀懂頁面代碼。機器不會關注頁面實際渲染的外觀，只會關注頁面內容自己，頁面渲染的漂亮與否對機器識別毫無幫助。那麼具體什麼樣的頁面設計纔是語義化的頁面？瀏覽器會對語義化的標籤設計默認的樣式，因此驗證頁面是否語義規範的一個簡單方式就是去掉CSS樣式後頁面是否還能正常閱讀。先來看看一個例子。

假設咱們要實現以下的一個工具欄：

若是僅僅是實現這樣的外觀，則以下的代碼加上合適的CSS樣式就能夠達到要求。

<div id="reader_main_action" class="reader-main-action">
    <span class="reader-action-library"></span>
    <span class="reader-action-spliter">|</span>
    <span class="reader-action-toc "></span>
    <span class="reader-action-spliter">|</span>
    <span class="reader-action-note"></span>
    <span class="reader-action-bookmark"></span>
    <span class="reader-action-highlight"></span>
</div>

再來看看第二種實現方式。按照需求，這是一個包含5個操做項的工具欄，應該使用符合語義的<ul>標籤。如上的實現方式是一種常見的實現方式，但從標籤語義的角度來看，不推薦此實現方式。代碼中使用的標籤<div>和<span>是在全部的HTML標籤中最沒有語義的。因此要作到標籤語義化，首先要儘可能少用<div>和<span>這兩個標籤，在使用這兩個標籤時儘可能能找到更有語義的標籤代替。

<ul id="reader_main_action" class="reader-main-action">
    <li class="reader-action-library"></li>
    <li class="reader-action-spliter">|</li>
    <li class="reader-action-toc"></li>
    <li class="reader-action-spliter">|</li>
    <li class="reader-action-note"></li>
    <li class="reader-action-bookmark"></li>
    <li class="reader-action-highlight"></li>
</ul>

第二個方案比第一個方案有所改進，使用了語義化的標籤<ul>，可是咱們總共有五個操做項，而此方案使用了七個<li>標籤。兩個非操做項的分隔符佔用了兩個<li>標籤。單純從語義上看，兩個分隔符和其餘五個操做項具備等同的重要性。試想一下，搜索引擎識別此段代碼時，會認爲工具欄中包含七個操做項，這明顯偏離了實際的語義。因此此方案須要進一步改進，去掉多餘的兩個<li>，使用CSS樣式來實現分隔符的效果。以下是改進後的代碼：

<ul id="reader_main_action" class="reader-main-action">
    <li class="reader-action-library"></li>
    <li class="reader-action-toc spliter"></li>
    <li class="reader-action-note spliter"></li>
    <li class="reader-action-bookmark"></li>
    <li class="reader-action-highlight"></li>
</ul>

使用CSS樣式實現分隔符效果：

.reader-main-action .spliter {
    margin-left: 30px;
}
.reader-main-action .spliter:before {
    content: '|';
    line-height: 28px;
    font-size: 20px;
    color: #888;
    cursor: default;
    text-indent: 0;
    float: left;
    margin: 0 -20px;
}

第三個方案把無關內容的元素完全從HTML中分離了出來，刪除了干擾語義的標籤，是否是完美了？還差一點，假設搜索引擎解析到這段HTML代碼，從語義上只能分析出這是有5個操做項的工具欄，具體每一個操做項的做用則不得而知。須要繼續添加文字說明，修改後的代碼以下：

<ul id="reader_main_action" class="reader-main-action">
    <li class="reader-action-library">library</li>
    <li class="reader-action-toc spliter">toc</li>
    <li class="reader-action-note spliter">note</li>
    <li class="reader-action-bookmark">bookmark</li>
    <li class="reader-action-highlight">highlight</li>
</ul>

給每一個操做項添加了名稱，這下語義清晰了。由於操做項在界面上顯示的是圖標按鈕，須要把文字隱藏掉。以下的CSS樣式能夠實現文字的隱藏：

.reader-main-action li {
    Text-indent: -9999px;
}

第四個方案中，添加了一些隱藏的文字，看似多餘的代碼，倒是頗有必要的。按照以前提到的驗證HTML代碼語義性的方法，去掉全部的CSS樣式，只有此方案能在界面上正常顯示5個操做項。以下是禁用CSS樣式後，此方案的顯示效果圖：

編寫語義明確的HTML代碼須要有足夠的耐心和良好的編碼意識，這須要在實際的項目中不斷地實踐。固然編寫高語義的HTML代碼也是有一些最佳實踐能夠參考的，以下所列的是最主要的3條原則。

• 熟悉全部規範的HTML標籤，理解各標籤的語義，在合適的地方使用合適的標籤。

若是不考慮HTML的語義，使用<div>和<span>就足夠構建頁面上大部分的佈局，可是這兩個標籤是沒有任何語義的標籤。HTML語義化首先要從HTML標籤語義化入手，HTML標籤是頁面內容的載體，語義化的標籤相對因而對所包含內容的一個總體聲明，也使得頁面總體結構清晰。網頁的開發者應該熟悉全部規範的HTML標籤的使用場景，在合適的地方使用合適的標籤。例如，標籤Hx系列則表示標題，在網頁中展現各層級的標題時使用、<ul>和<ol>表示列表，在展示各類數據列表或者菜單是使用，其它使用率較高的語義標籤有：<p>、<em>、<strong>、<table>、<site>、<blockquote>等，以及HTML5新加入的標籤：<header><footer><article><section><nav><aside>等。W3C規範中針對全部標籤都有詳細的解釋和使用場景示例，這些最基本的內容須要前端開發者熟練掌握。

• 熟悉各標籤規範的屬性，給HTML標籤設置必要的屬性。

和標籤語義化的重要性同樣，某些屬性的設置也是HTML語義化重要的環節。在不少規範中規定須要設置的兩個屬性是alt屬性和title屬性，這兩個屬性設置的也是爲了提升HTML的語義。在<img>標籤中，alt是必需要設置的屬性，由於<img>是自閉合標籤，並無包含能夠解釋說明圖片的額外信息。title屬性是可選屬性，當標籤包含的內容不足以說明語義時，能夠經過title添加額外的信息。以下示例展現這兩個屬性的使用：

<!—alt屬性除了對圖片做解釋說明以外，當圖片在瀏覽器中未加載時的顯示的代替文字-->
<img src="/img/loading.gif" alt="data loading…" />
<!—title屬性是對元素的解釋說明，而且做爲在瀏覽器中當鼠標移到元素上時顯示的提示文本-->
<a href="" title=""></a>

還有一個重要的屬性是<label>標籤中的for屬性。<label>標籤是<input>元素定義的標註。以下示例是<lable>標籤的一種不規範用法，倒是常見的用法。

<form>
    <label>User Name：</label>
    <input type="text" name="user_name" id=" user_name" />
</form>

代碼中的<label>標籤和<input>標籤僅僅是從UI的視覺上是關聯在一塊兒的，可是從代碼自己並不能看出二者之間的關係。<label>標籤上少了一個for屬性。<label>標籤的for屬性值指代一個表單元素，屬性值爲此表單元素的id值。for屬性的做用不只把<lable>標籤上的觸發事件指向了for屬性指代的表單元素，也從語義上綁定了<lable>和此表單元素。應該給如上示例中的<label>添加for屬性，示例修改以下：

<form>
    <label for="user_name">User Name：</label>
    <input type="text" name="user_name" id="user_name" />
</form>

• 樣式和結構分離。

咱們以前提到的樣式和結構分離，主要說的是CSS樣式和HTML結構的分離。這裏會更進一步，把HTML代碼中用於表達外觀的部分從HTML中刪除，並改用CSS樣式實現。簡潔的HTML代碼會代碼的語義更加明確。以下的示例代碼是上面的示例中展現分隔符的HTML代碼：

<ul id="reader_main_action" class="reader-main-action">
    <li class="reader-action-spliter">|</li>
</ul>

CSS中的兩個僞類:before和:after很適合在這樣的場景中使用，在元素的前面或者後面添加修飾性的文字或者外觀，實現了內容的添加並同時沒有破壞HTML代碼的語義。這裏展現一個經常使用的場景，應該不少人寫過這樣的代碼。示例以下：從實際需求分析，分隔符並非網頁內容的一部分，只是用於內容的分割，因此應該從HTML代碼中分離，並使用CSS樣式實現相同的效果，本例的CSS樣式的實現可參照上面示例方案3中展現的代碼。

<div id="main">
    <div class="sidebar">this is the side bar.</div>
    <div class="content">this is the main content.</div>
    <div class="clear"></div>
</div>

對應的CSS樣式爲：

.sidebar { float: left; width:150px; }
.container { float:right; width:450px;}
.clear { clear:both; }

代碼中爲了清除元素的浮動而添加了一個<div>元素，並給此<div>元素添加了clear樣式。可能不少人以爲這是一個常規的作法，可是這種寫法是破壞了HTML代碼的語義，並非一種好的方案，應該刪除這個多餘的<div>元素，並改用CSS樣式來實現，以下示例代碼：

<div id="main clearfix">
    <div class="sidebar">this is the side bar.</div>
    <div class="content">this is the main content.</div>
</div>

對應的CSS類clearfix的聲明爲：

.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

上面的示例使用了:before和:after僞類，很好地解決了因爲多餘的元素而破壞HTML代碼的語義的問題。

另一個常常濫用的標籤就是<br >換行符標籤。不少新手常常會使用此標籤讓元素換行顯示，甚至會連續使用多個<br>標籤來加大元素之間的行距。

<div>
    <span>title</span><br><br>
    <span>item1</span><br>
    <span>item2</span><br>
    <span>item3</span><br>
</div>

這算是很初級的錯誤了，徹底沒有理解<br>標籤的語義。<br>標籤僅僅用於文本內容中的換行。

以下是從W3C網站上引用的示例：

<p>P. Sherman<br>42 Wallaby Way<br>Sydney</p>

若是要實現元素之間的換行或者增長行間距則能夠經過設置display、margin或者是padding等樣式。

另外咱們在構建頁面的時候，常常會添加圖片，可是圖片是以img元素存在，仍是以背景圖方式存在？不少時候，咱們並無仔細考慮這樣的問題，實現的方式很隨意。其實，從HTML語義的角度考慮，很容易決定應該使用img元素仍是背景圖。若是圖片是做爲頁面內容的一部分，則應該使用img元素，若是圖片僅僅是裝飾做用，則應該使用背景圖方式。

在構建頁面的HTML時，若是能遵照以上介紹的這三點規則，則基本能夠保證頁面HTML代碼的高語義。