HTML5 Note #2 : The header element

Article #2: The header element

---

*Reason: *自己的第一个 case 直接 import 了 skeleton-nt.jedi，并将一个图像放入 header 便签中，也不清楚自己这么做是否合适。且既然是 header，就早点儿学习它吧~

---

HTML5 之前

在 HTML5 之前，常用

但是在第一篇 Note 中了解了语义化之后，已经能够理解使用

可以传达更多的语义。

代表着什么？

header 标签一般用于显示介绍性的内容，典型的用法是包含一个 h1-h6 元素，或者一个 hgroup 元素。但是也可以包含其他的内容，比如搜索栏、导航 nav 或者任何需要的 logo。

为了有直观的理解和感受，我找了几个网站的 header 。

1. Mobile Twitter

   
   

    
   
        
            ……
        
        
            ……
        
    
   

2. Mobile Github

   
   

   
       
   
           ……
       
   
       
   
           ……
       
   
   

之所以选用的都是手机版网页，是因为 header 的浏览器兼容问题。事实上，这两个及绝大部分网站的网页版都是用 div 实现的。关于兼容性的问题待会儿在拓展中细谈。

何时需要用到

?

根据上面的栗子们，很容易看出 header 可用在页面的顶部。而且在一个页面中可以多次使用 header，但是需要注意

元素不能作为

,

或其他

元素的子元素（参见 https://developer.mozilla.org/zh-CN/docs/HTML/Element/header ）。比如，可以像下面这么用：

    
The most important heading on this page
    
With some supplementary information



    

        
Title of this article
        
By Richard Clark
    
        
...Lorem Ipsum dolor set amet...

！注意： 在一个页面中使用多个 h1 标签在 HTML5 和 HTML4 中是完全合法的。但是不建议这么用，因为会产生歧义。

header 样式

作者认为为了让主流浏览器将 header 作为块级元素进行渲染，必须明确写上

header { display: block; }

---

拓展

1. 浏览器兼容性

• Desktop:
  Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
  Basic support 5 4.0 (2.0) 9.0 11.10 4.1

• Mobile:
  Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
  Basic support 2.2 4.0 (2.0) 9.0 11.0 5.0 (iOS 4.2)

（ 参见 https://developer.mozilla.org/zh-CN/docs/HTML/Element/header ）

由上面的信息可以看出，由于移动设备更新很快，所以老旧的浏览器很容易被淘汰，在移动端网页中使用 HTML5 标签远远比桌面端网页更为适合。

---

感想

1. 在搜索关于 header 的详细信息时，发现 Mozilla Developer Network - HTML - 元素 十分好用~

2. 回到看这篇文章的 reason，还是认为自己的第一个 case 中，在 header 标签中直接插入类似 banner 的图片不太合适。

问题

1. 对于 header 样式的问题：这篇文章写作时间是09年6月份，现在的浏览器难道不是默认渲染为块级元素么？

自问自答一个:
因为较老的浏览器（比如 IE6 - 8）不能够识别新的 HTML5 标签，默认情况下，所有的浏览器都会将未知元素的 display 值计算为 inline。
（ 参见 http://www.impressivewebs.com/default-css-display-values-html-elements/ ）