您的位置： 首页 >日志>前端技术>详细内容

前端技术

【转】HTML5标签使用的常见误区

来源：新浪UED 发布时间：2011-12-17 01:51:39 浏览次数： 次 【字体：小 大】

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

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

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

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

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

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

  1.  
  2. <div id="wrapper"> 
  3.   <div id="header"> 
  4.     <h1>My super duper page h1> 
  5.       
  6.    div> 
  7.   <div id="main"> 
  8.       
  9.    div> 
  10.   <div id="secondary"> 
  11.       
  12.    div> 
  13.   <div id="footer"> 
  14.       
  15.    div> 
  16. div> 

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

  1.  
  2. <section id="wrapper"> 
  3.   <header> 
  4.     <h1>My super duper page h1> 
  5.       
  6.    header> 
  7.   <section id="main"> 
  8.       
  9.    section> 
  10.   <section id="secondary"> 
  11.       
  12.    section> 
  13.   <footer> 
  14.       
  15.    footer> 
  16. section> 

直观的看，上面的例子是错误的：

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

  1. <body> 
  2.   <header> 
  3.     <h1>My super duper page h1> 
  4.       
  5.    header> 
  6.   <div role="main"> 
  7.       
  8.    div> 
  9.   <aside role="complementary"> 
  10.       
  11.    aside> 
  12.   <footer> 
  13.       
  14.    footer> 
  15. body> 

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

 

只在需要的时候使用
和
标签
使用标记的时候写入了一些并不需要的现象这是不合理的。不幸的是，经常发现大家在并不需要的地方使用
和
标签。你可以跟进我们关于
和
的最新进展，下面是我的简单归纳：
  • 元素通常是通常作为一组解释或者导航辅助工具,通常包含section的标题.
  • 元素会将当有副标题子标题,各类标识文字时,对

    到

    标题进行群组,将其作为section的标题.
过度使用的
你肯定知道,在一个文档中,可以使用多次
标签,下面就是一种很受大家欢迎的模式:
 
 
  1.  
  2. <article> 
  3.   <header> 
  4.     <h1>My best blog post h1> 
  5.    header> 
  6.     
  7. article> 

如果你的

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

  1. <article> 
  2.   <h1>My best blog post h1> 
  3.     
  4. article> 
 
不合理使用
在标题的这个主题上,经常看到使用
的错误案例.在下面这种情况下你不能将
标签和
标签一起使用:
  • 这里只有一个标题,
  • 或者
    本身就够了(比如:不需要
    )
第一种情形看上去是下面的样子:
 
  1.  
  2. <header> 
  3.   <hgroup> 
  4.     <h1>My best blog post h1> 
  5.    hgroup> 
  6.   <p>by Rich Clark p> 
  7. header> 

这种情况下,将

移除,只保留标题就好.

  1. <header> 
  2.   <h1>My best blog post h1> 
  3.   <p>by Rich Clark p> 
  4. header> 
 
第二种情况也是包含了他们并不需要的标签.
 
  1.  
  2. <header> 
  3.   <hgroup> 
  4.     <h1>My company h1> 
  5.     <h2>Established 1893 h2> 
  6.    hgroup> 
  7. header> 
当
标签的子元素只有
的时候,为什么我们还需要一个额外的
?如果没有额外的元素放到
中(比如
的兄弟元素),我们直接将
元素去掉就好.
 
  1. <hgroup> 
  2.   <h1>My company h1> 
  3.   <h2>Established 1893 h2> 
  4. hgroup> 
不要将所有的链接列表都放到
在HTML5新增的30个元素中(在我们写这篇文章的时候),我们在构建更具语义结构化的标签的时候,我们的选择变得太丰富.也就是说我们对现在给我们提供的这些超级有语义的标签,我们可能会滥用.
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
Note: Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.
WHATWG HTML spec
这里面的关键词是”重要”导航.我们可能会对”重要”有不同的定义,但是我的理解是:
  • 主要导航
  • 网站搜索
  • 二级导航(这个能是有争议的)
  • 页面内链接(比如一篇很长的文章)
虽然并没有对错之分,但根据我的理解和一个民意投票让我觉得在下面这些情形下,我不会使用
  • 翻页
  • 社交类的链接（虽然有些社交类的链接也是主要的链接，比如关于我About me和品味Flavours ）
  • 博客文章的标签
  • 博客文章的分类列表
  • 第三级导航
  • 大页脚
如果你不能确定是否使用
  • 如果用
    和标题标签能够解决你的问题，那就不要去使用
  • 你是不是为了增加可访问性而增加的一个快捷跳转链接呢？
如果上面的回答都是“不”，那可能就不适合使用
元素的错误
和经常与它合伙作案的
，是很难掌握的标签，下面是经常看到的一些小错误。
并不是所有的图片都是figure（注：比较难理解阿，image=图片，figure=图形）
之前，我曾经说过不要写那些不需要的标签。这个错误也是相同的。我经常看到一个网站上的每张图片都有
标签。这些额外增加的标签并不会给你带来任何的益处，并且还增加了你自己的工作强度和让自己的内容变得更难理解。
在规范中关于
的解释如下：“某些流内容，可以有标题，自我包含并且通常作为一个单元独立于内文档流之外。”在那里有完美的表述，就是它可以被从主内容中移除–比如放到边拦，而对文档流没有影响。
如果仅仅是一张表现类的图片而且和文档中其他的内容没有关系的话，那就不需要使用
.”这张图片需要对上下文的内容作出解释吗？”，如果答案是”否”，那就可能不是
(可能是
你的标志不是一个
将上面的延伸开来，对你的logo也是这样。下面是两组我找到的有规律的代码片断：
 
  1.  
  2. <header> 
  3.   <h1> 
  4.     <figure> 
  5.       <img src="/img/mylogo.png" alt="My company" class="hide" /> 
  6.      figure> 
  7.     My company name 
  8.    h1> 
  9. header> 
  10.  
  11. <header> 
  12.   <figure> 
  13.     <img src="/img/mylogo.png" alt="My company" /> 
  14.    figure> 
  15. header> 

这里就不需要说啥了，这是很明显的错误，可能你认为我们说的是不是将logo放在H1标签里面，但是我们在这里并不讨论这个问题。让我们迷惑的是

元素。
标签只用在当有上下文需要说明或者被
包围的时候。我这里要说的是你的logo可能很少会被这种情况下使用。很简单，那就不要去这样做，你需要的仅仅是下面的样子。

  1. <header> 
  2.   <h1>My company name h1> 
  3.     
  4. header> 

 

figure只能用在标签上的误解
另一个对
的误解就是我们通常认为它只能用在图片上面。事实上并不是这样子的，它可以被用在
不要去使用那些不必要的type属性
这可能是我们最常见的一些问题，它们并不是真正的错误，但我觉得我们的最好实践还是尽量避免这种模式。
在HTML5中，我们并不需要给
×

用户登录