人们在标签使用中最常见到的错误之一就是随意将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多线程基本概述（七）——join()方法

    在很多情况下,主线程创建并启动子线程,如果子线程中有大量的耗时运算,主线程将早于子线程结束,如果想让主线程等待子线程结束后再结束,那么我们可以使用join()方法.调用join()方法的意思是当前线程 ...

  2. spring boot summer快速开发框架之《一、数据库操作》

    快速开发演示: 目录结构: 本例采用的mysql自带的sakila示例库,脚本DumpAddress.sql. 步骤:1. 修改application.properties中数据库连接2. 在App. ...

  3. linux c socket笔记 -服务端

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <sys/types. ...

  4. 物理提取大绝招”Advanced ADB”???

    近来手机取证有个极为重大的突破,是由手机取证大厂Cellebrite所率先发表的"Advanced ADB" 物理提取方法,此功能已纳入其取证设备产品UFED 6.1之中. 这个所 ...

  5. 进程间通信系列 之 socket套接字及其实例

    进程间通信系列 之 概述与对比   http://blog.csdn.net/younger_china/article/details/15808685  进程间通信系列 之 共享内存及其实例   ...

  6. PLSQL 配置设置

    1.登录后默认自动选中MyObjects 默认情况下,PLSQLDeveloper登录后,Brower里会选择Allobjects,如果你登录的用户是dba,要展开tables目录,正常情况都需要Wa ...

  7. Google的PageRank及其Map-reduce应用（日志五）

    上一篇:Hadoop的安装(日志四) 1,算法的原理解释: 如下图所示,G就是传说中的谷歌矩阵,这个矩阵是n*n型号的,n表示共计有n个网页. 如矩阵中所示: 11位置处的元素,是表示第一个网页指向的 ...

  8. 搭建后台页面布局利用属性target 属性

    HTML 5 <form> target 属性 HTML 5 <form> 标签 实例 提交一个在新窗口中打开的表单: <form action="demo_f ...

  9. struts的package的name与namespace

    <struts> <constant name="struts.devMode" value="true"></constant& ...

  10. 【JAVAWEB学习笔记】27_Redis：在Linux上的安装、Jedis和常用命令

    一.Redis简介 1．关于关系型数据库和nosql数据库 关系型数据库是基于关系表的数据库,最终会将数据持久化到磁盘上,而nosql数据     库是基于特殊的结构,并将数据存储到内存的数据库.从性 ...