語義化你的HTML標籤和屬性

分離結構與表現的另乙個重要方面是使用語義化的標記來構造文件內容。乙個 xhtml 元素的存在就意味被標記內容的那部分有相應的結構化的意義，沒有理由使用其他的標記。換句話說，不要讓 css 使乙個 html 元素看起來就像另乙個 html 元素，比如用來代替標記標題。

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

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

具體的語義和用途在，xhtml1.0 tag 參考中都已經說明，這裡將一些容易遺忘或者混淆的tags和屬性予以補充。

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

例如

<
h1>文件標題
h1>
<
h2>次級標題
h2>
而不要使用
<
div 
class
="title"
>文件標題
div>，或者<
span 
class
="title"
>文件標題
span
>
.很明顯搜尋引擎對於後者是不會認為他是標題的。
<
p>

段落標記，知道了作為段落，你就不會再使用

來換行了，而且不需要

來區分段落與段落。

中的文字會自動換行，而且換行的效果優於

。段落與段落之間的空隙也可以利用css來控制，很容易而且清晰的區分出段落與段落。在利用行高(line-height)很容易的定義出行間距，再定義首字下沉等效果，那就挺完美了。

例如：

p>藍色理想 www.blueidea.com 誕生於2023年的10月。從成立之初，藍色理想就以建設**設計與開發人員之家為宗旨，以介紹網路開發技術與**創作設計交流為主要內容。其**內容製作精良，每天都會有會員精心製作的教程發布，無私地對網友進行幫助，而且還舉辦過不少設計比賽並開發了很多目前仍被許多**應用的相關程式。而所發布的作品與點評受到了多家**關注及行家的好評，同時也從中確立了自己的社會地位，於是一批又一批的網路同仁加盟了藍色理想，成為國內最大的設計類站點之一。

、、

無序列表，很常見的到了大家廣泛的使用，有序列表也挺常用。在web標準化過程中，還被更多的用於導航條，本來導航條就是個列表，這樣做是完全正確的，而且當你的瀏覽器不支援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>
這部拍攝於2023年的《上海灘》堪稱是香港電視史上最成功、最經典的劇集。
當年在香港播出以後，產生了巨大的轟動效應。
dd>
<
dt>周潤發
dt>
<
dd>
和所有偉大的影星一樣，周潤發印證了乙個時代，乙個香港電影的**時代。
風衣墨鏡、冷血雙槍、陽光微笑，都封存膠片之中，當我們回首尋望的時候，發哥已被刻為乙個時代的座標。
dd>
dl>

、cite 、、

論壇和blog經常會用到引用別人的話，用來標記簡短的單行引用。web瀏覽器會自動識別在之間的內容。不幸的是，ie不能識別，並且有些時候，會引起一些可訪問性(accessibility)的問題。正因為如此，一些人建議盡量不要使用 ,手動的插入引用標記。在乙個包含適當的類的中加入單行的引用內容，那麼就可以用css來給引用設計樣式了，但是這個沒有語義上的意義。您可以讀讀mark pilgrim寫的the q tag ( )關於處理相關問題的看法。

對於那些一段或者好幾段的長篇引用，就應當使用了。css可以用來定義引用的樣式。注意，一段文章是不可以直接放在中的，引用的內容還必須包含在乙個元素中，通常是。屬性cite既可以與一起用，也可以與一起用，用來提供引用內容的**位址。需要注意的是，如果你使用來代替標記引用內容,那麼你就不能使用 cite屬性了。

例如:

cite

>designing with web standards

cite

is an excellent book by jeffrey zeldman.

cite

>孔子

cite

>曰：<

q>學而不思則罔，思而不學則殆

q>.

p>the w3c says that <

q cite

="struct/text.html#h-9.2.1"

the presentation of phrase elements

depends on the user agent.

q>.

blockquote

cite

="">

p>「我們大部分人都有深刻體驗，每當主流瀏覽器版本的公升級，我們剛建立的**就可能變得過時，我們就需要公升級或者重新建造一遍**。例如1996-2023年典型的"瀏覽器大戰"，為了相容 netscape 和 ie，**不得不為這兩種瀏覽器寫不同的**。同樣的，每當新的網路技術和互動裝置的出現，我們也需要製作乙個新版本來支援這種新技術或新裝置，例如支援手機上網的 wap 技術。類似的問題舉不勝舉：****臃腫、繁雜浪費了我們大量的頻寬針對某種瀏覽器的 dhtml 特效，遮蔽了部分潛在的客戶；不易用的**，殘障人士無法瀏覽**等等。這是一種惡性迴圈，是一種巨大的浪費。」

blockquote

、

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

例如:
<

p><

em>強調

em> 的文字通常用斜體顯示，然而， <

strong

>特別強調

strong

> 的文字通常以粗體顯示。

p>

、、、< caption >、 summary

xhtml中的**不應用來布局。然而如果是為了標記列表的資料，就應該使用**了。為**標題，屬性summar為摘要，標籤為首部說明，標籤為**頭部，標籤為**主體內容，標籤為**尾部。

其中還可以使用scope 可用於取代headers屬性，標記含有表頭資訊的單元格，其中各數值的內容如下：

row 指示當前單元格，為包含當前單元格的行提供相關的表頭資訊。

col 指示當前單元格，為根據當前單元格指定的列提供相應的表頭資訊。

rowgroup 指示當前單元格，為包含當前單元格的其餘行組提供相關的表頭資訊。

colgroup 指示當前單元格，為根據當前單元格指定的其餘列組提供相應的表頭資訊。

abbr 用於定義表頭單元格中的縮寫名，如果沒有定義該屬性，則將預設單元格內容為節略形式。

例如:

<
table 
id="mytable"
cellspacing
="0"
summary
>
<
caption
>table 1: power mac g5 tech specs 
caption
>
<
tr>
<
th scope
="col"
abbr
="configurations"
>configurations
th>
<
th scope
="col"
abbr
="dual 1.8"
>dual 1.8ghz
th>
tr>
table
>

語義化你的HTML標籤和屬性

語義化你的HTML 標籤

語義化你的HTML標籤

html語義化標籤 HTML語義化

語義化你的HTML標籤和屬性

語義化你的HTML 標籤

語義化你的HTML標籤

html語義化標籤 HTML語義化

相關推薦