人们在标签使用中最常见到的错误之一就是随意将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. 【Shell】使用Shell脚本发布项目

    第一次写Shell脚本,没经验,是直接写呢,还是要走流程(￣▽￣)~* ---------------------------------------------------------------- ...

  2. App启动页倒计时功能

    转载请注明出处:http://www.cnblogs.com/cnwutianhao/p/6753418.html 示例代码采用 RxJava + RxLifecycle + Data-Binding ...

  3. javascript——数据类型

    在内存中,分为栈.堆.代码段.静态区,为了快速处理复杂的代码,在不同的区间储存不同的数据类型. 数据类型分为初始类型与引用类型,初始类型在栈中存储,变量赋值传值不传址,引用类型在堆中存储,传址不传值. ...

  4. 简谈-Python的注释、变量类型、标识符及关键字

    在Python程序中,要想支持中文输出,则要在代码前面添加 标识符:开发人员在程序中自定义的一些符号和名称 标示符是自己定义的,如变量名 .函数名等 标识符的规则:  标示符由字目.下划线和数字组成, ...

  5. checkbox的选中、全选、返选、获取所有选中的值、所有的值、单选全部时父选中

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  6. GoldenGate实施步骤

    一.GoldenGate实施环境 source database:oracle 11.2.0.3 target  database:oracle 11.2.0.3 需要配置的进程如下: source ...

  7. edge animate从入门到放弃

    一.什么是edge animate edge animate这是一款方便网页设计师和前端工程师实现动画交互的一款工具,虽然是adobe出品的,但是属于Flash和H5时代的过渡产物,这一款产品在201 ...

  8. 使用 Composer 安装 Laravel 框架

    前言: 1. Composer 安装 Laravel 有两种方式: 第一种是通过 Composer 的 create-project 命令安装 Laravel 框架, 第二种是先通过 Composer ...

  9. yum 安装vim编辑器

    在我们使用的vi编辑器中没有配色不是很好用,我们安装一个vim富文本编辑器方便我们的文本编辑. [root@localhost ~]# yum install vim -y已加载插件:fastestm ...

  10. Linux下安装Oracle的两种方式------有图形界面安装和静默安装

    本文参考文章 http://blog.csdn.net/zonej/article/details/50680857 http://blog.csdn.net/tongzidane/article/d ...