人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说，就是直接用作替代品(用于样式)。在XHTML或者HTML4中，我们常看到这样的代码：

<!-- HTML 4-style code -->

<div id="wrapper">

	<div id="header">

		<h1>My super duper page</h1>

		Header content

	</div>

	<div id="main">

		Page content

	</div>

	<div id="secondary">

		Secondary content

	</div>

	<div id="footer">

		Footer content

	</div>

</div>

而现在在HTML5中，会是这样：

<!-- 请不要复制这些代码！这是错误的！ -->

<section id="wrapper">

	<header>

		<h1>My super duper page</h1>

		<!-- Header content -->

	</header>

	<section id="main">

		<!-- Page content -->

	</section>

	<section id="secondary">

		<!-- Secondary content -->

	</section>

	<footer>

		<!-- Footer content -->

	</footer>

</section>

这样使用并不正确：<section>并不是样式容器。section元素表示的是内容中用来帮助构建文档概要的语义部分。它应该包含一个头部。如果你想找一个用作页面容器的元素(就像HTML或者XHTML的风格)，那么考虑如Kroc Camen所说，直接把样式写到body元素上吧。如果你仍然需要额外的样式容器，还是继续使用div吧。

基于上述思想，下面才是正确的使用HTML5和一些ARIA roles特性的例子（注意，根据你自己的设计，你也可能需要加入div）

<body>

<header>

	<h1>My super duper page</h1>

	<!-- Header content -->

</header>

<div role="main">

	<!-- Page content -->

</div>

<aside role="complementary">

	<!-- Secondary content -->

</aside>

<footer>

<!-- Footer content -->
</footer>
</body>

 

div的替代品的更多相关文章

  1. 避免常见的6种HTML5错误用法

    一.不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说,就是直接用作替代品(用于样 ...

  2. 避免HTML5六种错误用法

    一.不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>--具体地说,就是直接用作替代品(用于样 ...

  3. HTML5几种常见的错误写法

    本文介绍了HTML5常见的6种错误写法,包括:1.不要使用section作为div的替代品 2.只在需要的时候使用header和hgroup 3.不要把所有列表式的链接放在nav里 4.figure元 ...

  4. 前端：常见的6种HTML5错误用法

    一.不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说,就是直接用作替代品(用于样 ...

  5. nancy中视图呈现 Html.Partial（RenderPage的替代品）

    在mvc中有RenderPage 用来呈现其他视图的内容,而在nancy中没有RenderPage.怎么办呢? mvc中RenderPage的替代品,就是 Html.Partial. 使用方式 @Ht ...

  6. 一个漂亮的JavaScript“警告”替代品

    下载 一个漂亮的JavaScript"警告"替代品 安装 $ npm安装-节省sweetalert 使用 从"sweetalert"进口swal; 横波测井(& ...

  7. IE6/7下空div占用空间的问题

    最近注意力没在前端上面,工作碰到这样一个问题,下意识的写了句 font-size:0;line-height:0;哪知道引发了更大的bug.后来插入数据进去的时候都不显示了..再后来百度一番找到,原来 ...

  8. div实现自适应高度的textarea，实现angular双向绑定

    相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...

  9. 冒泡，setinterval，背景图的div绑定事件，匿名函数问题

    1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b" ...

随机推荐

  1. java复习(2)---java基础杂记

    java命名规范: 参考:http://www.cnblogs.com/maowang1991/archive/2013/06/29/3162366.html 1.项目名小写 2.包名小写 3.类名每 ...

  2. bzoj4819 [Sdoi2017]新生舞会

    Description 学校组织了一次新生舞会,Cathy作为经验丰富的老学姐,负责为同学们安排舞伴.有n个男生和n个女生参加舞会买一个男生和一个女生一起跳舞,互为舞伴.Cathy收集了这些同学之间的 ...

  3. 使用jquery的load方法设计动态加载，并解决浏览器前进、后退、刷新等问题

    继上一篇 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题 解决了后台业务系统的部分动态加载问题,然而该框架离正常的用户体验还存在一些问题,如:浏览器的前进.后 ...

  4. 运行出错之未能加载文件或程序集“Microsoft.ReportViewer.Common, Version=12.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91”或它的某一个依赖项。系统找不到指定的文件。文件名:“Microsoft.ReportViewer.Common, Version=11.0.0.0,

    这个问题是因为在项目中缺少Microsoft.ReportViewer.Common程序集. 方法一:缺少哪些文件或程序集,到程序开发计算机下找到对应的烤到客户端的程序启动目录下即可(项目烤到Bin\ ...

  5. Android开发之旅：环境搭建及HelloWorld（转）

    本系列适合0基础的人员,因为我就是从0开始的,此系列记录我步入Android开发的一些经验分享,望与君共勉!作为Android队伍中的一个新人的我,如果有什么不对的地方,还望不吝赐教. 在开始Andr ...

  6. Java的CLASSPATH

    在JDK安装好后,要设置两个变量Path和Classpath,Path是操作系统要求的,这里不谈了,而classpath是Java虚拟机要求的这里做一个详细的解释. 一.classpath的作用 == ...

  7. 企业Centos服务器分区常用方案

    方案一: 一般公司生产环境,数据不是非常重要,集群架构中的一个节点服务器: /boot: 200M swap: 8G内存以下,1.5倍 8G内存以上,设置8G就够了 / : 剩下的所以存储空间 方案二 ...

  8. Lamp环境搭建Linux CentOS6.5编译安装mysql5.6

    经典web开发组合Lamp环境搭建之mysql安装详解 安装前准备 通过rpm命令检查centos上是否已经安装mysql,然后卸载已经存在的mysql版本 [root@localhost src]# ...

  9. 简易RPC框架-学习使用

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  10. kafka的高可用和一致性探究

    一.kafka基础 本篇文章讨论的kafka版本是目前最新版 0.10.1.0. 1.1 kafka种的KafkaController 所有broker会通过ZooKeeper选举出一个作为Kafka ...