如不雅你照样无法肯定应用哪种元素，那么我建议你参考HTML5 sectioning content element flowchart

二、只在须要的时刻应用header和hgroup

写不须要写的标签当然是毫无意义的。不幸的是，我经常看到header和hgroup被无意义的滥用。你可以浏览一下关于header和hgroup元素的两篇文┞仿做一个具体的懂得，个中内容我简单总结如下：

• header元素表示的是一组介绍性或者导航性质的帮助文字，经常用作section的头晨
• 当头部有独裁构造时，比如有子头部，副标题，各类标识文字等，应用hgroup将h1-h6元素组合起来作为section的头晨

header的滥用

因为header可以在一个文档中应用多次，可能使得如许代码风格受到迎接：

请不要复制这段代码!此处并不须要header –>

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

的缺点应用

在headers这个主题上，我也经常看到hgroup的缺点应用。有时刻不该该同时应用hgroup和header:

• 如不雅只有一个子头部
• 如不雅hgroup本身就能工作的很好。。。这不废话么

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

第一个问题一般是如许的：

请不要复制这段代码!此处不须要hgroup –>

<hgroup> 
        <h1>My best blog post</h1> 
    </hgroup> 
    <p>by Rich Clark</p></header> 

坦白的说，我很少看到如许的。以required为例，常见的是下面这种：

词攀例中，直接拿掉落hgroup，让heading不雅奔吧。

<header> 
    <h1>My best blog post</h1> 
    <p>by Rich Clark</p></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> 

没什么好说的了。这就是很通俗的缺点。我们可认为logo是否应当是H1标签而互相喷到牛都放完回家了，但这里不是我们评论辩论的核心。真正的问题在于figure元素的滥用。figure只应当被引用在文档中，或者被section元素环绕。我想你的logo并不太可能以如许的方法引用吧。很简单，请勿应用figure。你只须要如许做:

　　推荐阅读

　　人工智能将创建未来银行，推动金融行业变革创新

沙龙晃荡 | 去哪儿、陌陌、ThoughtWorks在主动化运维中的实践！10.28不见不散！ 结论回看汗青，你会发明，金融业是最难实现变革的。但弗成避免的是，大年夜银行和创虻公司在金融业方面仍取>>>详细阅读

本文标题：前端：常见的6种HTML5错误用法

地址：http://www.17bianji.com/lsqh/38080.html

 1/2    1