如何理解語義化標(biāo)簽?常用語義化標(biāo)簽有哪些？

如何理解語義化標(biāo)簽?

我們平時使用DIV+CSS的布局，但是通過DIV+CSS布局的頁面HTML文檔不夠清晰，不利于瀏覽器對頁面的讀取。語義化標(biāo)簽的主要目的就是發(fā)揮標(biāo)簽和屬性的用途及作用，通過標(biāo)簽本身的意義合作來優(yōu)化HTML文檔結(jié)構(gòu)。

語義化標(biāo)簽有什么優(yōu)勢?

1、 方便頁面布局

如果我們用div來實現(xiàn)此圖的布局，那么就要涉及到加類名或者選擇符的問題，還有起名字，很多時候就會弄混。直接用語義化標(biāo)簽就會標(biāo)記出每個區(qū)域的作用并且更好是實現(xiàn)頁面布局。

2、 便于特殊化設(shè)備讀取

語義化標(biāo)簽的實現(xiàn)有利于一些特殊設(shè)備的解析，比如盲人閱讀器會完全根據(jù)你的標(biāo)簽來“讀”你的網(wǎng)頁。

3、 利于SEO優(yōu)化

語義化標(biāo)簽?zāi)芎退阉饕娼⒘己脺贤?，通過標(biāo)簽本身的含義(例如：h1是標(biāo)題，p是段落，strong是強調(diào))來理解頁面內(nèi)容是搜索引擎分析和理解頁面的重要方式之一，使用語義化標(biāo)簽有助于提高頁面關(guān)鍵詞排名，減少SEO優(yōu)化難度。

4、 便于團隊開發(fā)和維護

語義化更具可讀性，是下一步網(wǎng)頁開發(fā)的重要動向，如果遵循W3C標(biāo)準(zhǔn)的團隊都遵循這個標(biāo)準(zhǔn)，可以減少差異化。

常見的語義化標(biāo)簽

header標(biāo)簽

HTML5中的header元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，該元素可以包含所有通常放在頁面頭部的內(nèi)容。header元素通常用來放置整個頁面或頁面內(nèi)的一個內(nèi)容區(qū)塊的標(biāo)題，也可以包含網(wǎng)站Logo圖片、搜索表單或者其他相關(guān)內(nèi)容。

nav標(biāo)簽

nav元素用于定義導(dǎo)航鏈接，是HTML5新增的元素，該元素可以將具有導(dǎo)航性質(zhì)的鏈接歸納在一個區(qū)域中，使頁面元素的語義更加明確。其中的導(dǎo)航元素可以鏈接到站點的其他頁面，或者當(dāng)前頁的其他部分。

article標(biāo)簽

article元素代表文檔、頁面或者應(yīng)用程序中與上下文不相關(guān)的獨立部分，該元素經(jīng)常被用于定義一篇日志、一條新聞或用戶評論等。article元素通常使用多個section元素進(jìn)行劃分，一個頁面中article元素可以出現(xiàn)多次。

aside標(biāo)簽

aside元素用來定義當(dāng)前頁面或者文章的附屬信息部分，它可以包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條等其他類似的有別于主要內(nèi)容的部分。

aside元素的用法主要分為兩種。

● 被包含在article元素內(nèi)作為主要內(nèi)容的附屬信息。

● 在article元素之外使用，作為頁面或站點全局的附屬信息部分。最常用的使用形式是側(cè)邊欄，其中的內(nèi)容可以是友情鏈接、廣告單元等。

section標(biāo)簽

section元素用于對網(wǎng)站或應(yīng)用程序中頁面上的內(nèi)容進(jìn)行分塊，一個section元素通常由內(nèi)容和標(biāo)題組成。在使用section元素時，需要注意以下3點。

● 不要將section元素用作設(shè)置樣式的頁面容器，那是div的特性。section元素并非一個普通的容器元素，當(dāng)一個容器需要被直接定義樣式或通過腳本定義行為時，推薦使用div。

● 如果article元素、aside元素或nav元素更符合使用條件，那么不要使用section元素。

● 沒有標(biāo)題的內(nèi)容區(qū)塊不要使用section元素定義。

footer標(biāo)簽

footer元素用于定義一個頁面或者區(qū)域的底部，它可以包含所有通常放在頁面底部的內(nèi)容。在HTML5出現(xiàn)之前，一般使用

標(biāo)記來定義頁面底部，而通過HTML5的footer元素可以輕松實現(xiàn)。

與header元素相同，一個頁面中可以包含多個footer元素。同時，也可以在article元素或者section元素中添加footer元素。

猜你喜歡：

怎么用css3畫三角形？css繪制三角形圖文教程

CSS3 box-shadow的用法|box-shadow屬性詳解

JavaScript動畫和CSS3動畫有什么區(qū)別？

CSS3如何設(shè)置顏色不透明度？

傳智教育HTML&JS+前端高手班