HTML5的新标签

1.<header>：页眉

描述了文档的头部区域，于定义内容的介绍展示区域。

（1）只有必要时使用header，大多数情况下，如果只有h1~h6或hgroup，没有其它需要与之组合在一起的伴生内容，就没有必要用header将它包起来。

（2）header与h1~h6元素中的标题是不能互换的，它们都有各自的语义目的。

（3）不能在header里嵌套footer元素或另一个header，也不能在footer或address元素里嵌套header。

（4）header不一定必须包含nav元素，不过在大多数情况下，如果header包含导航性链接，就可以用nav。

2.<nav>：标记导航

标签定义导航链接的部分。无论哪种情况，应该仅对文档中重要的链接群使用nav。通常用一个ul元素（无序列表）对链接列表进行标记，除非链接是面包屑链接则使用ol元素（有序列表）。

（1）HTML5不允许将nav嵌套在address元素中。

（2）HTML5规范不推荐对辅助性的页脚链接（使用条款，隐私政策等），所以选择用nav。

3.<article>：文章标记标签

表示文档、页面、应用或网站中一个独立的容器，原则上是可独立分配或可再用的，即聚合。

（1）article可以嵌套在另一个article里面，只要里面的article与外面的article是部分与整体的关系，但是不能将article嵌套在address元素里。

（2）一个article里包含一个或者多个section元素并是不强制性的。

4.<section>：区块定义标签

表示的是文档或是应用的一个一般的区块，一般是有一组相似的主题的内容。

（1）section不是一个像div一样的通用容器，因为section表达一定的含义，而div则没有任何语义上的含义。

【特别提醒】如何在article和section中作出选择？

你的内容是适合做聚合的一块独立的内容或一个小组件吗？如果是，使用article。否则使用section。这并不是意味着你必须聚合或芬达article内容，只是其内容适合这样做。

5.<aside>：定义侧栏标签

表示一部分内容与页面的主题并不是有很大的关系，可以独立存在。aside的例子包括抬升式引用、侧栏、新闻站上列出相关文章的连接框、广告、nav元素组（如博客的友情链接）、商业站上相关产品列表。

（1）如果子啊侧栏中使用一个或多个aside（或将其作为侧栏使用），应在HTML中将他们放在页面主要内容的后面。将重要的内容放在前面有利于SEO和提升可访问性。

（2）对于与内容有关的图像（如图表、图形或带有说明文字的插图），使用figure而非aside。

（3）HTML5不允许将aside嵌套在address元素中。

6.<footer>：页脚标签

与header标签对应的标签，可以放附录、索引、版权页、许可协议等。

（1）footer元素代表嵌套它的最近的article、aside、nluckquote、body、details、fieldset、figure、nav、section或td元素的页脚。只有当它最近的祖先是body时，它才是整个页面的页脚。

（2）不允许在footer里嵌套header或另一个footer。同时，也不能将footer嵌套在header或address元素里。

7.使用ARIA提升可访问性

对内容用最适合描述他的元素进行标记可以提升可访问性。

WAI-ARIA(Web Accessibility Initiative's Accessible Rich Internet Applications，无障碍网页倡议之可访问的富互联网应用，也简称ARIA)是一种技术规范，自称“有桥梁作用的技术”。之所以这样说，是因为在HTML提供相应的语义功能之前，它会使用属性来填补一些语义上的空白。

（1）ARIA的地标角色（landmark role）可以帮助用户识别页面区域，包括application、banner、complementary、contentinfo、form、main、navigation和search。

（2）role="banner"（横幅）包含面向全站内容而非页面特有内容的区域。

用法：将其添加到页面的版头（通常为header元素），每个页面只用一次。

（2）role="navigation"（导航）指向文档内不同部分或相关文档的导航性元素（通常为链接）的集合。

用法：与HTML5的nav元素相似，应将其添加到每个nav元素，或其他包含导航性链接的容器。这个role可在每个页面上使用多次。

（3）role="main"（主体）页面的主体内容。

用法：将其添加到内容主体部分的容器。这个容器通常是一个div元素，也可能是一个article或section。除在极少数情况下，一个页面应该只有一个标记为Main的区域。

（4）role="complementary"（补充性内容）文档中作为主体内容补充的支撑部分。它对区分主体内容是有意义的。complementary角色表明其包含的内容与主体内容是相关的。

用法：与HTML5的aside元素相似，应将其添加到每个aside或包含补充性内容的div。可使用多次在一个页面上。

（5）role="contentinfo"（内容信息）包含关于文档的信息的大块可感知区域。这类信息包括版权声明和指向隐私权声明的链接等。

用法：将其添加至整个页面的页脚（通常为footer元素）。

【特别提醒】

（1）对于表单元素来说，form角色是多余的。search用于对搜索框进行标记。application为高级用法。

（2）地标角色只是ARIA规范（www.w3.org/TR/wai-aria/）众多特性的一种。

（3）最先进的几款屏幕阅读器（更好地理解语义话HTML如何影响屏幕阅读器用户的体验）

         NVDA（Windows软件，可从www.nvda-project.org免费下载）

         VoiceOver（Mac OS X 和iOS4+自带软件）

         JAWS（Windows，可在www.freedomscientific.com下载试用版）

（4）可以在CSS选择器中使用ARIA角色属性。

(持续补充)