web語義化 HTML5之語義化標籤

在萬千的網頁中，咱們如何搜索到本身想獲取的信息？答曰：搜索引擎。搜索引擎是如何獲取頁面信息的呢？答曰：機器藉助HTML文件。機器是如何從HTML文件獲取咱們想搜索的內容呢？答曰：關鍵字？？？ 想要解決這個問題，來看下面的內容：

Web語義化的目的是什麼，其實簡單說來就是讓機器能夠讀懂內容。

隨着 Web 規模的不斷擴大，信息量之大已經不在人肉處理的範圍以內了。這個時候人們開始用機器來處理 Web 上發佈的各類內容，搜索引擎就誕生了。再後來，人們又設計了各類智能程序來對索引好的內容做各類處理和挖掘。因此讓機器可以更好地讀懂 Web 上發佈的各類內容就變得愈來愈重要。

其實 HTML 在剛開始設計出來的時候就是帶有必定的「語義」的，包括段落、表格、圖片、標題等等，但這些更多地只是方便瀏覽器等 UA 對它們做合適的處理。但逐漸地，機器也要藉助 HTML 提供的語義以及天然語言處理的手段來「讀懂」它們從網上獲取的 HTML 文檔，但它們沒法讀懂例如「紅色的文字」或者是深度嵌套的表格佈局中內容的含義，由於太多已有的內容都是專門爲了可視化的瀏覽器設計的。面對這種狀況，出現了兩種觀點：咱們可讓機器的理解能力愈來愈接近人類，人能看懂、聽懂的東西，機器也能理解；咱們應該在發佈內容的時候，就用機器可讀的、被普遍承認的語義信息來描述內容，來下降機器處理 Web 內容的難度（HTML自己就已是朝這個方向邁出的一小步了）。

如何實現web語義化？

HTML語義化

在以前的文章已經提到《HTML5之語義化標籤》HTML5語義化。好比這些標籤：<nav>、<header>、<footer>、<artical>、<section>等等，這些標籤不只在丟失樣式後還可讓頁面清晰地呈現，並且有利於搜索引擎優化，對於視力障礙的用戶，機器能夠爲他們「讀」出頁面。

CSS語義化

CSS語義指的是class的語義。

class屬性本意是用來描述元素內容的，而不是描述元素展示的。其典型‘反模式’表明就是METACSS。

看看這兩段代碼，哪個更容易理解？

<!-- 以表現爲中心 -->

<div class="fl mr10">

    <span>userName:Kuitos</span>

<div>

<!-- 以信息爲中心 -->

<div class="user-info">

    <span>userName:Kuitos</span>

<div>

class做爲HTML描述屬性集的一部分，自己是用來細化內容語義的，所謂的CSS語義化本質上就是HTML語義化

因此，web語義化就是藉助一些人類能夠在視覺上快速分辨的，同時機器也能夠迅速捕獲的的標籤，來編寫HTML文件。