盘点HTML5标签使用的常见误区

 现在HTML5还处在草案阶段,有些新的标签元素的解释也是经常有变化,甚至标签加入 移出也很频繁(比如 hgroup),同时现有的大的门户网站在使用HTML5方面也没有很好的范例可以参考,让大家的学习过程更摸索.本文将给大家分享html5构建页面的小错误和不好的实践方法，让我们在以后的工作中避免这些错误。

不要把<Section>当成简单的容器来定义样式

我们经常看到的一个错误，就是武断的将<div>标签用<Section>标签来替代，特别是将作为包围容器的<div>用来替换。在XHTML或者HTML4中，我们将会看到类似下面的代码：

XML/HTML Code复制内容到剪贴板

  1. <!– HTML 4-style code –>  
  2.  <div id=”wrapper”>  
  3.    <div id=”header”>  
  4.      <h1>My super duper page</h1>  
  5.      <!– Header content –>  
  6.    </div>  
  7.    <div id=”main”>  
  8.      <!– Page content –>  
  9.    </div>  
  10.    <div id=”secondary”>  
  11.      <!– Secondary content –>  
  12.    </div>  
  13.    <div id=”footer”>  
  14.      <!– Footer content –>  
  15.    </div>  
  16.  </div>  

现在我看到了下面的代码样子：

XML/HTML Code复制内容到剪贴板

  1. <!– Don’t copy this code! It’s wrong! –>  
  2.  <section id=”wrapper”>  
  3.    <header>  
  4.      <h1>My super duper page</h1>  
  5.      <!– Header content –>  
  6.    </header>  
  7.    <section id=”main”>  
  8.      <!– Page content –>  
  9.    </section>  
  10.    <section id=”secondary”>  
  11.      <!– Secondary content –>  
  12.    </section>  
  13.    <footer>  
  14.      <!– Footer content –>  
  15.    </footer>  
  16.  </section>  

直观的看，上面的例子是错误的：<Section>并不是一个容器.<Section>元素是有语意的区段，帮助构建文档大 纲。它应该包含标题。如果你要寻找一个可以包含页面的元素(不论是 HTML 或者 XHTML )，通常的做法是直接对<body>标签定义样式就像Kroc Camen描述的那样子，如果你还需要额外的元素来定义样式，使用<div>,就像Dr Mike 阐述的那样, div并没有灭亡，如果这里没有其它更合适的，div可能是你最合适的选择。记住这点，这里我们重新修正了上面的例子，通过使用两个新角色。(你是否需要额外的<div>取决于你的设计。)

XML/HTML Code复制内容到剪贴板

  1. <body>  
  2.    <header>  
  3.      <h1>My super duper page</h1>  
  4.      <!– Header content –>  
  5.    </header>  
  6.    <div role=”main”>  
  7.      <!– Page content –>  
  8.    </div>  
  9.    <aside role=”complementary”>  
  10.      <!– Secondary content –>  
  11.    </aside>  
  12.    <footer>  
  13.      <!– Footer content –>  
  14.    </footer>  
  15.  </body>  

如果你还是无法确定哪一个元素更适合使用，我建议你去查看HTML5 sectioning content element flowchart来让你继续前行。

时间： 2024-10-01 00:50:15

盘点HTML5标签使用的常见误区的相关文章

网页设计中META标签写法的常见错误及后果

错误|设计|网页|网页设计 网页设计中META标签写法的常见错误及后果[摘要]:网页设计中META标签描述和关键词写法的常见错误包括:整个网站所有的网页使用同样的META标签内容,META标签中网页介绍信息与网站内容缺少相关性等.本文归纳了网页设计中META标签写法的常见错误,并分析了出现不合理的META标签设计的可能后果. 网页设计中META标签写法的常见错误及后果 搜索引擎优化通常会涉及到网页META标签的话题,META标签内容写作的是网络营销导向网站建设中网页设计的基本工作内容之一,在网络

产品用户在硬件防火墙测评中的常见误区

不是什么事都可成功的,都有失败的记录.比如硬件防火墙测评,本文尝试着整理了产品用户在硬件防火墙测评中的常见误区,将于大家进行探讨. 误区一:误信含糊实验条件的惊人数字 亲阅过无数防火墙产品广告,一个个白纸黑字标称的4G吞吐量让人炫目,但如果把"64字节小包"."线速"."坚持几分钟"之类字眼抛出来,销售人员就会对吞吐量自己先变的吞吞吐吐起来.所以不能轻信厂商提供的各项数据,必须拿标准实验条件的测试结果来比对,或者重新搭建环境亲自来测试. 误区二:

HTML5标签与HTML4标签的区别示例介绍

(1)概念的变化: HTML5专注内容与结构,而不专注的表现 <header> <hgroup>导航相关数据</hgroup> </header> <nav>菜单</nav> <article> <h1>标题:HTML5专题视频教程</h1> (2)声明与标签: HTML5在更多的声明和标签上面做了简化,也对兼容做了详细的规定,废除了部分元素,增加了部分元素. HTML5标签语法介绍及新增标记 1.

在IE6/7/8下识别html5标签(让老式浏览器识别html5)

识别html5标签: html5添加了许多语义化的标签,比 如<nav></nav>,<aside></aside>,<article>< /article>什么的,当时看到这些标签的时候心想html5估计很多老式IE浏览器都不支持,也没多大重视,今天早上在群里面看到这些标签的 讨论,心里顿时冒出一个疑惑,我在chrome等现代浏览器下面用这些标签固然可以,那么我在IE6/7/8下用这些标签会有什么效果了呢.于是立马动手 测试.  

ECS数据分区丢失问题处理方法、常见误区和最佳实践

本期分享嘉宾 子岳 多年客户系统和网络运维经验,擅长系统故障分析和排查,目前聚焦VPC网络相关问题处理. ECS数据分区丢失问题处理方法.常见误区和最佳实践 概述 我们在处理客户磁盘相关问题时,经常遇到操作系统中数据盘分区丢失的情况.本文档介绍了Linux和Windows下常见的数据分区丢失问题,以及对应的处理方法,同时给出客户最佳实践以避免可能的数据丢失风险.重要 在对数据修复之前,首先需要对分区丢失的数据盘创建快照.快照创建完成后再进行尝试修复,如果在修复过程中出现问题,可以通过快照回滚还原

为Expression Web 4 添加HTML5 标签支持

大家都知道Expression Web 4 是用来编写网页脚本的一款软件,包含的语言类型涉及:HTML.ASP.PHP.CSS,但它并不支持HTML5.如下图所示,在HTML5 中的<canvas> 标签并不能获得智能感应,这样在开发过程中会变得很麻烦.本篇将介绍如何为其添加HTML5 标签支持.首先需要下载HTML5 模板插件,将得到一个名叫"HTML5Schema.xadd" 的文件. 安装HTML 5 Schema 在"Tools"菜单中选择&qu

在对智能电视的理解上，我们通常陷入两个常见误区

摘要: 没有客厅加入的新媒体革命无法想象,类似法国大革命却没有占领巴士底狱一样可笑. 客厅,传统上一家人的娱乐活动中心.乡校议事中心以及资讯收视中心,却在现实中被逐步的推到 没有客厅加入的新媒体革命无法想象,类似法国大革命却没有占领巴士底狱一样可笑. 客厅,传统上一家人的娱乐活动中心.乡校议事中心以及资讯收视中心,却在现实中被逐步的推到了媒体边缘地带,有沦落为单纯饭厅的危险. 人们总是有很多辩解的理由:电脑占据了人们的娱乐时间啦.手机游戏让孩子们上影啦.电影院的观影效果要好的多啦--说到底逃不出

让IE6/7/8支持HTML5标签的方法

让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的 document.createElement声明,利用条件注释针对IE来调用这个js文件.Opera,FireFox等其他非IE浏览器就会忽视这 段代码,也不会存在http请求. 方式一:引用google的html5.js文件,代码内容可以自己下载下来看.  代码如下 复制代码 <!–[if lt IE9]> <script src="http://html5

《HTML5移动应用开发入门经典》—— 第2章　移动开发中新的HTML5标签和属性

第2章 移动开发中新的HTML5标签和属性 HTML5移动应用开发入门经典本章介绍如下内容: 如何使用HTML5中的新标签及属性:HTML5中的其他变化:HTML5的移动支持:使用HTML5开发移动Web应用的理由.HTML5中有许多在构建Web页面及应用中会用到的新标签和属性.在这一章中,读者将学习许多HTML5的新特性以及它们在移动设备上的运用.新款智能手机及平板电脑正在逐渐接纳HTML5,而本章将会告诉读者如何加入这一次革新的盛宴.