人们在标签使用中最常见到的错误之一就是随意将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. php 启动过程 - reqeust RINIT 过程

    php 启动过程 - reqeust RINIT 过程 概述 apache 接收到请求之后, 交给 php 处理 php 模块在接收到请求后, 会对请求进行初始化, 及 RINIT 过程 调用触发 a ...

  2. ZJOI2008树的统计Count

    知识点-树链剖分 "在一棵树上进行路径的修改.求极值.求和":乍一看只要线段树就能轻松解决,实际上,仅凭线段树是不能搞定它的.我们需要用到一种貌似高级的复杂算法--树链剖分.   ...

  3. java 集合框架(TreeSet操作,自动对数据进行排序,重写CompareTo方法)

    /*TreeSet * treeSet存入数据后自动调用元素的compareTo(Object obj) 方法,自动对数据进行排序 * 所以输出的数据是经过排序的数据 * 注:compareTo方法返 ...

  4. Linux防火墙配置—访问外网WEB

    一.实验目标 1.本次实验在"Linux基础网络搭建实验"的基础上,在外网虚拟机上搭建WEB服务,并分别配置外网和网关的防火墙规则,使内网能够访问WEB服务 2.Linux基础网络 ...

  5. CentOS 6.8下安装docker并使用

    Docker是一个开源的应用容器引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.利用Linux的LXC.AUFS.Go语言.cgroup实现了资源的独立,可以很轻松的实现文件.资 ...

  6. mySql 安装教程

    看了好久别人的文章,今天就开始自己写第一篇.希望给别人能提供帮助,也可以方便自己查阅. 前两天自己安装了mysql,感觉是比oracle好装多了. mysql安装有两种方式,一种是安装包安装方式,一种 ...

  7. Mac os下安装brew

    1.首先没下载xcode,请先安装xcode,安装的继续往下面看 2.安装brew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubuser ...

  8. nginx与apache配合反向代理技术2

    注意,上次我们只是简单的在同一台服务器模拟搭建了一个新的http服务器(启用了8080端口),使用的是apache,从而模拟了多台服务器实现的Nginx反向代理,通过Nginx向上游代理服务器发送请求 ...

  9. jQuery生成元素(table)并绑定样式和事件

    L略有重复

  10. Node.js编写CLI的实践

    导语:通常而言,Node.js的应用场景有前后端分离.海量web页面渲染服务.命令行工具和桌面端应用等等.本篇文章选取CLI(Command Line Tools)这子领域,来谈谈Node.js编写C ...