HTML5文档结构语义：页眉的header和hgroup标签使用

HTML5提供了新的结构元素——例如header、hgroup、article、section、footer、nav等来定义网页，将使网页结构更加简洁严谨，语义更加结构化，而不用迂回通过class或id来为结构命名。

这里就先来了解一下HTML5页眉的header和hgroup标签使用。

header标签在语法规范中包含标题、标题介绍和标题导航。header并不仅仅只能出现在页面顶部作为页眉使用，也可以出现在文档的其他位置。但header不允许嵌套，也不允许出现在地址或者footer元素内。

先来看一个示例

<header>
   <img src="" alt=""/>
   <hgroup>
        <h1>标题</h1>
        <h2>副标题</h2>
   </hgroup>
</header>

 

在上面的示例中，header由一个作为logo的img元素，以及包含在hgroup元素中的两行标题h1(主标题) 和 h2(副标题)组成。

在以往的常规做法中是直接书写h1和h2标签，并通过位置的先后来决定主标题和副标题；但是在HTML5中不再允许这种写法了，我们用hgroup标签来组织这些元素。hgroup的位置取决于首个标题出现的位置。虽然hgroup中可以出现其它元素，但是为了语义规范，通过只使用h1-h6这些标签。

这里有朋友可能就要问了，现在的浏览器并不完全支持html5，应该怎么处理呢，这个问题主要集中在IE8及以下浏览器，我们可以使用一段代码来实现。

<!--[if lt IE 9]>
<script>
document.createElement("<header>");
</script>
<style>
</style>
<!-- [endif]-->