HTML5标签使用的常见误区

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

  下面附上原文地址:Avoiding common HTML5 mistakes,作者 :Richard Clark,有疑问的地方大家可以核对英文。

  在这篇文章中,我将给大家分享HTML5构建页面的小错误和不好的实践方法,让我们在以后的工作中避免这些错误。

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

  我们经常看到的一个错误,就是武断的将

标签用
标签来替代,特别是将作为包围容器的
来替换。在XHTML或者HTML4中,我们将会看到类似下面的代码:


< div id ="wrapper" >
< div id ="header" >
< h1 > My super duper page h1 >

div >
< div id ="main" >

div >
< div id ="secondary" >

div >
< div id ="footer" >

div >
div >

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


< section id ="wrapper" >
< header >
< h1 > My super duper page h1 >

header >
< section id ="main" >

section >
< section id ="secondary" >

section >
< footer >

footer >
section >

  直观的看,上面的例子是错误的:

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

< body >
< header >
< h1 > My super duper page h1 >

header >
< div role ="main" >

div >
< aside role ="complementary" >

aside >
< footer >

footer >
body >

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

  只在需要的时候使用
标签

  使用标记的时候写入了一些并不需要的现象这是不合理的。不幸的是,经常发现大家在并不需要的地方使用

标签。你可以跟进我们关于
的最新进展,下面是我的简单归纳:

  • 元素通常是通常作为一组解释或者导航辅助工具,通常包含section的标题.
  • 元素会将当有副标题\子标题,各类标识文字时,对

    标题进行群组,将其作为section的标题.

  过度使用的

  你肯定知道,在一个文档中,可以使用多次

标签,下面就是一种很受大家欢迎的模式:


< article >
< header >
< h1 > My best blog post h1 >
header >

article >

  如果你的

标签只包含一个标题元素时,就不要使用
标签了。
标签肯定会让你的标题在文档大纲中显现出来,而且因为
并不包含多重内容(就像定义中描述的那样子),我们为何要增加而外的代码呢?应该像下面这样简单才可以:

< article >
< h1 > My best blog post h1 >

article >

  
不合理使用

  在标题的这个主题上,经常看到使用

的错误案例。在下面这种情况下你不能将
标签和
标签一起使用:

  • 这里只有一个标题,
  • 或者
    本身就够了(比如:不需要
    )

  第一种情形看上去是下面的样子:


< header >
< hgroup >
< h1 > My best blog post h1 >
hgroup >
< p > by Rich Clark p >
header >

  这种情况下,将

移除,只保留标题就好.

< header >
< h1 > My best blog post h1 >
< p > by Rich Clark p >
header >

  第二种情况也是包含了他们并不需要的标签.


< header >
< hgroup >
< h1 > My company h1 >
< h2 > Established 1893 h2 >
hgroup >
header >

  当

标签的子元素只有
的时候,为什么我们还需要一个额外的
?如果没有额外的元素放到
中(比如
的兄弟元素),我们直接将
元素去掉就好。

< hgroup >
< h1 > My company h1 >
< h2 > Established 1893 h2 >
hgroup >

  不要将所有的链接列表都放到

  在HTML5新增的30个元素中(在我们写这篇文章的时候),我们在构建更具语义\结构化的标签的时候,我们的选择变得太丰富。也就是说我们对现在给我们提供的这些超级有语义的标签,我们可能会滥用。

你可能感兴趣的:(HTML5)