HTML5中的header標籤是什麼意思？HTML5中header標籤具體使用方法你知道嗎？

HTML5中的header標籤是什麼意思？HTML5中header標籤具體使用方法你知道嗎？本篇文章主要帶大家詳細的介紹下HTML5的頭部標籤<header>，解釋了使用方法和使用說明

對首頁的介紹：

<header><h1>Welcome to my homepage</h1><p>My name is Donald Duck</p></header><p>The rest of my home page...</p>

HTML中header標籤的定義和用法：

<header> 標籤定義文檔的頁首（介紹資訊）。

HTML <header> 元素用來表示一些前言性質或導航類的內容。它可以包含一些標題性質元素，也可以放置一些比如logo，搜尋方塊，或其它的<header>元素等。

使用說明：

<header>元素並不是一個可以形成段落內容的元素，所以，不需要在內容目錄裡體現出來。

用法例子：

<header>  a logo</header>

HTML 4.01 與 HTML 5 之間的差異

<header> 標籤是 HTML 5 中的新標籤。

<header>：描述了文檔的頭部地區，於定義內容的介紹展示地區

header標籤不同於我們最熟悉的head標籤,header往往更常被用於定義文章的頭部,下面我們就來淺析HTML5中header標籤的用法:

<header>標籤定義文檔的頁首，通常是一些引導和導航資訊。它不局限於寫在網頁頭部，也可以寫在網頁內容裡面。

在新的標準中header標籤定義如下：

"A group of introductory or navigational aids.”

基本意思是“一組介紹性的護著導航相關的輔助內容”。字面上理解header標籤不單單只是定義頁頭內容，也可以定義頁頭以下其它內容的介紹。這和我們傳統的頁面header定義並不完全一致。

通常<header>標籤至少包含（但不局限於）一個標題標記（<h1>-<h6>），還可以包括<hgroup>標籤，還可以包括表格內容、標識、搜尋表單、<nav>導航等。

<header>   <h1>topic.alibabacloud.com</h1>   <p>專註於前端後台開發授課</p>  </header>  <article>   <header>    <h1>html5語義化標籤之結構標籤</h1>    <p>article、section、hgroup、aside、nav...</p>   </header>   <p>...這裡麵包含很多東西...</p>  </article>

在上面的結構中，我們可以看到使用header我們定義了一篇文章的標題和內容。這裡header標籤的使用並不是頁面的頁頭，而是文章的頁頭。

所以在HTML5中，header的使用更加靈活，你可以根據你的需要來定義和組織document結構。

同樣,在架構頁面時，header標籤一般都放在頁面的頂部，但是如果你想把他放在左側，右側甚至底部都沒有關係，標籤只定義了本身在頁面的角色，而不是位置。當然更具搜尋引擎最佳化原則，重要內容最後在架構頁面的時候提前。

最後由於在HTML5中header屬於塊元素，如果我們要在大多數主流瀏覽器使用的話最好定義CSS，如下。

header { display:block;}

想看關於footer頁尾標籤的請點擊這裡：HTML5中footer標籤的用法你知道嗎？，HTML5中的footer標籤是什麼意思？

這篇文章把HTML5中header標籤講的很透徹，如果有其它疑問的話，可以在下面提問。

【相關推薦】

HTML IMG標籤的屬性是有哪些？瞭解IMG標籤的用法

HTML5中web是什嗎？web儲存中的元素有哪些？