怎樣理解HTML5和CSS3的語義化標籤？

01-14

透徹點，這是搜索引擎根據檢索出來的結果統計後定製的幾個單詞。然後成了標準。是相對的語義化，不是絕對的語義化。

HTML5的語義化是給計算機看的

CSS3在國內現在的應用主要用來做漸進增強

比如這樣是尊重html（不一定html5）語義的寫法

& ---- 1 道可道，非常道 &《道德經》，老子& &

但這樣不是

& --- 2 & & & & &

很容易因為某個元素有某種特別樣式去用這個元素，但這種時候很多是不尊重語義的。也有一路div到底的，這樣是語義不明的，用好html標籤是一種自製的藝術。

為什麼這很重要，因為多數人能看見，能根據樣式來區分語義，但想像你看不見，只用用screen reader，這時候例子1就是可用的，例子2就會讓用戶費解，因為語義不準確。

語義是尊重標記本來的意思，用在該用的地方。

【小測驗：你對HTML5了解有多少？】

如果你是個程序員，在進入這新的一年之際，對你的職業生涯最重要的事情是什麼？如果你一時想不出來，我來告訴你，是檢查一下自己的技術方向是否符合當今最新技術潮流，檢查一下自己的技術水平是否能達到將來軟體趨勢的要求。如果你對自己心裡沒譜，不確定自己的技術方向是否正確，技術水平是否合格，那唯一你要做的事情就是：做一個測試。

在下面的這張圖標里，我們列舉了10道基礎的HTML5/CSS3考題，它們將幫助你判斷你是否為最新的開發趨勢做好了準備。

這些題都很簡單。這幅圖的前半部分是問題，下半部分是答案，請先做題，做完題再看你回答的是否正確。

? 答對8道或更多 – 你對這些知識了解的相當不錯。

? 6-7道正確 – 對於答錯的那幾道題，你需要做進一步學習，包括這幾道題涉及的相關知識領域。

? 少於5道 – 你需要努力了。但不要擔心，現在學習還不晚，趕緊去找幾本這方面的書或參加個培訓班吧。

更多好文章：

首先標籤語義化是指HTML，不是CSS

什麼是標籤語義化

標籤的語義

通過標籤判斷內容語義，例如根據h1標籤判斷出內容是標題，根據&

判斷內容是段落、&標籤是輸入框等。

判斷標籤是否語義化

去掉樣式，看網頁結構是否組織良好有序，是否仍然有很好的可讀性。

為什麼標籤要語義化

1. 搜索引擎友好。 2. 更容易讓屏幕閱讀器讀出網頁內容。 3. 去掉或樣式丟失的時候能讓頁面呈現清晰的結構。 4. 便於團隊開發和維護。

如何使標籤更具語義化

標題內容型

標題使用&而不是&,段落使用&

標籤，錨點使用&。

表單

分組表單要用&標籤包起來，並用&標籤進行說明表單的用途。

每個&標籤對應的說明文本都需要使用label標籤，並且通過為&設置id屬性，在&標籤中設置「for=someId」來讓說明文本和相應的&關聯起來。

表格

表格標題要使用&，表頭使用&包圍，主體部分使用包圍，尾部使用tfoot包圍，表頭和一般單元格要區分開，表頭用th,一般單元格用td`。

應注意的問題

儘可能減少使用無語義標籤div和span。
語義不明顯，可以用p也可以使用div的情況下，盡量用p。
不要使用純樣式標籤，例如b、font和u等，改用CSS設置。
使用HTML5的結構元素，HTML5新特性一節中會介紹。

部分標籤全稱與中文翻譯

參考資料

《編寫高質量代碼——Web前端開發修鍊之道》

1.語義化標籤只是HTML，CSS不存在語義化。HTML是標籤，CSS是屬性。

2.語義化標籤簡歷在文檔化頁面的基礎上面，將網頁當做是一個文檔，DOM中的D（document）以及在書寫js是用到的document就已經很清晰的告訴我們，計算機將頁面當做是一個document，我們也可以將頁面歸為document的一種。

3.HTML標籤本身是意義的。如p---paragraph，li---list，img---image但是有些是無語義化的如div---division並不能呢個表示div標籤裡面內容的屬性和表現樣式。

4.HTML5在運來HTML的基礎上根據大部分人的開發習慣和一般的網站頁面展現形式，增加了語義化的標籤如&&&&.

5.個人理解是HTML是定義好屬性的XML，語義化HTML可以讓頁面結構更清晰，寫更少的CSS和JS，以及更有利於SEO

你們回答的有幾個真正測過搜索引擎差異的

HTML的語義化最直接的好處就是有利於SEO，使代碼被搜索小蜘蛛更容易的讀懂。HTML5做的一個重大改善就是HTML的語義化，看看增加的那些標籤的名字就知道了。

關於CSS的語義化，這也是w3c正在做的事。比如最近很火的FlexBox，它幾乎革新了CSS的布局方式。傳統的水平居中我們一般用float+margin或者position實現，但這是相當不符合語義化的。float本意是浮動，margin是用來調節外邊距的，用這種方式進行布局，其實也是一種hack。而position本意是用來定位的，也是不適合拿來布局。在FlexBox中，一切布局都變得簡單而又語義化。水平居中?justify-content:space-around搞定。垂直居中？align-items:center。這樣寫出的代碼不僅清晰易懂，也提升了頁面的性能(過多的浮動由於脫離文檔流會降低性能)。

總結:無論是HTML還是CSS，都在往語義化這個方向走，語義化不僅對瀏覽器友好，也是降低了編碼人員的認知負擔。

html5語義化標籤主要分為結構和功能，都是搜索引擎統計出來使用頻率最高的。

結構上的我感覺是2個作用，第一是使閱讀者（人）對網站更加清晰，很容易將網站分塊，便於閱讀，而且可以減少單獨再寫class，第二是對於機器（搜索引擎，屏幕閱讀器）更加友好，讓機器更加準確的去理解你的網頁。

功能上的是瀏覽器在底層對其中的一些標籤實現了一些比較複雜的功能，比如video,audio，還有一些屬性，這是為了方便開發者，讓更多的開發者來使用我的瀏覽器。

目前來說語義化的作用並不是那麼大，你仍然可以用以前的div來做，但是如果堅持會讓你成為一種習慣，能寫出更加優雅的代碼，也是一種擁抱未來的態度。

一、什麼是語義化的HTML？

語義化的HTML就是寫出的HTML代碼，符合內容的結構化（內容語義化），選擇合適的標籤（代碼語義化），能夠便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

二、為什麼要做到語義化？

1.有利於SEO，有利於搜索引擎爬蟲更好的理解我們的網頁，從而獲取更多的有效信息，提升網頁的權重。

2.在沒有CSS的時候能夠清晰的看出網頁的結構，增強可讀性。

3.便於團隊開發和維護，語義化的HTML可以讓開發者更容易的看明白，從而提高團隊的效率和協調能力。

4.支持多終端設備的瀏覽器渲染。

三、語義化HTML改怎麼做呢？

在做前端開發的時候要記住：HTML 告訴我們一塊內容是什麼（或其意義），而不是它長的什麼樣子，它的樣子應該由CSS來決定。

寫語義化的 HTML 結構其實很簡單，首先掌握 HTML 中各個標籤的語義，在看到內容的時候想想用什麼標籤能更好的描述它，是什麼就用什麼標籤。

&~& ，作為標題使用，並且依據重要性遞減，& 是最高的等級。

段落標記，知道了 &

作為段落，你就不會再使用 &
來換行了，而且不需要 &
來區分段落與段落。&

中的文字會自動換行，而且換行的效果優於 &
。段落與段落之間的空隙也可以利用 CSS 來控制，很容易而且清晰的區分出段落與段落。

&、&、&，& 無序列表，這個被大家廣泛的使用，& 有序列表不常用。在 Web 標準化過程中，& 還被更多的用於導航條，本來導航條就是個列表，這樣做是完全正確的，而且當你的瀏覽器不支持 CSS 的時候，導航鏈接仍然很好使，只是美觀方面差了一點而已。

&、&、&，& 就是「定義列表」。比如說詞典裡面的詞的解釋、定義就可以用這種列表。

&、&，& 是用作強調，& 是用作重點強調。

&、&、&、&， (X)HTML中的表格不再是用來布局。

讓標籤語義化成為一種習慣 - wanglehui - 博客園

http://www.dengpeng.org/archives/753

1、html5新增的結構標籤，可以簡單看成，一個頁面用「結構標籤」按表達不同的內容，分成不同的區域，這個很好理解（具體的看書中的詳解）。

2、css3做網頁，很多特效並不會常用，因為瀏覽器的差異，把常用的記住就行了（圓角、陰影）。