W3C HTML5标准阅读笔记 – header、footer、main、address

标准原文:http://www.w3.org/TR/html5/sections.html#the-header-element

在HTML5标准中,新增了header标签用于表示引导介绍性内容,footer标签用于表示脚注内容,同时新增了main标签用于表示页面的主体内容,而新增的address标签则用于表示文章或页面的联系信息。

header和footer

header和footer元素可以包含任何除header、footer和main元素以外的Flow元素作为子元素。与article等sectioning content一样,header和footer仅增添了语义,在浏览器呈现上,与普通的div块级元素没什么区别。从定义上来讲,header元素表示与之最近的sectioning content(article、section、nav、aside)父级元素或者sectioning root(body、td、figure、fieldset、blockquote)父级元素的简介,而footer元素则表示与之最近的sectioning content父级元素或者sectioning root父级元素的脚注信息。footer元素所表示的脚注信息一般包括:内容的作者、与相关文档的链接、版权信息等。footer标签一般放在父级sectioning元素的最后,但标准对此不做强制要求。

一个section中header和footer元素可以重复出现多次。当header或footer的父级sectioning元素是body时,它们所表示的就是整个页面的简介或脚注信息。

有一些网站的设计偏好在footer标签中放置大量的内容:图片、链接、广告、版权等等,这种设计称之为“富脚注设计”(fat footers)。

main

main元素用于表示整个文档的主体内容,因此main标签一般作为body标签的直级子标签而存在,并且每个HTML文档中最多只能存在一个main标签。对于main标签,出于可用性(accessibility)的考虑,标准建议在使用时添加role="main"这一属性值。以下为main标签使用的一个例子:

<body>  
...
<main role="main">  
</main>  
...
</body>  

address

address元素用于表示与之最近的article或body父级元素的联系人信息,如果这个父级元素是body而不是article,则address表示整个文档的联系人信息。address元素内部可以放置除h1-h6、sectioning content元素(article、nav、section、aside)以及header、footer、address以外的其它所有Flow元素。与header、footer或sectioning content元素不同,address元素不仅增添了语义,浏览器还会对其做斜体显示处理。

与字面意思稍有不同的是,address元素只能用来存放联系人/联系方式信息,不能用来存放除联系信息外其它广义层面的地址信息。事实上,这个元素的名称改为contact似乎更为合理一些。

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!