在HTML5之前的版本大家可能有用DIV標籤版面網頁的習慣，但H5在DIV標籤的基礎上增加了header標籤元素，也就是我們說的頭部標籤，以往我們在版面中常常把網頁分為頭部，內容，底部，現在已經有系統的標籤來幫我們規劃，也是方便了很多，那麼這個header標籤需要怎麼使用呢？今天我們就來好好的研究一下
正應為大家公認html佈局中對「header」為常用命名，所以在HTML5新增了個header標籤元素。可以這樣理解為什麼在html5中新增header為標籤元素。
除了直接使用header標籤外，也可以對header設定class或id。
語法結構
header標籤元素和p用法相同。有開始有閉合。
語法：
<header>内容</header>
直接不給id或class
<header>头部内容区</header>
#設定id
<header id=”p”>头部内容区</header>
設定class
<header class=”p”>头部内容区</header>
特點：就像DIV標籤元素一樣可以多次使用，不同地方可以使用id或class設定不同樣式。
相容性
因為header標籤是HTML5新增標籤元素，所以舊版瀏覽器皆不支持，需要IE9+以上瀏覽器、最新GoogleChrome等瀏覽器才能支援。當然國內360瀏覽器、百度瀏覽器、遨遊瀏覽器等瀏覽器均借用系統自帶IE內核，所以國內瀏覽器實際上與你係統自帶瀏覽器IE版本相同，所以你IE瀏覽器在IE9或以上版本自然相容HTML5新增標籤元素。
新舊DIV佈局比較案例
透過DIV+CSS佈局與HTML5+CSS佈局比較觀察並掌握對header應用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html5 Header标签实例</title>
<style>
/* 传统布局CSS */
#header{ width:300px; height:40px; background:#CCC}
/* HTML5布局样式 */
header{ width:400px; height:70px; color:#F00; background:#F5F5F5}
.color-000{ color:#000; background:#666}
</style>
</head>
<body>
<p id="header">我在传统p布局中</p>
<header>我在传统p布局中,必须在支持HTML5浏览器才能看到效果，
建议谷歌浏览器测试观察效果</header>
<header class="color-000">我颜色为黑色,背景为#666</header>
</body>
</html>相關閱讀：
#以上是html 的
