HTML5的六大错误使用，避免前端陷阱

1.不要使用节来代替 div
使用标签时最常见的错误之一是用相同的 >

    <header>
        <h1>My best blog post</h1>
    </header>
    <!-- Article content --></article>

如果您的标头元素仅包含一个标头元素，则丢弃该标头元素。既然article元素已经保证了header会出现在文档概述中，并且header不能包含多个元素（如上面所定义的），为什么要编写额外的代码呢。就这样写吧：

<article>
    <h1>My best blog post</h1>
    <!-- Article content --></article>

的错误使用 在标题主题中，我经常看到 hgroup 的错误使用。有时 hgroup 和 header 不能一起工作：

• 如果只有一个子标题
• 如果 hgroup 本身工作正常。 。 。这不是废话
  第一个问题通常是这样的：
  不要复制此代码！这里不需要 hgroup ->

    <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>

第二个问题又是一个不必要的例子：
请勿复制此代码！这里不需要 header ->

    <hgroup>
        <h1>My company</h1>
        <h2>Established 1893</h2>
    </hgroup></header>

如果 header 唯一的子元素是 hgroup，那么 header 有什么问题吗？如果 header 中没有其他元素（例如多个 hgroup），请立即删除 header。 （Web前端学习交流群：328058344 禁止聊天，除非有兴趣，否则禁止登录！）

<hgroup>
    <h1>My company</h1>
    <h2>Established 1893</h2></hgroup>

更多示例和解释，请参阅相关文章

3.请勿将所有样式链接放入nav

随着 HTML5 中引入 30 个新元素（截至最初发布时），我们在构建语义和结构化标签时的选择变得有点粗心。也就是说，我们不应该责怪超语义元素。不幸的是，nav 就是这种滥用的一个例子。 nav元素的规格描述如下：
nav元素代表页面上的一个块，链接到另一个页面或该页面的另一个部分；包含导航连接的块。
注意：并非页面上的所有链接都应放置在导航元素中 - 该元素旨在用作主导航块。举个具体的例子，页脚中往往有很多链接，例如服务条款、主页、版权声明页等。页脚元素本身足以处理这些情况。虽然这里也可以使用nav元素，但我们通常认为这是不必要的。
关键字是“主”导航。当然，我们可以花一整天的时间谈论“主要”的含义。我个人是这样定义的：

• 主导航
• 站内搜索
• 第二个导航（有点争议）
• 页内导航（比如很长的文章）错误，所以基于非官方投票和我自己的解释，下面这种情况，不管你放不放，我都不会放在
• 分页控制
• 社交链接（虽然有些社交链接也是主导航，比如“关于”和“收藏夹”)
• 博客文章标签
• 博客文章类别
• 三级导航
• 腿太长 如果您不确定链接系列 在导航中，问问自己：“什么？是主要导航吗？”为了帮助您回答这个问题，请考虑第一个原则：
• 如果使用的部件和 hx 相同，则不要使用 nav — IRC 上的 Hixie
  为了更方便访问，您将在“中添加指向此 nav 标签的链接”快速跳跃”？
• 如果这个问题的答案是“否”，则按照

4操作。图形元素常见错误

图形和图形标题的正确使用很难掌握。我们来看看一些常见的错误，
并非所有图像都是数字
上面我告诉过你不要写不必要的代码。这个错误也是同样的情况。我见过很多网站将所有图像都标记为数字。对于图像，不要添加额外的标签。你只会伤害自己，而且不会让你的页面变得更清晰。
规范将图形描述为“许多流动的内容，有时具有独立的标题描述。通常称为文档流中的独立单元”。这就是图形的美妙之处 - 它们可以从主要内容页面移动到侧边栏，而不会影响文档的流程。
这个问题也包含在前面提到的HTML5元素流程图中。
如果图表纯粹用于演示且未在文档的其他地方引用，则不应是

。其余的取决于，但首先要问自己：“这张图片符合上下文吗？”如果不是，则可能不是（也许）。然后：“我可以将其移至附件吗？”如果这两个问题都适用，那当然可以。
徽标不是图形
此外，徽标不适用于图形。下面是我看到的一些常见的代码：

<!-- 请不要复制这段代码!这是错的 --><header>
    <h1>
        <figure> ![My company](/img/mylogo.png) </figure>
        My company name </h1></header>

<!-- 请不要复制这段代码!这也是错的 --><header>
    <figure> ![My company](/img/mylogo.png) </figure></header>

不多说了。这是一个非常常见的错误。我们可以互相争论，直到母牛回家为止，徽标是否应该是 H1 标签，但这不是重点。真正的问题是角色元素的过度使用。图表只能在文档中引用，或者由章节元素包围。我认为您的徽标不太可能以这种方式引用。很简单，不用数字。您所要做的就是：

<header>
    <h1>My company name</h1>
    <!-- More stuff in here --></header>

图形不仅仅是图片

关于图形的另一个常见错误是它们仅被图片使用。图形可以是视频、音频、图表、引言、表格、代码、散文或任何组合。不要限制图像的数量。使用标签精确描述内容是一项网络标准任务。

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

这是一个常见问题，但不是错误。我认为我们应该通过最佳实践来避免这种趋势。
在 HTML5 中，脚本和样式元素不再需要 type 属性。不过，这很可能是CMS自动添加的，所以要删除它并不是那么容易。但是，如果您手动编码或者可以完全控制模板，则确实没有理由包含 type 属性。所有浏览器都认为脚本是javascript，样式是css样式，所以你不需要再这样做了。

<!-- 请不要复制这段代码!它太冗余了! --><link type="text/css" rel="stylesheet" href="css/styles.css" /><script type="text/javascript"  /></script>

其实只需要这样写即可：

<link rel="stylesheet" href="css/styles.css" /><script  /></script>

连定义字符集的代码都可以省略。 Mark Pilgrim 在“语义深入 HTML5”一章中进行了解释。

6. 表单属性使用不当

HTML5 引入了几个新的表单属性。以下是一些使用注意事项：
布尔属性
某些多媒体元素和其他元素也具有布尔属性。同样的规则也适用于此。
一些新的表单属性是布尔值，这意味着只要它们出现在标签中，就保证设置适当的行为。这些属性包括：

• 自动对焦
• 全自动
• 必需

老实说，我很少看到这个。举必要的例子，常见的如下：

<!-- 请不要复制这段代码! 这是错的! --><input type="email" name="email" required="true" /><!--

 另一个错误的例子 --><input type="email" name="email" required="1" />

也就是说，这不是问题。只要浏览器的 HTML 解析器看到标记中出现所需的属性，就会应用该函数。但是如果你用另一种方式写 required="false" 呢？

<!-- 请不要复制这段代码! 这是错的! --><input type="email" name="email" required="false" />

解析器仍会将所需属性视为有效并执行适当的行为，即使您尝试不这样做。这显然不是你想要的。
使用布尔属性有三种正确的方法。 （后两项仅在xthml中有效）

• required
• required=""
• required="required"

上面例子的正确写法是：