技术开发 频道

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

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

  在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

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

  ①主要导航

  ②网站搜索

  ③二级导航(这个能是有争议的)

  ④页面内链接(比如一篇很长的文章)

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

  ①翻页

  ②社交类的链接

  ③博客文章的标签

  ④博客文章的分类列表

  ⑤第三级导航

  ⑥大页脚

  如果你不能确定是否使用,那就先对你问一下下面的几个问题:“者是否是一个主要链接?”,你可以根据下面的几个因素来回答你刚才的问题:如果用和标题标签能够解决你的问题,那就不要去使用–Hixie on IRC;你是不是为了增加可访问性而增加的一个快捷跳转链接呢?

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

  <figure>元素的错误

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

  并不是所有的图片都是figure(注:比较难理解阿,image=图片,figure=图形)

  之前,我曾经说过不要写那些不需要的标签。这个错误也是相同的。我经常看到一个网站上的每张图片都有标签。这些额外增加的标签并不会给你带来任何的益处,并且还增加了你自己的工作强度和让自己的内容变得更难理解。

  在规范中关于<figure>的解释如下:“某些流内容,可以有标题,自我包含并且通常作为一个单元独立于内文档流之外。”在那里有完美的表述,就是它可以被从主内容中移除–比如放到边拦,而对文档流没有影响。如果仅仅是一张表现类的图片而且和文档中其他的内容没有关系的话,那就不需要使用.”这张图片需要对上下文的内容作出解释吗?”,如果答案是”否”,那就可能不是<figure>(可能是),”我能把它移到附录里面吗?”,如果这两个问题的答案都是”是”,那就可能是<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>

 

  这里就不需要说啥了,这是很明显的错误,可能你认为我们说的是不是将logo放在H1标签里面,但是我们在这里并不讨论这个问题。让我们迷惑的是<figure>元素。<figure>标签只用在当有上下文需要说明或者被包围的时候。我这里要说的是你的logo可能很少会被这种情况下使用。很简单,那就不要去这样做,你需要的仅仅是下面的样子。

1 <header>  
2  
<h1>My company name</h1>  
3  
<!-- More stuff in here -->  
4
</header>

 

 

0
相关文章