語義化的HTML結構到底有什么好處？

日期：2013-11-27  來源：攀枝花惠康網絡公司

相信巨匠都知道html和css，知道html結構和css默示分手，知道html語義化，這些都是這幾年的熱點關頭字。語義化的html在國內也是一兩年前才起頭被追捧的，看看此刻群里談論的html結構，關于html結構的面試題，語義化的html占有了很年夜一部門。那么為什么要使用語義化的HTML？語義化的HTML到底有什么益處呢？

語義化的HTML結構首先要強調HTML結構

HTML結構是頁面的骨架，一個頁面就仿佛一幢房子，HTML結構就是鋼精鋼筋混土壤的墻，一幢房子如不美觀沒有鋼精鋼筋混土壤的墻那就是一堆費磚頭，不能住人，不能辦公。css是裝飾材料，是原木地板，是年夜理石，是油漆，是用來裝飾房子的，CSS的強年夜就不用多說了，css如不美觀沒有html結構那就是一堆木板，一同油漆，沒有了現實使用價值。CSS完全依靠引用它的(X)HTML文檔。如不美觀你想使CSS的能力充實闡揚到極致，供給一個用既清潔又有結構的內容的html長短常需要的，“HTML是在互聯網上發布超文本的通用語……HTML使用標簽來對文本結構化”（http://www.w3.org/MarkUp/）。

若有分歧不雅概念，填補，接待留言談判。

曩昔你可能還沒有考慮搜索引擎的爬蟲也是網站的“訪客”,但此刻它們他們現實上是極其珍貴的用戶.沒有他們的話,搜索引擎將無法索引你的網站,然后一般用戶將很難熬來訪謁.

語義化的HTML結構怎么寫？
使用語義標識表記標幟可以確保這些設備以一種有意義的體例來襯著網頁.理想情形下,不美旁觀設備的使命是合適設備自己的前提來襯著網頁.

HTML是一種對文本內容進行結構和意義（或者說“語義”）進行填補的體例。它會告訴我們說：“這行是一個問題，這幾行組成了一個段落。這些文字是項目列表，這些文字是鏈接到互聯網上另一個文件的超鏈接?！敝档米⒅氐氖?，不應該讓HTML來告訴我們：“這些文字是藍色的，這些文字又是紅色的。這部門內容是最最靠右的一欄，這行內容是斜體字?！边@些和默示相關的信息是CSS的工作。在做前端開發的時辰要記?。篐TML告訴我們一塊內容是什么（或其意義），而不是它長的什么樣子。當我們提到“語義標識表記標幟”的時辰，我們所說的HTML應該是完全脫離默示信息的，其中的標簽應該都是語義化地界說了文檔的結構。

心暌癸義化的HTML結構其實很簡單，首先把握html中各個標簽的語義，<div>是一個容器；<strong>是暗示強調；<ul><li>是一個無序列表等等…在看到內容的時辰想想用什么標簽能更好的描述它，是什么就用什么標簽。(轉載請注明出處：WEB前端開發 http://www.css88.com/)

語義化的HTML結構到底有什么益處？
我們知道HTML5新增的標簽，好比<header>和<footer>，html正執政著加倍健壯的語義化的HTML結組成長，xhtml2在這點膳縵慊html5前進前輩，這也是xhtml2衰亡的一個原因，這一點也說了然語義化的HTML結構是html的成長趨向。
1.去失蹤或樣式丟失蹤的時辰能讓頁面呈現清楚的結構：
html自己是沒有默示的，我們看到例如<h1>是粗體，字體巨細2em，加粗；<strong>是加粗的，不要認為這是html的默示，這些其實html默認的css樣式在起浸染，所以去失蹤或樣式丟失蹤的時辰能讓頁面呈現清楚的結構不是語義化的HTML結構的利益，可是瀏覽器都有有默認樣式，默認樣式的目的也是為了更好的表達html的語義，可以說瀏覽器的默認樣式和語義化的HTML結構是不成朋分的。

2.屏幕閱讀器（如不美觀訪客有視障）會完全按照你的標識表記標幟來“讀”你的網頁.

例如,如不美觀你使用的含語義的標識表記標幟,屏幕閱讀器就會“逐個拼出”你的單詞,而不是試著去對它完整發音.

3.PDA、手機等設備可能無法像通俗電腦的瀏覽器一樣來襯著網頁（凡是是因為這些設備對CSS的撐持較弱）.

語義標識表記標幟為設備供給了所需的相關信息,就省去了你自己去考慮所有可能的顯示情形（搜羅現有的或者未來新的設備）.例如,一部手機可以選擇使一段標識表記標幟了問題的文字以粗體顯示.而掌上電腦可能會以斗勁年夜的字體來顯示.無論哪種體例一旦你對文本標識表記標幟為問題,您就可以確信篡奪設備將按照其自身的前提來合適地顯示頁面.

4.搜索引擎的爬蟲也依靠于標識表記標幟來確定上下文和各個關頭字的權重.

5.你的頁面是否對爬蟲輕易理解很是主要,因為爬蟲很年夜水平上會忽略用于默示的標識表記標幟,而只注重語義標識表記標幟.
是以,如不美觀頁面文件的問題被標識表記標幟,而不是,那么這個頁面在搜索結不美觀的位置可能會斗勁靠后.除了晉升易用性外,語義標識表記標幟有利于正確使用CSS和JavaScript,因為其自己供給了良多“鉤鉤”濫暌功用頁面的樣式與行為.
seo首要仍是靠你網站的內容和外部鏈接的。(轉載請注明出處：WEB前端開發 http://www.css88.com/)

HTML是供給網頁文檔內容的上下文結構和寄義；html自己是沒有默示的，我們看到例如<h1>是粗體，字體巨細2em，加粗；<strong>是加粗的，不要認為這是html的默示，這些其實html默認的css樣式在起浸染，所以首先我們要知道html和頁面的默示是沒有關系的，這些是css的工作。HTML在頁面中的浸染就是結構和寄義，通俗點說就是劃分內容，這里放什么，我們放的是什么。(轉載請注明出處：WEB前端開發 http://www.css88.com/)

6.便于團隊開發和維護

W3C給我們定了一個很好的尺度，在團隊中巨匠都遵循這個尺度，可以削減良多差異化的工具，便利開發和維護，提高開發效率，甚至實現模塊化開發。

感謝感動鬼哥，奶茶，小志，偷米飯，Caspar還有css森林群的談判