如何理解 Web 語義化?


什麼是語義化?其實簡單說來就是讓機器可以讀懂內容。

先隨便扯扯。對於當前的 Web 而言,HTML 是聯繫大多數 Web 資源的紐帶,也是內容的載體。在 Web 被剛剛設計出來的時候,Tim Berners-Lee 可能不會想到它現在會達到的規模以及深入到我們生活的那麼多方面。也許起初的想法很簡單:用來發布 Web 內容和資源的索引,方便人們查看。

但是隨著 Web 規模的不斷擴大,信息量之大已經不在人肉處理的範圍之內了。這個時候人們開始用機器來處理 Web 上發布的各種內容,搜索引擎就誕生了。再後來,人們又設計了各種智能程序來對索引好的內容作各種處理和挖掘。所以讓機器能夠更好地讀懂 Web 上發布的各種內容就變得越來越重要。

其實 HTML 在剛開始設計出來的時候就是帶有一定的「語義」的,包括段落、表格、圖片、標題等等,但這些更多地只是方便瀏覽器等 UA 對它們作合適的處理。但逐漸地,機器也要藉助 HTML 提供的語義以及自然語言處理的手段來「讀懂」它們從網上獲取的 HTML 文檔,但它們無法讀懂例如「紅色的文字」或者是深度嵌套的表格布局中內容的含義,因為太多已有的內容都是專門為了可視化的瀏覽器設計的。面對這種情況,出現了兩種觀點:

  1. 我們可以讓機器的理解能力越來越接近人類,人能看懂、聽懂的東西,機器也能理解;
  2. 我們應該在發布內容的時候,就用機器可讀的、被廣泛認可的語義信息來描述內容,來降低機器處理 Web 內容的難度(HTML 本身就已經是朝這個方向邁出的一小步了)。

我畫的這個圖,意思是說,內容的語義表達能力和 AI 的智能程度決定了機器分析處理 Web 內容能力的高低。上面觀點 1 的方向是朝著人類水平的人工智慧努力,而觀點 2 的方向正是萬維網創始人 Tim Berners-Lee 爵士提出的美好願景:語義網。語義網我就不多說了,簡單來說就是讓一切內容和包括對關係的描述都成為 Web 上的資源,都可以由唯一的 URI 定義,語義明確、機器可讀。顯然,兩條路都的終極目標都很遙遠,第一條路技術上難以實現,而第二條路實施起來障礙太多。

我畫的這個圖,意思是說,內容的語義表達能力和 AI 的智能程度決定了機器分析處理 Web 內容能力的高低。上面觀點 1 的方向是朝著人類水平的人工智慧努力,而觀點 2 的方向正是萬維網創始人 Tim Berners-Lee 爵士提出的美好願景:語義網。語義網我就不多說了,簡單來說就是讓一切內容和包括對關係的描述都成為 Web 上的資源,都可以由唯一的 URI 定義,語義明確、機器可讀。顯然,兩條路都的終極目標都很遙遠,第一條路技術上難以實現,而第二條路實施起來障礙太多。

我認為我們當前能夠看得見摸得著的 Web 語義化,其實就是在往第二條路的方向上,邁出的一小步,即對已經有的被廣泛認可的 HTML 標準做改進。我們剛開始意識到,我們必須回歸內容本身,將內容本身的語義合理地表述出來,再為不同的用戶代理設計不同的樣式描述,也就是我們說的內容與樣式分離。這樣我們在提供內容的時候,首先要做的就是將內容本身進行合理的描述,暫時不用考慮它的最終呈現會是什麼樣子。

HTML 規範其實一直在往語義化的方向上努力,許多元素、屬性在設計的時候,就已經考慮了如何讓各種用戶代理甚至網路爬蟲更好地理解 HTML 文檔。HTML5 更是在之前規範的基礎上,將所有表現層(presentational)的語義描述都進行了修改或者刪除,增加了不少可以表達更豐富語義的元素。為什麼這樣的語義元素是有意義的?因為它們被廣泛認可。所謂語義本身就是對符號的一種共識,被認可的程度越高、範圍越廣,人們就越可以依賴它實現各種各樣的功能。

HTML5 並非 Web 語義唯一倚仗的規範,除了 W3C 和 WHATWG 外,還有其它的組織在為擴展、標準化 Web 語義做著貢獻。只要有瀏覽器廠商、搜索引擎原意支持,它們的規範一樣可以成為通用的基礎設施。例如 microformats 社區以及 http://Schema.org 上都有對 HTML 以及 Microdata(http://www.w3.org/TR/html5/microdata.html) 規範的擴展辭彙表,Google、Bing、Yahoo! 等搜索引擎以及各個主流瀏覽器都不同程度地接納了其中定義的語義擴展,並應用在了生產中。

下面舉兩個 Google 應用擴展語義的例子。
Google 的搜索結果,可以根據 microformats 的 hCard 語法從抓取的頁面識別出人物信息:


也可通過網頁內嵌的 Microdata 數據讀取作品評分等信息:

關於 HTML5 的各個元素語義的描述,我之前做過一份 slides,上面提到的例子都是那裡面的,也可以參考一下:Semantic HTML(

關於 HTML5 的各個元素語義的描述,我之前做過一份 slides,上面提到的例子都是那裡面的,也可以參考一下:Semantic HTML(http://justineo.github.com/slideshows/semantic-html/)。


首先需要注意,本人回答一向漏洞百出,請意會。

語義網是讓機器可以理解數據。語義網技術,它包括一套描述語言和推理邏輯。它包通過一些格式對本體(Ontology)進行描述。如W3C的 RDF就是這樣一種描述規範,它描述這些數據所表達的含義還有這些詞之間可能產生的關係(動詞?),那麼計算機就可以通過查詢(推理規則)來產生我們需要的數據視圖了。也就是說如果你對計算機提問,因為計算機理解數據,所以可以推理出你所想要的答案,即使這個答案不是預先準備好的。大部分的語義網的表示規範都基於XML,因為它是一種完備的通用描述語言。

HTML選擇文本協議是因為文本協議便於人類與計算機閱讀。其實要注意一個重要的歷史細節,是email激發並幫助產生了互聯網技術。email相關的第一個RFC(RFC 561)在1973年就有了,而TBL大神在1989年提出超鏈接技術才標誌著WWW的產生。

使用文本協議是因為原先傳遞消息不是為了讓計算機存儲和理解的。最早的email就和我們現在的簡訊的想法差不多,兩個計算機同時在線用modem傳遞一些文本信息給使用計算機的人去讀,這個時候的文本信息沒有鏈接(沒有鏈接就不是網),純粹就是文本塊。

而後來為了讓email裡面能保存非文本的數據,並且不破壞原來的協議兼容性,所以催生了非常非常重要的MIME協議(Multipurpose Internet Mail Extensions)。

因為有了email的協議族(包括傳輸協議和MIME)以後,在計算機之間通過純文本消息體已經可以交換各種數據了。但是這個時候傳遞的只是數據,數據之間是沒有關係的。

Hypertext是在文本協議上面擴展了表示文檔關係(超鏈接)的能力,它就讓原先的文本變成了網路(關係)。這種文本表述協議HTML的第一個RFC是1995年的RFC 1866。而我們可愛的HTTP在1996年才有了HTTP 1.0(RFC 1945)。

你基本上可以按照RFC來排這些技術的輩份……

強調這個歷史是想說明計算機可理解不是這組協議的目的,因為計算機可以解析二進位,用二進位更高效(傳輸和解析)。這些協議最早是為了人類可讀而設計的,所以都基於對計算機不那麼有好的文本協議。文本協議人類調試起來會高效很多。

那麼這和語義網有什麼關係呢?

因為HTML不是為了計算機可讀而優化,所以HTML的解析實際上是一個比較頭疼的地方,這個是所有寫過HTML解析器的朋友都知道的。HTML很多時候真的是一鍋粥,模糊的語義很多時候靠猜。

所以,有了著名XHTML,它的目的是讓HTML套上XML的外衣。XML是啥呢?XML的最初目的就是設計一種計算機和人類都可讀的協議,由於人也就能讀文本,所以它是一種文本描述語言。讓HTML符合XML的規範就計算機(機器人)和人類都皆大歡喜了。而後有了XHTML 1.0,當時的「網站重構」活動所有經歷過那個時代的朋友都親身體會到了。多了一些強制的寫法,寫XHMTL解析器的朋友們就不用哭泣了。不過後來大家發現寫XHTML的朋友經常會有語法錯誤,另外一些朋友則對HTML 4.x靈活(模糊)的語法戀戀不忘。

由於還是有很多朋友發現XHTML讓計算機真的跟容易理解文本的結構,所以那些人繼續狂熱的做XHMTL 2.0,但是這是個不歸路。而且對於消費HTML的大部分人類來說這都沒有愛,所以最後這個標準被拋棄了。

人類理解文本字面以外更重要的是把這些概念抽出來理解,人類需要知道文檔的結構是什麼。研究協議的人們都是高端人才,天天寫paper……(我這個是純演繹)所以他們覺得應該讓HTML能夠很好的展現他們的寫的字(文本)的這種章回的結構,所以就把文檔的結構的隱喻放在了HTML的文檔模型(BOM和DOM)上面,所以HTML協議裡面是包括tag和tag所表述的文檔中的隱喻的定義的,這樣人類閱讀這些文本的時候就把文本和一個文檔(某個paper)的結構映射出來了,那麼瀏覽器就可以把他渲染的讓這些標準制定者高興了。

但是後來大家發現光有文檔沒有索引不行,所以搜索引擎越來越重要。可是搜索引擎不是都像Yahoo那樣是人肉編輯的,後來的主流搜索引擎都是基於對查詢文本和網路上的文本的相關度進行搜索的。但是網路上的文本要取下來並按照文檔結構解析是需要機器人(爬蟲)的。所以機器人讀網頁的權利被越來越多的重視起來,那些搜索引擎優化不就是想騙過這些機器人的演算法么。

當然這裡又回到一開始的語義網了,因為人們的查詢不光是字面匹配,人們希望使用更聰明的搜索引擎。那麼搜索引擎應該知道用戶的意圖,這不是什麼人工智慧,而是一些基於統計的演算法。但是這些演算法都和語義網中的一些東西有相關性,因為人們需要得到數據,並且找到這些數據的本體,通過一些預先定義好的本體之間的關係進行邏輯推演(目前都是寫死的演算法,而沒有使用語義網裡面的推演系統)。也就是說這個模型從概念上和語義網相似,但是由於技術上還不太可行,所以走了其它的路。不過從理解文本的這個地方來說,所有的現代搜索引擎都有這方面的邏輯。它希望把搜集到的文本描述成一種可以推演的數據,在語義網裡面描述這些數據的方式之一是RDF。RDF基於XML,而HTML中的XHTML是一種XML。通過HTML的attribute儲存語義網數據叫RDFa(Resource Description Framework – in – attributes),這就把HTML/XHTML和語義網技術拉到了一起,當然光表示數據只是語義網的一部分。

和RDFa相似的東西還有microformats(老早我就力挺microformats,不過後來這東西被好多人斷言說已經死了,還好後來micro-data火起來了),它把語義數據放在node text或者屬性裡面,並且通過css class來表達數據結構。但是他們只表示了結構,我們還沒法映射到本體。那麼Microdata就是這樣的嘗試,它定義了一些辭彙表,表達某一些常見的格式,通過這些辭彙表就對應到了數據的本體。

到這裡這個圈子就轉好了。語義化需要讓數據和表述的本體的映射成為可能,那麼結構首先要可以表達出來,並且通過一些結構的約定俗成(或者直接聲明)讓計算機可以找到這些結構的本體,然後計算機就可以通過本體的關係來進行邏輯演繹。目前我們能真的達到約定俗稱的東西還很少,大家看看micro data。但是先不要說終極理想,也就是讓我們的大網成為語義網。我們目前可用的技術裡面應該充分的考慮到可憐的機器人非常弱的理解能力,盡量說一些約定俗稱的東西,這樣機器人就可以幫我們進行一些我們人類不太擅長但是它很擅長的推理計算了。那麼最好我們能夠讓我們的文檔在描述相關的本體的時候使用計算機更容易理解的結構,這就是語義化。也就是說用某一種模式來表達計算機可以理解的辭彙,這就是HTML的語義化。

當然現在又一個巨大的問題,那就是HTML的文檔模型和我們平常要表達的映射直接沒有隱喻的關係,而且這個差距是巨大的。我們開發Web Application無處不受這種限制的影響,所以性急的人們才把HTML5變成一個永遠演化的協議,來保證我們更及時的把我們想要的一些新的結構、語義加入到HTML這個文本描述協議裡面。

那麼最後強調一下,語義化真的不是為了我們人類。語義化是我們人類博愛的體現,我們也要照顧可憐的機器人,讓他們能夠很好的通過自描述的結構逐漸掌握我們人類的辭彙,理解我們人來在說什麼,這樣它就可以更好的為我們服務。語義化真的是Web開發人員表現出來的可貴的人性!

相關詞條鏈接:

- [Semantic Web](http://en.wikipedia.org/wiki/Semantic_Web)
- [Email](http://en.wikipedia.org/wiki/Email)
- [World Wide Web](http://en.wikipedia.org/wiki/World_Wide_Web)
- [HTML](http://en.wikipedia.org/wiki/HTML)
- [Hypertext Transfer Protocol](http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol)
- [XML](http://en.wikipedia.org/wiki/XML)
- [RDFa](http://en.wikipedia.org/wiki/RDFa)
- [XHTML+RDFa](http://en.wikipedia.org/wiki/XHTML%2BRDFa)
- [Microdata (HTML)](http://en.wikipedia.org/wiki/Microdata_(HTML))
- [Microformat](http://en.wikipedia.org/wiki/Microformat)


    我所理解的Web語義化有三個階段。

    1、瀏覽器和W3C組織推出的如h1~h6、thead、ul、ol的HTML標籤,用於在Web頁面中組織對應的內容,如網頁標題、表頭、無序、有序列表,以達到更方便的協作及傳播互聯網內容。搜索引擎很好的利用了這些語義化標籤抓取內容,又鑒於搜索引擎的巨大流量推薦,Web前端不得不考慮SEO,從而兩者實現有益的循環,共同推進著語義化標籤的使用。

    2、但Web的發展超乎想像,起初定義的HTML語義化標籤,不足以實現對Web頁面各個部分的功能或位置描述,所以Web前端人員利用HTML標籤的id和class屬性,進一步對HTML標籤進行描述,如對頁腳HTML標籤添加如id="footer"或者class="footer"的屬性(值),以「無聲」的方式在不同的前端程序員或者前後端程序員間實現交流。

    3、W3C組織意識到了之前HTML版本的不足,推出的HTML5進一步推進了Web語義化發展,採用了諸如footer、section等語義化標籤,彌補了採用id="footer"或者class="footer"形式的不足,以更好的推動Web的發展。


    說一下個人的愚見:所謂 web 語義化,從廣義上來說,不僅要使機器(搜索引擎等)易於理解,也要使人易於理解。在團隊協作開發中,對人的易於理解顯得尤為重要了,一個莫名其妙的 class 會讓後續的開發或者維護者一頭霧水,增加了協作成本。


    這個問題讓我想起了大三時做的一個search
    也來說說幾句吧,
    我所理解的web語義化是互聯網信息處理的自動化、智能化。
    LBS,Apple Siri,搜索引擎,數字圖書館,車載導航,其實都可以理解為web語義化。
    只是程度的深和淺而已。
    當時我做search的時候,應該是08,09年的時候,國內對於web語義化的研究還處於體系結構上的研究,對應用層面的研究還是相對較少。
    那個時候,國內對於語義網的相關概念:本體,資源描述框架,Web2.0,數據挖掘,xml,描述邏輯,智能化,知識地圖,語義檢索,數字圖書館....不斷的在陌生中熟悉著...那個時候聽得最多的就是web2.0
    11年,12年,Apple Siri的現身,LBS,百度框,地圖導航....可以看到,目前web語義化已經在朝著應用層面走去。
    (我會認為,基於用戶社交關係的內容傳播也是一種web語義化...包括根據標籤對用戶進行描述,獲取用戶屬性然後進行分析,地理位置信息推送,瀏覽信息智能排序——熱度啊/感興趣啊....)

    附上:
    1.語義網通過擴展現有的互聯網,在信息中加入表示其含義的內容,使計算機可以自動與人協同工作。也就是說,語義網中的各種資源不再只是各種相連的信息,還包括其信息的真正含義,從而提高計算機處理信息的自動化和智能化。當然,計算機並不具有真正的智能,語義網的建立需要研究者們對信息進行有效的表示,制定統一的標準,使計算機可以對信息進行有效的自動處理。
    (來源:何斌 張立厚《信息管理原理與方法》 清華大學出版社 2007年7月第二版)

    2.語義網體系結構


    第一層:Unicode與URI,是整個體系結構的基礎。
    第二層:XML+NS+XMLSchema,負責語法上表示數據的內容和結構,通過使用標準的格式語言將網路信息的表現形式、數據結構和內容分離。
    第三層:RDF+RDF Schema,它提供語義模型用於描述網上的信息和類型。其中,RDF(Resource Description Framework),即資源描述框架,是W3C推薦的用來描述WWW上的信息資源及其之間關係的語言規範。RDF(S)是語義網的重要組成部分,它使用URI來標識不同的對象(包括資源節點、屬性類或屬性值)並可將不同的URI連接起來,清楚表達對象間的關係。
    第四層:本體辭彙層,本體是關於領域知識的概念化、形式化的明確規範。在語義網體系結構中,本體的作用主要表現在:(1).概念描述,即通過概念描述揭示領域知識;(2).語義揭示,本體具有比RDF更強的表達能力,可以揭示更為豐富的語義關係;(3).一致性,本體作為領域知識的明確規範,可以保證語義的一致性,從而徹底解決一詞多義、多詞一義和詞義含糊現象;(4). 推理支持,本體在概念描述上的確定性及其強大的語義揭示能力在數據層面有力地保證了推理的有效性。
    第五層:邏輯層,負責提供公理和推理原則,為智能服務提供基礎。其中,描述邏輯(DescriptionLogic)是基於對象的知識表示的形式化,它吸取了KL-ONE的主要思想,是一階謂詞邏輯的一個可判定子集。它與一階謂詞邏輯不同的是,描述邏輯系統能提供可判定的推理服務。除了知識表示以外,描述邏輯還用在其它許多領域,它被認為是以對象為中心的表示語言的最為重要的歸一形式。描述邏輯的重要特徵是很強的表達能力和可判定性,它能保證推理演算法總能停止,並返回正確的結果。在眾多知識表示的形式化方法中,描述邏輯在十多年來受到人們的特別關注,主要原因在於:它們有清晰的模型-理論機制;很適合於通過概念分類學來表示應用領域;並提供了很用的推理服務。
    第六層證明層和第七層信任層負責提供認證和信任機制。


    具體來說,就是在書寫html時,盡量使用具有語義信息的標籤,例如header,nav,aside,section等代替那些沒有語義信息的標籤,例如big,center,strike,font等(完全可以用css來取代的標籤)。這樣不僅有利於頁面DOM的組織,也有利於機器(主要是搜索引擎)的理解。
    而語義網的目標就是為了使得網路上的信息更加容易被機器理解和查找,從而提升人類使用網路獲取信息的體驗。

    也可以:google "semantic web"


    學術屆將其稱為Web3.0的核心,目標是將當前的網頁提升為計算機能夠「理解」和處理的網頁。 核心思想是標註網頁對象使其對應本體中的實體,並通過邏輯等手段進行自動推理。 作用在於更好整合網路上的資源,使計算機能夠處理分布於不同位置的信息,自動產生問題的解決方案。


    我所理解的web語義化就是一句話:「標題就是標題,段落就是段落...」。

    其實 html 文檔和 word 文檔本質上沒什麼區別,只不過是 html 可以使用 css/js 為其附加樣式和交互,並且能夠在互聯網上快速傳播而已。所以在寫 html 的時候也要像寫 word 文檔一樣,標題就是標題,段落就是段落,圖片就是圖片,列表就是列表,表格就是表格,不要啥都用 div、span 這種什麼都是又什麼都不是的無語義的標籤來描述。看一張網頁是否符合語義化,只要把它所有的 css 文件都拿掉後是否還能結構分明、閱讀順暢。

    當然這還只是 html 標記的語義化, @斯迪 也提到了css的ID、class名同樣也應該具有語義化。同時語義化還有從抽象到具體的概念,比如:內容&>列表&>有序列表&>排行榜,html只能描述到抽象的語義,具體的語義就需要 css 的ID、class名去補充了。

    個人觀點,歡迎拍磚~


    1.語義化標籤只是HTML,CSS本身不存在語義化,CSS的ID和class命名可以語義化。HTML是標籤,CSS是屬性。
    2.語義化標籤簡歷在文檔化頁面的基礎上面,將網頁當做是一個文檔,DOM中的D(document)以及在書寫js是用到的document就已經很清晰的告訴我們,計算機將頁面當做是一個document,我們也可以將頁面歸為document的一種。
    3.HTML標籤本身是意義的。如p---paragraph,li---list,img---image但是有些是無語義化的如div---division並不能呢個表示div標籤裡面內容的屬性和表現樣式。
    4.HTML5在運來HTML的基礎上根據大部分人的開發習慣和一般的網站頁面展現形式,增加了語義化的標籤如&&&&.,其實就是原來的常用特定的div+class。
    5.個人理解是HTML是定義好屬性的XML,語義化HTML可以讓頁面結構更清晰,寫更少的CSS和JS,以及更有利於SEO

    個人理解就是在寫web的時候和寫word時候一樣,在要將標題的地方用標題,在要寫段落的時候寫段落。


    Semantic HTML
    這有一個前人總結的非常棒
    今天搜Semantic HTMl搜到的, 總結的很棒, 看起來困難的話去看看維基百科的相關詞條, 看看之前的歷史也挺有意思 哈哈


    就是人告訴機器


    有一種見人說人話 見鬼說鬼話的意思,這樣大家交流更方便,雖然我都能聽懂,但我不用去轉個彎兒理解。


    總結一下:就是在完成任務的同時,儘可能地利用標籤、class、id去讓更多的人或機器來更好的理解我們的代碼(顯然,這個時候需要一份通用的規範,求指導)


    那些給語義化唱歌的人,我們看看歷史。

    1. html5 kill xhtml
    2. wikipedia kill encarta
    3. rest kill corba
    專家的,複雜的總是被群眾滅啊。


    每個標籤做它該做的事。


    ontology,description logic,semantic Web 美好的願景,然並卵。


    語義化是很複雜的工程問題,每個語義便簽都要有自己故事。


    民工理解: 以前讓人懂就可以了, 現在要讓機器也懂, 不要把不相關的東西爬進去, 例如提示框的內容啊, 提示信息等等和內容關係不大的東西.


    進一步鞏固印歐語系在前沿技術領域的壟斷地位,推動網路文化帝國主義的蓬勃發展。


    語義化的html標籤是一種元數據,用來描述其包裹的內容。

    從這個角度來說語義化更具體的描述了作者對被顯示數據的理解。這樣看不管是人和機器都可以在既定的規範中理解作者的意圖,以便更好的維護和使用數據。


    推薦閱讀:

    如何精準地找到 SYN 攻擊者的真實 IP ?
    極路由和普通路由有什麼區別?

    TAG:互聯網 | 前端開發 | HTML | HTML5 | 計算機網路 |