HTML5的新标签
1.:标记导航标签定义导航链接的部分。其包含的通常是无序列表,特殊情况也可以用有序列表。2.:文章标记标签表示一个文档、页面、应用或者网站中的一个独立容器。3.:区块定义标签表示的是文档或是应用的一个一般的块,一般是有一组相似的主题的内容。4.:定义侧栏标签表示一部分内容与页面的主题并不是有很大的关系,可以独立存在。5.:页脚标签与header标签对应的标签,可
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角色属性。
(持续补充)
更多推荐
所有评论(0)