語義元素介紹

HTML5標準增加很多新的語意元素，若按種類來區分，有頁面結構上的、文本內容上的、表單里的等等。

而這里主要介紹頁面結構上的新元素。

何謂語意元素

簡單來講，語義元素就是為元素(標簽)賦予某種意義，元素的名稱就是元素要表達的意思。

如 header 表示頁眉、 footer 表示頁腳。

特點

①易于維護：使用語義元素將會有更清晰的頁面結構信息，易于頁面的后續維護。不需要再查看代碼：找到div再找到具體的ClassName。

②無障礙性：有助于屏幕閱讀器和其他輔助工具的讀取。

③利于搜索引擎優化：搜索機器人在檢查一些HTML5的語義元素后，可以收集其索引頁面的信息。

原先界面布局

在頁面的布局中， div 是一個非常多見的元素，配上一定的樣式就可應用于特定場景，如頁眉、側邊欄、導航欄等等。

為了方便維護，設計人員常給這些 div 賦值具有特殊名稱的ClassName(樣式類名)或ID。

例如一個表示頁眉的 div 元素，其ClassName或ID可以為page-header、header等。

頁面結構語意元素

說明

頁面結構的語意元素多用于頁面的整體布局，大多數為塊級元素，只是代替 div 使用，如：頁眉、頁腳等等。

而其自身沒有特別的樣式，還是需要搭配Css使用。

詳細介紹

header ：定義網頁或文章的頭部區域。可包含logo、導航、搜索條等內容。

瀏覽器最低版本：IE 9、Chrome 5

使用說明：

①當用于標注網頁的頁眉時，可包含logo、導航、搜索條等信息。

②當用于標注內容的標題時，只有當標題還附帶其他信息時才考慮用 header ，一般情況下用 h1 標注標題即可。

main ： 定義網頁中的主體內容。

瀏覽器最低版本：IE 不支持、Chrome 35

footer ：定義網頁或文章的尾部區域。可包含版權、備案等內容。

瀏覽器最低版本：IE 9、Chrome 5

使用說明：

①作為網頁的頁腳時，通常包含網站版權、法律限制及鏈接等內容。

②作為文章的頁腳時，通常包含作者相關信息。

nav ：標注頁面導航鏈接。包含多個超鏈接的區域。

瀏覽器最低版本：IE 9、Chrome 5

使用說明：

①一個頁面可包含多個 nav 元素，如頁面的導航和相關文章推薦等。

② footer 區域里的聯系信息、認證信息可不必包含在 nav 元素里。

section ：通常標注為網頁中的一個獨立區域。

瀏覽器最低版本：IE 9、Chrome 5

使用說明：

①可作為網頁中的獨立區域，如文章中的一小節。

article ：完整、獨立的內容塊；里面可包含獨立的 header 、 footer 等結構元素。如新聞、博客文章等獨立的內容快(不包括評論或者作者簡介)。

瀏覽器最低版本：IE 9、Chrome 5

aside ：定義周圍主內容之外的內容塊。如：注解。

瀏覽器最低版本：IE 9、Chrome 5

figure ：代表一段獨立的內容, 經常與 figcaption (表示標題)配合使用, 可用于文章中的圖片、插圖、表格、代碼段等等。

瀏覽器最低版本：IE 9、Chrome 8 figcaption ：定義 figure 元素的標題。

瀏覽器最低版本：IE 9、Chrome 8

相信看了這些案例你已經掌握了方法，更多精彩請關注php 其它相關文章！

相關閱讀：

H5中視頻與音頻標簽和進度條如何使用

H5與C3的新交互特性有哪些

H5的塊級標簽匯總

以上就是html5的頁面結構需要注意那些方面的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。