首先，不要用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='secondary '

次要内容

/div

div id='页脚'

页脚内容

/div

/div

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

！-请不要复制这些代码！这是不对的！-

节id=“包装”

页眉

h1我的超级副本页面/h1

！-标题内容-

/header

节id='main '

！-页面内容-

/section

节id='次要'

！-次要内容-

/section

页脚

！-页脚内容-

/页脚

/section

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

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

身体

页眉

h1我的超级副本页面/h1

！-标题内容-

/header

div角色='main '

！-页面内容-

/div

次要角色='补充'

！-次要内容-

/一旁

页脚

！-页脚内容-

/页脚

/body

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

第二，仅在需要时使用标题和分组

写不需要写的标签当然没有意义。不幸的是，我经常看到header和group被毫无意义地误用。你可以看两篇关于header和hgroup元素的文章来做一个详细的了解，我简单总结如下：

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

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

标题滥用

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

！-请不要复制这个代码！这里不需要表头-

文章

页眉

h1我更好的博文/h1

/header

！-文章内容-

/article

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

文章

h1我更好的博文/h1

！-文章内容-

/article

群的错误使用

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

如果只有一个副标题

如果一个团队能够独立工作。这不是废话吗

个问题一般是这样的：

！-请不要复制这个代码！没有必要分组-

页眉

Hg group

h1我更好的博文/h1

/hgroup

pby Rich Clark/p

/header

在这个例子中，只要拿走群，让航向冲。

页眉

h1我更好的博文/h1

pby Rich Clark/p

/header

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

！-请不要复制这个代码！这里不需要表头-

页眉

Hg group

h1我的公司/h1

h2成立于1893年/h2

/hgroup

/header

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

Hg group

h1我的公司/h1

h2成立于1893年/h2

/hgroup

欲了解更多关于集团的例子和解释，请参考相关文章

第三，不要把所有的列表链接都放在导航中

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

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

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

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

主导航

站内搜索

二次导航(略有争议)

页面内的导航(如长文章)

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

分页控制

社交链接(虽然有些社交链接也是主导航，比如“关于”“收藏夹”)

博文标签

博客文章分类

三级导航

页脚太长

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

如果部分和hx也适用，那么不要在IRC上使用nav-hi xie

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

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

四、图形元素的常见错误

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

不是所有的图片都是图

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

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

这些问题也包含在前面提到的HTML5元素流程图中。

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

Logo不是图

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

！-请不要复制这个代码！这是错误的-

页眉

氕

图img src='/img/My logo . png ' alt=' My company ' class=' hide '/图

我的公司名称/h1

/header

！-请不要复制这个代码！这也是错误的-

页眉

图img src='/img/My logo . png ' alt=' My company '/图

/header

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

页眉

h1我的公司名称/h1

！-这里有更多的东西

/header

图不仅仅是一张图片

另一个常见的对身材的误解是，它只被图片使用。图形可以是视频、音频、图形、引用的文本、表格、代码、散文以及它们的任意组合或其他。不要把数字局限于图片。web标准的职责是用标签准确描述内容。

5.不要使用不必要的类型属性

这是一个常见的问题，但不是错误。我认为我们应该通过更佳实践来避免这种风格。

在HTML5中，脚本和样式元素不再需要类型属性。但是，这些很可能会由您的CMS自动添加，因此删除它们并不那么容易。但是如果你是手工编码或者你可以完全控制你的模板，那么真的没有理由包含类型属性。所有的浏览器都认为脚本是javascript，样式是css样式，所以你不必走得更远。

！-请不要复制这个代码！太多余了！-

link type=' text/CSS ' rel=' style sheet ' href=' CSS/style . CSS '/

脚本类型=' text/JavaScript ' src=' js/scripts '//script

其实只需要这样写：

link rel='样式表' href=' CSS/style . CSS '/

脚本src='js/scripts' //script

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

第六，形式属性的错误使用

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

布尔属性

一些多媒体元素和其他元素也具有布尔属性。这里提到的规则也适用。

一些新的表单属性是布尔值，这意味着只要它们出现在标签中，相应的行为就已经设置好了。这些属性包括：

自（动）调焦装置

自动完成

需要

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

！-请不要复制这个代码！这是不对的！-

输入类型=' email ' name=' email ' required=' true '/

！-另一个错误的例子-

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

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

！-请不要复制这个代码！这是不对的！-

输入类型=' email ' name=' email ' required=' false '/

解析器仍然会认为所需的属性是有效的，并执行相应的行为，即使您试图告诉它不要执行它。这显然不是你想要的。

使用布尔属性有三种有效的方法。(后两个仅在xthml中有效)

需要

required=" "

required=“required”

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

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