首页 > 开发 > HTML5 > 正文

HTML5设计网页时应该避免的一些小错误

2024-09-05 07:18:30
字体:
来源:转载
供稿:网友
</section>

直观的看,上面的例子是错误的:<section> 并不是一个容器.<section>元素是有语意的区段,帮助构建文档大纲。它应该包含标题。如果你要寻找一个可以包含页面的元素(不论是 HTML 或者 XHTML ),通常的做法是直接对<body>标签定义样式就像Kroc Camen描述的那样子,如果你还需要额外的元素来定义样式,使用<div>,就像Dr Mike 阐述的那样, div并没有灭亡,如果这里没有其它更合适的,div可能是你最合适的选择。

记住这点,这里我们重新修正了上面的例子,通过使用两个新角色。(你是否需要额外的<div>取决于你的设计。)

</body>

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

只在需要的时候使用 <hgroup>和<header>标签

使用标记的时候写入了一些并不需要的现象这是不合理的。不幸的是,经常发现大家在并不需要的地方使用<header>和<hgroup>标签。你可以跟进我们关于<header>和<hgroup>的最新进展,下面是我的简单归纳:

<header>元素通常是通常作为一组解释或者导航辅助工具,通常包含section的标题. <hgroup>元素会将当有副标题/子标题,各类标识文字时,对<h1>到<h6>标题进行群组,将其作为section的标题.过度使用的<header>

你肯定知道,在一个文档中,可以使用多次<header>标签,下面就是一种很受大家欢迎的模式:

</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>标签:

翻页 社交类的链接(虽然有些社交类的链接也是主要的链接,比如关于我About me和品味Flavours ) 博客文章的标签 博客文章的分类列表 第三级导航 大页脚

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

如果用<section>和标题标签能够解决你的问题,那就不要去使用<nav>–Hixie on IRC 你是不是为了增加可访问性而增加的一个快捷跳转链接呢?

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

<figure>元素的错误

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

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

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

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

你的标志不是一个<figure>

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

</header> figure只能用在标签上的误解

另一个对<figure>的误解就是我们通常认为它只能用在图片上面。事实上并不是这样子的,它可以被用在 <video><audio>, 一个图标 (比如<SVG>, ), 一个引用, 一个表格, 一段代码, 一段散文, 或者任何和这些相关的组合. 不要把你的<figure>标签仅仅局限在图片上。我们网页制作师的任务就是用标签更准确的描述内容。
这里有一篇更深入讲解 <figure>的文章I wrote about &lt;figure&gt;,很值得阅读的。

不要去使用那些不必要的type属性

这可能是我们最常见的一些问题,它们并不是真正的错误,但我觉得我们的最好实践还是尽量避免这种模式。
在HTML5中,我们并不需要给<script>和<script>增加 type 属性,如果这些从CMS默认添加的内容中移出是很痛苦的事情,那当你手工编码的时候还写入它们或者你能完全的控制你的模板时候你完全可以删掉它们。因为所有的浏览器都会将<script>解析成Javascript和<script>标签是CSS,你不再需要那个type属性了:

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表