最近组内进行HTML5标签的学习,方法呢就是大家每人挑选几个标签,自己先去学习,然后给大家作讲解.这个过程大家还是挺有收获的.但是现在HTML5还处在草案阶段,有些新的标签元素的解释也是经常有变化,甚至标签加入移出也很频繁(比如 hgroup),同时现有的大的门户网站在使用HTML5方面也没有很好的范例可以参考,让大家的学习过程更摸索.下面是我在 html5doctor 上面看到的一篇文章,在目前大家懵懂的阶段,可能看看大师的讲解会更容易理解。由于才疏学浅,很多不明白的地方可能只是做了字面上的翻译,不对的地方还请大家多多指教。
下面附上原文地址:Avoiding common HTML5 mistakes 作者 :Richard Clark,有疑问的地方大家可以核对英文。
在这篇文章中,我将给大家分享html5构建页面的小错误和不好的实践方法,让我们在以后的工作中避免这些错误。
不要把 <Section> 当成简单的容器来定义样式
我们经常看到的一个错误,就是武断的将<div>标签用<section>标签来替代,特别是将作为包围容器的<div>用<section>来替换。在XHTML或者HTML4中,我们将会看到类似下面的代码:
- <!-- HTML 4-style code -->
- <div id="wrapper">
- <div id="header">
- <h1>My super duper page</h1>
- <!-- Header content -->
- </div>
- <div id="main">
- <!-- Page content -->
- </div>
- <div id="secondary">
- <!-- Secondary content -->
- </div>
- <div id="footer">
- <!-- Footer content -->
- </div>
- </div>
现在我看到了下面的代码样子:
- <!-- Don’t copy this code! It’s wrong! -->
- <section id="wrapper">
- <header>
- <h1>My super duper page</h1>
- <!-- Header content -->
- </header>
- <section id="main">
- <!-- Page content -->
- </section>
- <section id="secondary">
- <!-- Secondary content -->
- </section>
- <footer>
- <!-- Footer content -->
- </footer>
- </section>
直观的看,上面的例子是错误的:<section> 并不是一个容器.<section>元素是有语意的区段,帮助构建文档大纲。它应该包含标题。如果你要寻找一个可以包含页面的元素(不论是 HTML 或者 XHTML ),通常的做法是直接对<body>标签定义样式就像Kroc Camen描述的那样子,如果你还需要额外的元素来定义样式,使用<div>,就像Dr Mike 阐述的那样, div并没有灭亡,如果这里没有其它更合适的,div可能是你最合适的选择。 记住这点,这里我们重新修正了上面的例子,通过使用两个新角色。(你是否需要额外的<div>取决于你的设计。)
- <body>
- <header>
- <h1>My super duper page</h1>
- <!-- Header content -->
- </header>
- <div role="main">
- <!-- Page content -->
- </div>
- <aside role="complementary">
- <!-- Secondary content -->
- </aside>
- <footer>
- <!-- Footer content -->
- </footer>
- </body>
如果你还是无法确定哪一个元素更适合使用,我建议你去查看HTML5 sectioning content element flowchart来让你继续前行。
- <header>元素通常是通常作为一组解释或者导航辅助工具,通常包含section的标题.
- <hgroup>元素会将当有副标题\子标题,各类标识文字时,对<h1>到<h6>标题进行群组,将其作为section的标题.
- <!-- Don’t copy this code! No need for header here -->
- <article>
- <header>
- <h1>My best blog post</h1>
- </header>
- <!-- Article content -->
- </article>
如果你的<header>标签只包含一个标题元素时,就不要使用<header>标签了.<article>标签肯定会让你的标题在文档大纲中显现出来,而且因为<header>并不包含多重内容(就像定义中描述的那样子),我们为何要增加而外的代码呢?应该像下面这样简单才可以:
- <article>
- <h1>My best blog post</h1>
- <!-- Article content -->
- </article>
- 这里只有一个标题,
- 或者<hgroup>本身就够了(比如:不需要<hgroup>)
- <!-- Don’t copy this code! No need for hgroup here -->
- <header>
- <hgroup>
- <h1>My best blog post</h1>
- </hgroup>
- <p>by Rich Clark</p>
- </header>
这种情况下,将<hgroup>移除,只保留标题就好.
- <header>
- <h1>My best blog post</h1>
- <p>by Rich Clark</p>
- </header>
- <!-- Don’t copy this code! No need for header here -->
- <header>
- <hgroup>
- <h1>My company</h1>
- <h2>Established 1893</h2>
- </hgroup>
- </header>
- <hgroup>
- <h1>My company</h1>
- <h2>Established 1893</h2>
- </hgroup>
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
- 主要导航
- 网站搜索
- 二级导航(这个能是有争议的)
- 页面内链接(比如一篇很长的文章)
- 如果用<section>和标题标签能够解决你的问题,那就不要去使用<nav>–Hixie on IRC
- 你是不是为了增加可访问性而增加的一个快捷跳转链接呢?
在规范中关于<figure>的解释如下:“某些流内容,可以有标题,自我包含并且通常作为一个单元独立于内文档流之外。”在那里有完美的表述,就是它可以被从主内容中移除–比如放到边拦,而对文档流没有影响。
如果仅仅是一张表现类的图片而且和文档中其他的内容没有关系的话,那就不需要使用<figure>.”这张图片需要对上下文的内容作出解释吗?”,如果答案是”否”,那就可能不是<figure>(可能是<aside>),”我能把它移到附录里面吗?”,如果这两个问题的答案都是”是”,那就可能是<figure>.
- <!-- Don’t copy this code! It’s wrong! -->
- <header>
- <h1>
- <figure>
- <img src="/img/mylogo.png" alt="My company" class="hide" />
- </figure>
- My company name
- </h1>
- </header>
- <!-- Don’t copy this code! It’s wrong! -->
- <header>
- <figure>
- <img src="/img/mylogo.png" alt="My company" />
- </figure>
- </header>
这里就不需要说啥了,这是很明显的错误,可能你认为我们说的是不是将logo放在H1标签里面,但是我们在这里并不讨论这个问题。让我们迷惑的是<figure>元素。<figure>标签只用在当有上下文需要说明或者被<section>包围的时候。我这里要说的是你的logo可能很少会被这种情况下使用。很简单,那就不要去这样做,你需要的仅仅是下面的样子。
- <header>
- <h1>My company name</h1>
- <!-- More stuff in here -->
- </header>
这里有一篇更深入讲解 <figure>的文章I wrote about
<figure>
,很值得阅读的。在HTML5中,我们并不需要给<script>和<script>增加 type 属性,如果这些从CMS默认添加的内容中移出是很痛苦的事情,那当你手工编码的时候还写入它们或者你能完全的控制你的模板时候你完全可以删掉它们。因为所有的浏览器都会将<script>解析成Javascript和<css>标签是CSS,你不再需要那个type属性了:
- <!-- Don’t copy this code! It’s attribute overload! -->
- <link type="text/css" rel="stylesheet" href="css/styles.css" />
- <script type="text/javascript" src="js/scripts.js"></script>
现在我们可以写成下面的样子:
- <link rel="stylesheet" href="css/styles.css" />
- <script src="js/scripts.js"></script>
- autofocus
- autocomplete
- required
- <!-- Don’t copy this code! It’s wrong! -->
- <input type="email" name="email" required="true" />
- <!-- Another bad example -->
- <input type="email" name="email" required="1" />
基本上看,这段代码并不会带来危害。客户端对 HTML的解析遇到 required 标签属性时,他的功能就会生效。但是当我们将代码修改,录入 required=”false” 的情况呢?
- <!-- Don’t copy this code! It’s wrong! -->
- <input type="email" name="email" required="false" />
解析的时候依然会遇到 required 属性,虽然你希望加入的行为是 假,它依然会被解析成 真。
这里有三种合理的方法让布尔值生效。(第二种和第三种方案只有你在写 XHTML 解析的时候需要)
我们上面的例子可以写成下面的样子:
- <input type="email" name="email" required />
总结
对我来说,我无法将所以得蹩脚的代码模式都展示在这里,但是上面说的这些都是我们经常遇到的。