在标题的这个主题上,经常看到使用<hgroup>的错误案例.在下面这种情况下你不能将<header>标签和<hgroup>标签一起使用:

这里只有一个标题,

或者<hgroup>本身就够了(比如:不需要<hgroup>)

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

1 <!-- Don’t copy this code! No need for hgroup here -->

2 <header>

3 <hgroup>

4 <h1>My best blog post</h1>

5 </hgroup>

6 <p>by Rich Clark</p>

7 </header>

这种情况下,将<hgroup>移除,只保留标题就好.

1 <header>

2 <h1>My best blog post</h1>

3 <p>by Rich Clark</p>

4 </header>

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

1 <!-- Don’t copy this code! No need for header here -->

2 <header>

3 <hgroup>

4 <h1>My company</h1>

5 <h2>Established 1893</h2>

6 </hgroup>

7 </header>

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

1 <hgroup>

2 <h1>My company</h1>

3 <h2>Established 1893</h2>

4 </hgroup>

不要将所有的链接列表都放到<nav>标签

在HTML5新增的30个元素中(在我们写这篇文章的时候),我们在构建更具语义\结构化的标签的时候,我们的选择变得太丰富.也就是说我们对现在给我们提供的这些超级有语义的标签,我们可能会滥用.<nav>就是一个很悲剧的例子.在规范中的描述是这样的:

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

这里面的关键词是”重要”导航.我们可能会对”重要”有不同的定义,但是我的理解是:

虽然并没有对错之分,但根据我的理解和一个民意投票让我觉得在下面这些情形下,我不会使用<nav>标签:

如果你不能确定是否使用<nav>，那就先对你问一下下面的几个问题：“者是否是一个主要链接？”，你可以根据下面的几个因素来回答你刚才的问题：

如果用<section>和标题标签能够解决你的问题，那就不要去使用<nav>–

你是不是为了增加可访问性而增加的一个快捷跳转链接呢？

如果上面的回答都是“不”，那可能就不适合使用<nav>.

<figure>元素的错误

<figure>和经常与它合伙作案的<figcaption>，是很难掌握的标签，下面是经常看到的一些小错误。

并不是所有的图片都是figure（注：比较难理解阿，image=图片，figure=图形）

之前，我曾经说过不要写那些不需要的标签。这个错误也是相同的。我经常看到一个网站上的每张图片都有<figure>标签。这些额外增加的标签并不会给你带来任何的益处，并且还增加了你自己的工作强度和让自己的内容变得更难理解。
在规范中关于<figure>的解释如下：“某些流内容，可以有标题，自我包含并且通常作为一个单元独立于内文档流之外。”在那里有完美的表述，就是它可以被从主内容中移除–比如放到边拦，而对文档流没有影响。
如果仅仅是一张表现类的图片而且和文档中其他的内容没有关系的话，那就不需要使用<figure>.”这张图片需要对上下文的内容作出解释吗？”，如果答案是”否”，那就可能不是<figure>(可能是<aside>),”我能把它移到附录里面吗？”，如果这两个问题的答案都是”是”，那就可能是<figure>.

你的标志不是一个<figure>

将上面的延伸开来，对你的logo也是这样。下面是两组我找到的有规律的代码片断：

01 <!-- Don’t copy this code! It’s wrong! -->

02 <header>

03 <h1>

04 <figure>

05 <img src="/img/mylogo.png" alt="My company" class="hide" />

06 </figure>

07 My company name

08 </h1>

09 </header>

10 <!-- Don’t copy this code! It’s wrong! -->

11 <header>

12 <figure>

13 <img src="/img/mylogo.png" alt="My company" />

14 </figure>

15 </header>