p2h.cn始于05年,最早由来自腾讯,网易的前开发工程师,曾经为美的,格兰仕,电信,陆虎等企业提供过高品质psd转html解决方案。累计300多个客户至今,超过1000多个项目。

专注前端技术,关注用户体验
  • 2011年12月26日

html5标签的使用误区

【P2H观点】:html5新增了一些标签例如header、footer、nav之类,很多人在学习html5的时候切勿用错标签,下面介绍几个比较常见的html5标签在使用的时候几个不恰当的用法或者误区,下面就来一一说明。

相关阅读:什么是html5?

最近组内进行HTML5标签的学习,方法呢就是大家每人挑选几个标签, 自己先去学习,然后给大家作讲解.这个过程大家还是挺有收获的.但是现在HTML5还处在草案阶段,有些新的标签元素的解释也是经常有变化,甚至标签加入 移出也很频繁(比如 hgroup),同时现有的大的门户网站在使用HTML5方面也没有很好的范例可以参考,让大家的学习过程更摸索.下面是我在 html5doctor 上面看到的一篇文章,在目前大家懵懂的阶段,可能看看大师的讲解会更容易理解。由于才疏学浅,很多不明白的地方可能只是做了字面上的翻译,不对的地方还请 大家多多指教。

本文我将给大家分享html5构建页面的小错误和不好的实践方法,让我们在以后的工作中避免这些错误。如果你还是无法确定哪一个元素更适合使用,我建议你去查看HTML5 sectioning content element flowchart来让你继续前行。

html5标签的使用误区之:不要把<Section>当成简单的容器来定义样式

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

01 <!– HTML 4-style code –>
02 <div id=”wrapper”>
03   <div id=”header”>
04     <h1>My super duper page</h1>
05     <!– Header content –>
06   </div>
07   <div id=”main”>
08     <!– Page content –>
09   </div>
10   <div id=”secondary”>
11     <!– Secondary content –>
12   </div>
13   <div id=”footer”>
14     <!– Footer content –>
15   </div>
16 </div>

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

01 <!– Don’t copy this code! It’s wrong! –>
02 <section id=”wrapper”>
03   <header>
04     <h1>My super duper page</h1>
05     <!– Header content –>
06   </header>
07   <section id=”main”>
08     <!– Page content –>
09   </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>取决于你的设计。)

01 <body>
02   <header>
03     <h1>My super duper page</h1>
04     <!– Header content –>
05   </header>
06   <div role=”main”>
07     <!– Page content –>
08   </div>
09   <aside role=”complementary”>
10     <!– Secondary content –>
11   </aside>
12   <footer>
13     <!– Footer content –>
14   </footer>
15 </body>

欢迎转载,转载请注明来源:http://www.p2h.cn/html5-label-use-errors/

相关链接: