一、不要使用section代替div

人们在使用标签时最常见的一个错误就是任意将HTML5的section等同于div——，具体来说就是直接用来替代(对于style)。在XHTML或HTML4中，我们经常看到这样的代码：

！- HTML 4风格代码-div id=' wrapper ' div id=' header ' h1我的超级副本页面/h1！-标题内容- /div div id='main '！-页面内容- /div div id='次要'！-次要内容- /div div id='页脚'！-页脚内容- /div/div

而现在在HTML5中，会是这样的：

！-请不要复制这些代码！这是不对的！- section id='wrapper '标头h1我的超级副本页/h1！-标题内容-/标题部分id='main '！-页面内容-/章节章节id='次要'！-二级内容/章节页脚！-页脚内容-/页脚/部分

这是不正确的：节不是一种样式。容器.节元素表示用于帮助构建文档摘要的内容的语义部分。它应该包含一个头部.如果你想找到一个可以作为页面容器使用的元素(像HTML或XHTML样式)，考虑像克罗克姆说的那样直接在主体元素上写样式。如果你仍然需要额外的样式容器，继续使用div。

基于以上想法，以下是正确使用HTML5和一些ARIA角色特性的例子(注意，您可能还需要根据自己的设计添加div)

正文标题h1我的超级副本页/h1！-标题内容-/标题div角色='main '！-页面内容- /div一旁角色='互补'！-次要内容-/一旁页脚！-页脚内容-/页脚/正文

如果您仍然不确定使用哪个元素，我建议您参考HTML5切片内容元素流程图。

二、只在需要的时候使用header和hgroup

写不需要写的标签当然没有意义。不幸的是，我经常看到header和group被毫无意义地误用。您可以阅读两篇关于header和hgroup元素的文章，以获得详细的理解，简要总结如下：

Header元素表示一组介绍性或导航性的辅助文本，通常用作节的标题。

当标题具有多层结构时，例如子标题、副标题、各种识别字符等。h1-h6元素通过使用hgroup组合为节的标题。

header

页眉可以在文档中多次使用，这可能会使这种代码风格流行起来：

！-请不要复制这个代码！这里不需要页眉-文章页眉h1我更好的博文/h1/页眉！-文章内容-/文章

如果您的标题元素只包含一个标题元素，则丢弃该标题元素。既然文章元素已经保证了页眉会出现在文档摘要中，而且页眉不能包含多个元素(如上定义)，那为什么还要写冗余代码呢？简单地这样写：

文章h1我更好的博文/h1！-文章内容-/文章

hgroup的错误使用

在标题这个话题上，我经常看到对group的误用。有时你不应该同时使用group和header:

如果只有一个副标题

如果一个团队能够独立工作。

个问题一般是这样的：

！-请不要复制这个代码！不需要h群-标题h群h1我更好的博文/h1/h群pby rich Clark/p/header

在这个例子中，只需去掉组，让标题裸奔。

标题h1我更好的博文/h1作者：里奇克拉克/p/标题

第二个问题是另一个不必要的例子：

！-请不要复制这个代码！表头-表头h集团h1我的公司/h1h2成立1893/H2/集团/表头在此不需要

如果表头的子元素是hgroup，为什么表头要做？如果标题中没有其他元素(如多个组)，只需删除标题。

hgroup h1My我的公司/h1 H2成立于1893年/h2/hgroup

关于；在…各处；大约

更多例子和解释，请参考相关文章。

三、不要把所有列表式的链接放在nav里

随着HTML5中30个新元素的引入(截止到原文发表的时候)，我们在选择语义和结构化标签的时候变得有些粗心。换句话说，我们不应该滥用超语义元素。不幸的是，nav就是这样一个滥用的例子。导航元素的规格描述如下：

nav元素表示一个页面的一个部分，它链接到其他页面或页面内的部分。

并非页面上的所有链接组都需要在一个导航元素中——该元素主要用于由主要导航块组成的部分。特别是，页脚通常有一个简短的链接列表，链接到网站的各个页面，如服务条款、主页和版权页面。对于这种情况，仅页脚元素就足够了；虽然在这种情况下可以使用nav元素，但它通常是不必要的。

以用户为目标的用户代理(如屏幕阅读器)可以受益于导航信息在初始呈现中被忽略，或者受益于导航信息立即可用，可以使用该元素作为一种方式来确定最初跳过页面上的什么内容或应请求提供什么内容(或两者)。

nav元素表示页面中链接到其他页面或该页面其他部分的块；包含导航链接的块。

注意：并非页面上的所有链接都需要放在导航元素中。该元素旨在用作主导航块。比如页脚有很多链接，比如服务条款、首页、版权通知页面等等。页脚元素本身足以应付这些情况。虽然这里也可以使用nav元素，但一般认为没有必要。

WHATWG HTML规范

关键词是“初级”导航。当然可以整天喷对方。我个人是这样定义的：

主导航(主导航)

站内搜索(站点搜索)

二级导航(略有争议)(二级导航(有争议))

页面内导航(例如，在一篇长文章中)

由于没有的对错，根据非正式投票和我自己的解释，以下情况，无论你是否放手，我反正不会放在nav里：

分页控件(分页控件)

社交链接(虽然一些社交链接也是主要导航，例如“关于”和“最喜欢的”)(社交链接(虽然也有例外，例如在关于我或口味的网站中，社交链接是主要导航)

博客上的标签

博客中博文的类别

三级导航(三级导航)

页脚过长(胖页脚)

如果不确定是否要在nav里放一系列链接，就问自己：“是主导航吗？”为了帮助您回答这个问题，请考虑以下首要原则：

如果部分和hx也适用，那么不要在IRC上使用导航Hixie

为了方便访问，您会在“快速跳转”中添加指向该导航标签的链接吗？

如果这些问题的答案是“不”，那就向导航低头，然后离开。

四、figure元素的常见错误

正确使用图形和图形标题真的很难控制。我们来看看一些常见的错误。

不是所有的图片都是figure上文中

我告诉过你不要写不必要的代码。这个错误也是同样的原因。我见过很多网站把所有图片都写成图。为了图，请不要额外标注。你只是伤了自己，却无法让页面更清晰。

在规范中，图形被描述为“一些流动的内容，有时带有自己的标题。它通常在文档流中被称为独立单元。”这就是——图的美。它可以从主内容页面移动到侧边栏，而不影响文档流。这些问题也包含在前面提到的HTML5元素流程图中。

如果它纯粹是为了表示图表，并且没有在文档的其他地方引用，那么它肯定不是。别人看情况，但你可以先问问自己：“这张图一定要和语境有关吗？”如果不是，可能不是(可能是)。继续：“可以移到阑尾吗？”如果两个问题都匹配，可能是图。

Logo并不是figure

此外，徽标也不适用于图形。以下是我的一些常见代码片段：

！-请不要复制这个代码！这是错误的-标题h1 figure img src='/img/my logo . png ' alt=' my company ' class=' hide '/figure my company name/h1/header！-请不要复制这个代码！这也是错误的-标题图img src='/img/my logo . png ' alt=' my company '/figure/header

没什么好说的了。这是一个很常见的错误。我们可以为是否标志应该是H1标签互相喷，直到奶牛被放回家，但这不是我们讨论的焦点。真正的问题在于图形元素的误用。图形只能在文档中引用，或者被一个截面元素包围。我觉得你的logo不能这么引用。很简单，不用图。你要做的就是：

标题h1我的公司名称/h1！-这里有更多的东西-标题

figure也不仅仅只是图片

另一个常见的对身材的误解是，它只被图片使用。图形可以是视频、音频、图形、引用的文本、表格、代码、散文以及它们的任意组合或其他。

不要把数字局限于图片。web标准的职责是用标签准确描述内容。

五、不要使用不必要的type属性

这是一个常见的问题，但不是错误。我认为我们应该通过更佳实践来避免这种风格。在HTML5中，脚本和样式元素不再需要类型属性。但是，这些很可能会由您的CMS自动添加，因此删除它们并不那么容易。但是如果你是手工编码或者你可以完全控制你的模板，那么真的没有理由包含类型属性。所有的浏览器都认为脚本是javascript，样式是css样式，所以你不必走得更远。

！-请不要复制这个代码！太重了！- link type='text/css' rel='样式表' href=' CSS/style . CSS '/script type=' text/JavaScript ' src=' js/scripts '/script

其实只需要这样写：

link rel='样式表' href=' CSS/style . CSS '/script src=' js/scripts '/script

甚至可以省略指定字符集的代码。马克皮尔格林在《潜入HTML5》的语义化一章里解释过。

六、form属性的错误使用

HTML5引入了一些新的表单属性。以下是一些使用中的注意事项：

布尔属性

一些多媒体元素和其他元素也具有布尔属性。这里提到的规则也适用。一些新的表单属性是布尔值，这意味着只要它们出现在标签中，相应的行为就已经设置好了。这些属性包括：

自动对焦

自动完成

要求

坦率地说，我很少看到这样的事情。以required为例，以下是常见的：

！-请不要复制这个代码！这是不对的！-输入类型=' email ' name=' email ' required=' true '/！-错误的另一个例子-输入类型=' email ' name=' email ' required=' 1 '/

严格来说，没什么大不了的。只要浏览器的HTML解析器看到标签中出现了所需的属性，它的功能就会被应用。但是如果你倒着写equired="false "呢？

！-请不要复制这个代码！这是不对的！-输入类型=' email ' name=' email ' required=' false '/

解析器仍然会认为所需的属性是有效的，并执行相应的行为，即使您试图告诉它不要执行它。这显然不是你想要的。使用布尔属性有三种有效的方法。(后两个仅在xthml中有效)

required required=' ' required=' required '

上面例子的正确写法应该是：

输入类型='email' name='email '必填/