在这篇文章中,我将给大家分享HTML5构建页面的小错误和不好的实践方法,让我们在以后的工作中避免这些错误。
不要把
当成简单的容器来定义样式
我们经常看到的一个错误,就是武断的将
标签用
标签来替代,特别是将作为包围容器的
用
来替换。在XHTML或者HTML4中,我们将会看到类似下面的代码:
现在我看到了下面的代码样子:
直观的看,上面的例子是错误的:
并不是一个容器。
元素是有语意的区段,帮助构建文档大纲。它应该包含标题。如果你要寻找一个可以包含页面的元素(不论是 HTML 或者 XHTML ),通常的做法是直接对标签定义样式就像Kroc Camen描述的那样子,如果你还需要额外的元素来定义样式,使用
, 就像Dr Mike阐述的那样, div并没有灭亡,如果这里没有其它更合适的,div可能是你最合适的选择。 记住这点,这里我们重新修正了上面的例子,通过使用两个新角色。(你是否需要额外的
取决于你的设计。)
如果你还是无法确定哪一个元素更适合使用,我建议你去查看HTML5 sectioning content element flowchart来让你继续前行。
只在需要的时候使用
和
标签
使用标记的时候写入了一些并不需要的现象这是不合理的。不幸的是,经常发现大家在并不需要的地方使用
元素通常是通常作为一组解释或者导航辅助工具,通常包含section的标题.
元素会将当有副标题\子标题,各类标识文字时,对
到
标题进行群组,将其作为section的标题.
过度使用的
如果你的
标签只包含一个标题元素时,就不要使用
标签了。
标签肯定会让你的标题在文档大纲中显现出来,而且因为
并不包含多重内容(就像定义中描述的那样子),我们为何要增加而外的代码呢?应该像下面这样简单才可以:
My best blog post
<hgroup>不合理使用
在标题的这个主题上,经常看到使用
的错误案例。在下面这种情况下你不能将
标签和
标签一起使用:
这里只有一个标题,
或者
本身就够了(比如:不需要
)
第一种情形看上去是下面的样子:
My best blog post
by Rich Clark
这种情况下,将
移除,只保留标题就好.
My best blog post
by Rich Clark
第二种情况也是包含了他们并不需要的标签.
My company
Established 1893
当
标签的子元素只有
的时候,为什么我们还需要一个额外的
My company
Established 1893
不要将所有的链接列表都放到
My company name
这里就不需要说啥了,这是很明显的错误,可能你认为我们说的是不是将logo放在H1标签里面,但是我们在这里并不讨论这个问题。让我们迷惑的是
元素。
标签只用在当有上下文需要说明或者被
包围的时候。我这里要说的是你的logo可能很少会被这种情况下使用。很简单,那就不要去这样做,你需要的仅仅是下面的样子。
figure只能用在标签上的误解
另一个对
的误解就是我们通常认为它只能用在图片上面。事实上并不是这样子的,它可以被用在 , 一个图标 (比如
这里有一篇更深入讲解
的文章I wrote about
,很值得阅读的。
不要去使用那些不必要的type属性
这可能是我们最常见的一些问题,它们并不是真正的错误,但我觉得我们的最好实践还是尽量避免这种模式。
在HTML5中,我们并不需要给
现在我们可以写成下面的样子:
你也能够对编码的设置作出省略。Mark Pilgrim在Dive into HTML5的语义化一章中作出了解释。
不要包含错误的表单属性
你可能发现引入了很多新的表单属性。现在我就给大家讲讲一些不合适的使用。
布尔值属性
新引入的标签属性有几个是布尔类型的,它们的标签行为基本接近。这些属性包括:
autofocus
autocomplete
required
坦白的说,下面的这种情况对我来说并不常见,但我们从 required 作为例子,如下:
基本上看,这段代码并不会带来危害。客户端对 HTML的解析遇到 required 标签属性时,他的功能就会生效。但是当我们将代码修改,录入 required=”false” 的情况呢?
解析的时候依然会遇到 required 属性,虽然你希望加入的行为是“假”,它依然会被解析成“真”。
这里有三种合理的方法让布尔值生效。(第二种和第三种方案只有你在写 XHTML 解析的时候需要)
我们上面的例子可以写成下面的样子:
总结
对我来说,我无法将所有蹩脚的代码模式都展示在这里,但是上面说的这些都是我们经常遇到的。