Html語義化理解
1、什麼是HTML語義化?
基本上都是圍繞著幾個主要的標簽,像標題(H1~H6)、列表(li)、強調(strong em)等等>
根據內容的結構化(內容語義化),選擇合適的標簽(代碼語義化)便於開發者閱讀和寫出更優雅的代碼的同時讓浏覽器的爬蟲和機器很好地解析。
2、為什麼要語義化?
為了在沒有CSS的情況下,頁面也能呈現出很好地內容結構、代碼結構:為了裸奔時好看;
用戶體驗:例如title、alt用於解釋名詞或解釋圖片信息、label標簽的活用;
有利於SEO:和搜索引擎建立良好溝通,有助於爬蟲抓取更多的有效信息:爬蟲依賴於標簽來確定上下文和各個關鍵字的權重;
方便其他設備解析(如屏幕閱讀器、盲人閱讀器、移動設備)以意義的方式來渲染網頁;
便於團隊開發和維護,語義化更具可讀性,是下一步吧網頁的重要動向,遵循W3C標准的團隊都遵循這個標准,可以減少差異化。
3、寫HTML代碼時應注意什麼?
盡可能少的使用無語義的標簽div和span;
在語義不明顯時,既可以使用div或者p時,盡量用p, 因為p在默認情況下有上下間距,對兼容特殊終端有利;
不要使用純樣式標簽,如:b、font、u等,改用css設置。
需要強調的文本,可以包含在strong或者em標簽中(浏覽器預設樣式,能用CSS指定就不用他們),strong默認樣式是加粗(不要用b),em是斜體(不用i);
使用表格時,標題要用caption,表頭用thead,主體部分用tbody包圍,尾部用tfoot包圍。
表頭和一般單元格要區分開,表頭用th,單元格用td;
表單域要用fieldset標簽包起來,並用legend標簽說明表單的用途;
每個input標簽對應的說明文本都需要使用label標簽,並且通過為input設置id屬性,在lable標簽中設置for=someld來讓說明文本和相對應的input關聯起來。
4、HTML5新增了哪些語義標簽
HTML5的目標:書寫更簡潔的HTML代碼,創建更簡單的Web程序。
另人激動的新特性如下:新的html標簽和屬性,完全支持CSS3,視頻和音頻標簽,2D/3D繪圖,本地存儲,本地SQL數據庫。
為什麼要引入語義元素:讓開發人員更直觀地了解頁面每部分的功能表,同時搜索引擎以及視覺障礙人士使用的屏幕閱讀器也能更方便地識別頁面的每一部分。
區塊標簽:
標簽article:表示包含於一個文檔、頁面、應用程序或網站中的一段獨立的內容,也就是說,它能夠獨立地被發布或重新使用。
運用
一些使用article的例子:一片博客、一個論壇帖子、一篇新聞報道、一個用戶評論。
標簽header
一般被放置在頁面的頂部,或者頁面中某個區塊元素的頂部,包含整個頁面或某個區塊的標題、簡介等信息。
一個文檔中可以包含多於一個的header標簽;header標簽不一定非要顯示在頁面的上方,它的內容決定這裡需要使用header標簽,位置並不重要;可以為body,article,section和aside增加header元素。
標簽footer
一般被放置在頁面的底部,或者頁面中某個區塊元素的底部。
標簽nav
表示頁面的導航,可以通過導航連接到網站的其他頁面,或當前頁面的其他部分。
搜索引擎或屏幕閱讀器會根據nav標簽確定網站內容,不是任何一組超鏈接都適合放在nav標簽中。
標簽aside
包含的內容不是頁面的主要內容,具有獨立性,是對頁面內容的補充。
一些使用aside的例子:頁面側邊欄;廣告;友情鏈接;文章引語(內容摘要)。
標簽section
一個主題性的內容分組,通常包含一個頭部(header),可能還會有一個尾部(footer)。
標簽div和section的比較:標簽div應用更廣泛,只要你想為一個區域定義一個樣式,就可以使用div標簽;標簽section包含的內容是一個明確的主題,通常有標題區域。
內容分組標簽:
標簽main
顯示頁面的主體內容;每個頁面只能包含一個main標簽;main標簽中不包含網站標題、logo、主導航、版權聲明等信息。
標簽figure
定義媒介內容的分組,以及它們的標題。
標簽figcaption
定義figure元素的標題。
文本級別的語義標簽:
標簽time
HTML5的新標簽。表示一個日期,或者一個時間,或者同時表示一個日期和時間值。
標簽i和b
HTML4中已經存在,在HTML5中被賦予了新的語義化功能的標簽。
標簽i
在HTML4中,是修飾文字樣式的,將文字顯示為斜體文本;在HTML5中,表示強調不同的情緒或聲音,也可以表示技術術語、生物分類、來自另一種語言的成語或習語、一個想法等等。
標簽b
在HTML4中,是修飾文字樣式的,將文字顯示為粗體文本;在HTML5中,表示文檔中的關鍵字、商品名稱等。
標簽em和strong
在HTML4中就已經有了語義化的功能。
標簽em:emphasis 強調,標簽中的內容是用來強調的重點內容,會被浏覽器顯示成斜體文本。
標簽strong:表示非常重要、嚴重性或內容的緊迫性;會被浏覽器顯示成粗體文本。
使用建議:如果你只是單純的想把文字的樣式顯示為斜體或粗體,請不要使用這幾個語義標簽,W3C建議我們要在CSS樣式表中定義文字樣式。