1. 程式人生 > >如何理解HTML結構的語意化

如何理解HTML結構的語意化

HTML5都有哪些語義化的標籤:

HTML5: <header></header>
HTML4: <div></div>

<header> 標籤定義 section 或 document 的頁首。

HTML5: <footer></footer>
HTML4: <div></div>

<footer> 標籤定義 section 或 document 的頁尾。典型地,它會包含創作者的姓名、文件的創作日期以及/或者聯絡資訊。


HTML5: <nav></nav>
HTML4:<ul></ul>

<nav> 標籤定義導航連結的部分。

HTML5: <section></section>
HTML4: <div></div>

<section> 標籤定義文件中的節(section、區段)。比如章節、頁首、頁尾或文件中的其他部分。


HTML5:<article></article>
HTML4:<div></div>

<article>標籤定義外部的內容。比如來自一個外部的新聞提供者的一篇新的文章,或者來自 blog 的文字,或者是來自論壇的文字。亦或是來自其他外部源內容。


HTML5:<audio src="someaudio.wav">您的瀏覽器不支援 audio 標籤。</audio>
HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>

<audio> 標籤定義聲音,比如音樂或其他音訊流。


HTML5: <video src="movie.ogg" controls="controls">您的瀏覽器不支援 video 標籤。</video>
HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>

<video> 標籤定義視訊,比如電影片段或其他視訊流。

以上是目前使用頻率較高的語義化標籤 。更詳細的介紹在:點選開啟連結

什麼是HTML語義化?

在HTML 5出來之前,我們用div來表示頁面章節,但是這些div都沒有實際意義。(即使我們用css樣式的id和class形容這塊內容的意義)。這些標籤只是我們提供給瀏覽器的指令,只是定義一個網頁的某些部分。但現在,那些之前沒“意義”的標籤因為因為html5的出現消失了,這就是我們平時說的“語義”。

為什麼要語義化?

1.去掉或樣式丟失的時候能讓頁面呈現清晰的結構:
html本身是沒有表現的,我們看到例如<h1>是粗體,字型大小2em,加粗;<strong>是加粗的,不要認為這是html的表現,這些其實html預設的css樣式在起作用,所以去掉或樣式丟失的時候能讓頁面呈現清晰的結構不是語義化的HTML結構的優點,但是瀏覽器都有有預設樣式,預設樣式的目的也是為了更好的表達html的語義,可以說瀏覽器的預設樣式和語義化的HTML結構是不可分割的。

2.螢幕閱讀器(如果訪客有視障)會完全根據你的標記來“讀”你的網頁.
例如,如果你使用的含語義的標記,螢幕閱讀器就會“逐個拼出”你的單詞,而不是試著去對它完整發音.

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

使用語義標記可以確保這些裝置以一種有意義的方式來渲染網頁.理想情況下,觀看裝置的任務是符合裝置本身的條件來渲染網頁.
語義標記為裝置提供了所需的相關資訊,就省去了你自己去考慮所有可能的顯示情況(包括現有的或者將來新的裝置).例如,一部手機可以選擇使一段標記了標題的文字以粗體顯示.而掌上電腦可能會以比較大的字型來顯示.無論哪種方式一旦你對文字標記為標題,您就可以確信讀取裝置將根據其自身的條件來合適地顯示頁面.

4.搜尋引擎的爬蟲也依賴於標記來確定上下文和各個關鍵字的權重.
過去你可能還沒有考慮搜尋引擎的爬蟲也是網站的“訪客”,但現在它們他們實際上是極其寶貴的使用者.沒有他們的話,搜尋引擎將無法索引你的網站,然後一般使用者將很難過來訪問.

5.你的頁面是否對爬蟲容易理解非常重要,因為爬蟲很大程度上會忽略用於表現的標記,而只注重語義標記.
因此,如果頁面檔案的標題被標記,而不是,那麼這個頁面在搜尋結果的位置可能會比較靠後.除了提升易用性外,語義標記有利於正確使用CSS和JavaScript,因為其本身提供了許多“鉤鉤”來應用頁面的樣式與行為.SEO主要還是靠你網站的內容和外部連結的。

6.便於團隊開發和維護
W3C給我們定了一個很好的標準,在團隊中大家都遵循這個標準,可以減少很多差異化的東西,方便開發和維護,提高開發效率,甚至 實現模組化開發。

寫HTML程式碼時應注意什麼?

1、儘可能少的使用無語義的標籤div和span;
2、在語義不明顯時,既可以使用div或者p時,儘量用p, 因為p在預設情況下有上下間距,對相容特殊終端有利;

3、不要使用純樣式標籤,如:b、font、u等,改用css設定。
4、需要強調的文字,可以包含在strong或者em標籤中(瀏覽器預設樣式,能用CSS指定就不用他們),strong預設樣式是加粗(不要用b),em是斜體(不用i);

5、使用表格時,標題要用caption,表頭用thead,主體部分用tbody包圍,尾部用tfoot包圍。表頭和一般單元格要區分開,表頭用th,單元格用td;
6、表單域要用fieldset標籤包起來,並用legend標籤說明表單的用途;

7、每個input標籤對應的說明文字都需要使用label標籤,並且通過為input設定id屬性,在lable標籤中設定for=someld來讓說明文字和相對應的input關聯起來。