語義化你的HTML標籤

2022-08-01 03:45:12 字數 2403 閱讀 6162

作為乙個前端開發人員,你要是沒有聽說過css,那你肯定是乙個「out-man」。隨著css的深入人心,結構與表現與行為的逐漸分離,html語義化成了炙手可熱的賣點。

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

乙個網頁就好像一幢房子,html結構就是鋼筋混泥土的牆,一幢房子如果沒有鋼筋混泥土的牆那就是一堆廢磚頭,也就稱不上是房子了。css是裝飾材 料,是油漆,是用來裝飾房子的。css如果沒有html結構那就什麼也不是了,沒有了實際使用價值。css完全依靠引用它的(x)html文件。如果你想 使css的能力發揮到極致,提供乙個用既乾淨又有結構的html是非常必要的。

其實html中的標籤都有他自身的含義,只是常常被忽視——就像**一直充當著網頁布局的角色。還好隨著css

的重現江湖,**也終於回到他的本質工作——列表資料。它會告訴我們說:「這行是乙個標題;這幾行組成了乙個段落;這些文字是專案列表……」在做前端開發

的時候要記住:html告訴我們一塊內容是什麼(或其意義),而不是它長的什麼樣子。

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

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

p

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

來換行了,而且不需要

來區分段落與段落。p中的文字會自動換行,而且換行的效果優於

。段落與段落之間的空隙也可以利用css來控制,很容易而且清晰的區分出段落與段落。

、、

無序列表,這個被大家廣泛的使用,有序列表也挺常用。在web標準化過程中,還被

、、

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

、< strong>

是用作強調的,strong是用作重點強調的。

、、、< caption >、 summary

xhtml中的**不再是用來布局。如果是為了標記列表的資料,就應該使用**了。為**標題,屬性summar為摘要(要想

提高搜尋的排名這個絕對不應該少),標籤為首部說明,標籤為**頭

部,標籤為**主體內容,標籤為**尾部。

,

知道del,就不要再用做刪除線了,用del顯然更具有語義化。而且del還帶有cite和datetime來表明刪除的原因以及刪除的時間。ins是表示插入,也有這樣的屬性。

標籤是表示web頁面上的簡稱,標籤為取首字母縮寫。

alt屬性和title屬性

title屬性用來為元素提供額外說明資訊,但是並不是必須的。

讓你語義化html結構的無數條理由:

1.去掉或樣式丟失的時候能讓頁面呈現清晰的結構:

html本身是沒有表現的,我們看到例如是粗體,字型大小2em,加粗;是加粗的,

不要誤會這是html的表現,這些其實是html預設的css樣式在起作用。所以去掉或樣式丟失的時候,也能讓頁面呈現清晰的結構,增強頁面的可讀性。

2.螢幕閱讀器(如果訪客有視障)會完全根據你的標記來「讀」你的網頁

如果你使用的含語義的標記,螢幕閱讀器會根據你的標籤來判斷網頁的內容,而不是乙個字母乙個字母的拼寫出來。

3.pda、手機等裝置可能無法像普通電腦的瀏覽器一樣來渲染網頁(因為這些裝置對css的支援較弱)。

使用語義標記可以確保這些裝置以一種有意義的方式來渲染網頁。理想情況下,**裝置的任務是符合裝置本身的條件來渲染網頁。

4.搜尋引擎的爬蟲也依賴於標記來確定上下文和各個關鍵字的權重。

搜尋引擎的爬蟲也是**的「訪客」,現在它們是極其寶貴的使用者。沒有他們的話,搜尋引擎將無法索引你的**,然後一般使用者將很難過來訪問。

5.便於團隊開發和維護

在團隊中大家都遵循同乙個標準,可以減少很多差異化的東西,方便開發和維護,提高開發效率,甚至實現模組化開發。

**出處:

語義化你的HTML 標籤

作為乙個前端開發人員,你要是沒有聽說過css,那你肯定是乙個 out man 隨著css的深入人心,結構與表現與行為的逐漸分離,html語義化成了炙手可熱的賣點。語義化的html首先要強調html結構 乙個網頁就好像一幢房子,html結構就是鋼筋混泥土的牆,一幢房子如果沒有鋼筋混泥土的牆那就是一堆廢...

html語義化標籤 HTML語義化

html語義化的發展分成三個階段 原始階段 這個階段寫html標籤的主要是最早的全棧開發人員,由於對頁面的美化需求還處在最基本的層面,因此大多使用標籤,這樣的缺點也很明顯,後期維護人員很難從眾多的標籤中找到自己需要的內容。美工階段 對頁面美化需求的提公升,催生了這一階段的 美工 人員,對標籤的使用也...

HTML語義化標籤

什麼是html的語義化標籤?在前端開發的過程當中,通常會使用h1 h6作為標題,使用ul li作為列表等等,通過這些標籤我們可以知道其語義,但除了語義之外,還存在其他的作用。那麼語義化標籤有什麼作用呢?第一,增強 的可讀性,也就是語義化,便於團隊的開發和維護。第二,有利於seo,seo依賴於語義化標...