首先是關于語義（Semantics）和默認樣式的區別，默認樣式是瀏覽器設定的一些常用tag的表現形式，個人認為他的主要目的就是讓大家直觀的認識標簽(markup)和屬性(attribute)的用途和作用，很明顯Hx系列看起來很像標題，因為擁有粗體和較大的字號。 strong , em 用來區別于其他文字，起到了強調的作用。至于列表和表格很明顯的告訴你他們是做什么的。

其次，語義化的網頁的好處，最主要的就是對搜索引擎友好，又了良好的結構和語義你的網頁內容自然容易被搜索引擎抓取，你網站的推廣便可以省下不少的功夫。

h1 、 h2 、 h3 、 h4 、 h5 、 h6 ,作為標題使用，并且依據重要性遞減。 h1 是最高的等級。例如:

 h1 文檔標題 /h1  h2 次級標題 /h2 

而不要使用 p > p

段落標記，知道了 p 作為段落，你就不會再使用 br/ 來換行了，而且不需要 br/ br/ 來區分段落與段落。 p /p 中的文字會自動換行，而且換行的效果優于 br 。段落與段落之間的空隙也可以利用CSS來控制，很容易而且清晰的區分出段落與段落。在利用行高(line-height)很容易的定義出行間距，再定義首字下沉等效果，那就挺完美了。例如：

 p Admin10000.com 是WEB開發者學習交流的網站,這里提供大量實用的技術文檔及相關資源下載，是網頁設計、網絡編程人員及其愛好者必備網站。 /p  p 希望大家能在這里學到WEB開發知識，啟發靈感，提高自己的WEB開發水平。 /p 

ul html' target='_blank'>無序列表，很常見的到了大家廣泛的使用， ol 有序列表也挺常用。在web標準化過程中， ul 還被更多的用于導航條，本來導航條就是個列表，這樣做是完全正確的，而且當你的瀏覽器不支持CSS的時候，導航鏈接仍然很好使，就是美觀方面差了一點。例如：

 ul  li 項目一 /li  li 項目二 /li  li 項目三 /li  /ul 

 ol  li 第一章 /li  li 第二章 /li  li 第三章 /li  /ol 

dl就是“定義列表”。比如說詞典里面的詞的解釋、定義就可以用這種列表。例如：

 dl  dt Dog /dt  dd A carnivorous mammal of the family Canidae. /dd  /dl 

 dl  dt 上海灘 /dt  dd 這部拍攝于1980年的《上海灘》堪稱是香港電視史上最成功、最經典的劇集。 當年在香港播出以后，產生了巨大的轟動效應。 /dd  dt 周潤發 /dt  dd 和所有偉大的影星一樣，周潤發印證了一個時代，一個香港電影的黃金時代。風衣墨鏡、冷血雙槍、陽光微笑，都封存膠片之中，當我們回首尋望的時候，發哥已被刻為一個時代的坐標。 /dd  /dl 

論壇和blog經常會用到引用別人的話，用 q 來標記簡短的單行引用。Web瀏覽器會自動識別在 q 之間的內容。不幸的是，IE不能識別，并且有些時候， q 會引起一些可訪問性(Accessibility)的問題。正因為如此，一些人建議盡量不要使用 q ,手動的插入引用標記。在一個包含適當的類的 span 中加入單行的引用內容，那么就可以用CSS來給引用設計樣式了，但是這個沒有語義上的意義。 您可以讀讀Mark Pilgrim寫的The Q tag (http://peintomark.org/archives/2002/05/04/the_q_tag )關于處理 q 相關問題的看法。對于那些一段或者好幾段的長篇引用，就應當使用 blockquote 了。CSS可以用來定義引用的樣式。注意，一段文章是不可以直接放在 blockquote 中的，引用的內容還必須包含在一個元素中，通常是 p 。屬性cite既可以與 q 一起用，也可以與 blockquote 一起用，用來提供引用內容的來源地址。需要注意的是，如果你使用 span 來代替 q 標記引用內容,那么你就不能使用 cite屬性了。例如:

 cite Designing with Web Standards /cite is an excellent book by Jeffrey Zeldman.

 p cite 孔子 /cite 曰： q 學而不思則罔，思而不學則殆 /q . /p 

 p The W3C says that q cite= http://www.w3.org/TR/REC-html40/struct/text.html#h-9.2.1 The presentation of phrase elementsdepends on the user agent. /q . /p 

 blockquote cite= http://www.w3cn.org/  p “我們大部分人都有深刻體驗，每當主流瀏覽器版本的升級，我們剛建立的網站就可能變得過時，我們就需要升級或者重新建造一遍網站。例如1996-1999年典型的 瀏覽器大戰 ，為了兼容 Netscape 和 IE，網站不得不為這兩種瀏覽器寫不同的代碼。同樣的，每當新的網絡技術和交互設備的出現，我們也需要制作一個新版本來支持這種新技術或新設備，例如支持手機上網的 WAP 技術。類似的問題舉不勝舉：網站代碼臃腫、繁雜浪費了我們大量的帶寬；針對某種瀏覽器的 DHTML 特效，屏蔽了部分潛在的客戶；不易用的代碼，殘障人士無法瀏覽網站等等。這是一種惡性循環，是一種巨大的浪費。” /p  /blockquote 

em 是用作強調的， strong 是用作重點強調的。 大部分瀏覽器用斜體顯示強調的內容，用粗體來顯示重點強調的內容，然而，這是沒有必要的，如果是為了確定強調內容的顯示方式，最好的方法就是使用CSS來定義他們的表現。當你想要的只是視覺上的效果時，就不要使用強調了。而且如果你想要強調但是還覺得粗體或者斜體不視覺效果沒那么好，特別是斜體對于中文來說，那么你完全可以定義一些其他的比較醒目的樣式達到強調的效果。例如:

 p em 強調 /em 的文本通常用斜體顯示，然而， strong 特別強調 /strong 的文本通常以粗體顯示。 /p 

XHTML中的表格不應用來布局。然而如果是為了標記列表的數據，就應該使用表格了。 th 為表格標題，屬性summar為摘要， caption 標簽為首部說明， thead 標簽為表格頭部， tbody 標簽為表格主體內容， tfoot 標簽為表格尾部。
其中還可以使用scope 可用于取代headers屬性，標記含有表頭信息的單元格，其中各數值的內容如下：
row 指示當前單元格，為包含當前單元格的行提供相關的表頭信息。
col 指示當前單元格，為根據當前單元格指定的列提供相應的表頭信息。
rowgroup 指示當前單元格，為包含當前單元格的其余行組提供相關的表頭信息。
colgroup 指示當前單元格，為根據當前單元格指定的其余列組提供相應的表頭信息。
abbr 用于定義表頭單元格中的縮寫名，如果沒有定義該屬性，則將默認單元格內容為節略形式。
例如:

 table id= mytable cellspacing= 0 summary= The technical specifications of the Apple PowerMac G5 series  caption Table 1: Power Mac G5 tech specs /caption  th scope= col abbr= Configurations > dfn 
 p dfn title= Microsoft web browser Internet Explorer /dfn is the most popular browser used underwater. /p 
 
 ins , del 
 知道del，就不要再用 s 做刪除線了，用del顯然更具有語義化。而且del還帶有cite和datetime來表明刪除的原因以及刪除的時間。ins是表示插入，也有這樣的屬性。例如：
 p It really was ins cite= rarara.html datetime= 20031024 very /ins good. /p 
 code 
 表示是計算機代碼。而默認樣式為打字體。技術論壇和blog中經常遇到。例如：
 abbr 、 acronym 
 abbr 標簽是表示web頁面上的簡稱， acronym 標簽為取首字母縮寫。（注：這里把簡稱和縮寫分開而論，簡稱范圍比縮寫大，取首字母的縮寫用 acronym 標簽）Windows的IE6.0以下的瀏覽器暫不支持 abbr 標簽。 在IE里，你可以應用CSS給 acronym 但是不能應用給 abbr 標簽，IE會為 acronym 標簽的title屬性顯示提示，但是會忽略 abbr 標簽。
 解決方法見: http://www.w3cn.org/article/translate/2005/115.html
 例如:
 abbr title= Cascading Style Sheets CSS /abbr 
 acronym title= Cascading Style Sheets CSS /acronym 
 alt屬性和title屬性
 title屬性用來為元素提供額外說明信息title屬性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有標簽。但是并不是必須的。
 alt屬性為不能顯示圖像、窗體或applets的用戶代理（UA），指定替換文字。替換文字的語言由lang屬性指定。
 
 img src= /img/common/logo.gif width= 90 height= 27 alt= bluediea.com 
 a href= http://www.jluvip.com/blog/article.asp?id=260 title= js獲取單選按鈕的數據 js獲取單選按鈕的數據 /a 
以上就是語義化你的HTML標簽和屬性的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。