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角色属性。


(持续补充)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值