語義化的HTML首先要強調HTML結構
一個網頁就好像一幢房子，HTML結構就是鋼筋混泥土的牆，一幢房子如果沒有鋼筋混泥土的牆那就是一堆廢磚頭，也就稱不上是房子了。CSS是裝飾材料，是油漆，是用來裝飾房子的。CSS如果沒有html結構那就什麼也不是了，沒有了實際使用價值。CSS完全依靠引用它的(X)HTML文檔。如果你想使CSS的能力發揮到極致，提供一個用既干淨又有結構的HTML是非常必要的。
其實HTML中的標簽都有他自身的含義，只是常常被忽視——就像表格一直充當著網頁布局的角色。還好隨著CSS的重現江湖，表格也終於回到他的本質工作——列表數據。它會告訴我們說：“這行是一個標題；這幾行組成了一個段落；這些文字是項目列表……”在做前端開發的時候要記住：HTML告訴我們一塊內容是什麼（或其意義），而不是它長的什麼樣子。
寫語義化的HTML結構其實很簡單，首先掌握HTML中各個標簽的語義，在看到內容的時候想想用什麼標簽能更好的描述它，是什麼就用什麼標簽。
<Hx>
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作為標題使用，並且依據重要性遞減。<h1>是最高的等級。
P
段落標記，知道了 p 作為段落，你就不會再使用<br />來換行了，而且不需要<br /> 來區分段落與段落。p中的文字會自動換行，而且換行的效果優於<br />。段落與段落之間的空隙也可以利用CSS來控制，很容易而且清晰的區分出段落與段落。
<ul>、<ol>、<li>
<ul>無序列表，這個被大家廣泛的使用，<ol>有序列表也挺常用。在web標准化過程中，<ul> 還被更多的用於導航條，本來導航條就是個列表，這樣做是完全正確的，而且當你的浏覽器不支持CSS的時候，導航鏈接仍然很好使，只是美觀方面差了一點而已。
<dl>、<dt>、<dd>
dl就是“定義列表”。比如說詞典裡面的詞的解釋、定義就可以用這種列表。
<em>、< strong >
<em> 是用作強調的，strong是用作重點強調的。
<table>、<td>、<th>、< caption >、 summary
XHTML中的表格不再是用來布局。如果是為了標記列表的數據，就應該使用表格了。<th>為表格標題，屬性summar為摘要（要想提高搜索的排名這個絕對不應該少），<caption>標簽為首部說明，<thead>標簽為表格頭部，<tbody>標簽為表格主體內容，<tfoot>標簽為表格尾部。
<ins>, <del>
知道del，就不要再用<s>做刪除線了，用del顯然更具有語義化。而且del還帶有cite和datetime來表明刪除的原因以及刪除的時間。ins是表示插入，也有這樣的屬性。
<abbr>、<acronym>
<abbr>標簽是表示web頁面上的簡稱，<acronym>標簽為取首字母縮寫。
alt屬性和title屬性
title屬性用來為元素提供額外說明信息，但是並不是必須的。
alt屬性為不能顯示圖像、窗體或applets的用戶代理（UA），指定替換文字。替換文字的語言由lang屬性指定。
讓你語義化HTML結構的寫標准的div+css前端開發無數條理由：
1.去掉或樣式丟失的時候能讓頁面呈現清晰的結構：
HTML本身是沒有表現的，我們看到例如<h1>是粗體，字體大小2em，加粗；<strong>是加粗的，不要誤會這是HTML的表現，這些其實是HTML默認的div+css樣式在起作用。所以去掉或樣式丟失的時候,也能讓頁面呈現清晰的結構，增強頁面的可讀性。
2.屏幕閱讀器（如果訪客有視障）會完全根據你的標記來“讀”你的網頁。
如果你使用的含語義的標記,屏幕閱讀器會根據你的標簽來判斷網頁的內容，而不是一個字母一個字母的拼寫出來。
3.PDA、手機等設備可能無法像普通電腦的浏覽器一樣來渲染網頁（因為這些設備對div+css的支持較弱）。
使用語義標記可以確保這些設備以一種有意義的方式來渲染網頁。理想情況下,觀看設備的任務是符合設備本身的條件來渲染網頁。
4.搜索引擎的爬蟲也依賴於標記來確定上下文和各個關鍵字的權重。
搜索引擎的爬蟲也是網站的“訪客”,現在它們是極其寶貴的用戶。沒有他們的話,搜索引擎將無法索引你的網站,然後一般用戶將很難過來訪問。
5.便於團隊開發和維護
在團隊中大家都遵循同一個標准，可以減少很多差異化的東西，方便開發和維護css，提高開發效率，甚至實現模塊化開發。