避免大规模的二种HTML5错误用法,常见的6种HTML5错误用法

幸免大规模的三种HTML5荒谬用法

2011/11/02 · HTML5 · 来源:
163
ued    
· HTML5

英文原文:Avoiding common HTML5
mistakes

一、不要选拔section作为div的替代品

人人在标签使用中最常见到的失实之一就是随便将HTML5的<section>等价于<div>。

具体地说,就是直接当做替代品(用于样式)。在XHTML或者HTML4中,我们常看到那样的代码:

XHTML

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!– 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>

而近年来在HTML5中,会是如此:

XHTML

<!– 请不要复制那个代码!那是不当的! –> <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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!– 请不要复制这些代码!这是错误的! –>
<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的作风),那么考虑如Kroc
Camen所说,直接把体制写到body元素上啊。假使您如故须求至极的样式容器,照旧延续利用div吧。

依据上述思想,上边才是毋庸置疑的应用HTML5和局地ARIA
roles特性的事例(注意,按照你协调的布置,你也说不定要求投入div)

XHTML

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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和hgroup

写不要求写的价签当然是毫无意义的。不幸的是,我不时见到header和hgroup被无意义的滥用。你可以翻阅一下有关header和hgroup要素的两篇小说做一个详尽的问询,其中内容我大致总计如下:

  • header元素表示的是一组介绍性或者导航性质的增援文字,常常用作section的头顶
  • 当尾部有多层构造时,比如有子尾部,副标题,各类标识文字等,使用hgroup将h1-h6元素组合起来作为section的头顶

header的滥用

是因为header可以在一个文档中拔取频仍,可能使得那样代码风格备受欢迎:

XHTML

<!– 请不要复制那段代码!此处并不要求header –> <article>  
<header>     <h1>My best blog post</h1>  
</header>   <!– Article content –> </article>

1
2
3
4
5
6
7
<!– 请不要复制这段代码!此处并不需要header –>
<article>
  <header>
    <h1>My best blog post</h1>
  </header>
  <!– Article content –>
</article>

假使您的header元素只包蕴一个头顶元素,那么屏弃header元素吧。既然article元素已经有限支撑了底部会冒出在文档概要中,而header又不可能包括多少个元素(如上文所定义的),那么为何要写多余的代码。不难点写成那样就行了:

XHTML

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

1
2
3
4
<article>
  <h1>My best blog post</h1>
  <!– Article content –>
</article>

<hgroup>的错误使用

在headers那几个要旨上,我也不时看看hgroup的荒谬选取。有时候不该而且使用hgroup和header:

  • 假设只有一个子底部
  • 借使hgroup自己就能做事的很好。。。那不废话么

先是个难点一般是那般的:

XHTML

<!– 请不要复制那段代码!此处不需求hgroup –> <header>  
<hgroup>     <h1>My best blog post</h1>  
</hgroup>   <p>by Rich Clark</p> </header>

1
2
3
4
5
6
7
<!– 请不要复制这段代码!此处不需要hgroup –>
<header>
  <hgroup>
    <h1>My best blog post</h1>
  </hgroup>
  <p>by Rich Clark</p>
</header>

此例中,直接拿掉hgroup,让heading果奔吧。

XHTML

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

1
2
3
4
<header>
  <h1>My best blog post</h1>
  <p>by Rich Clark</p>
</header>

第三个难点是另一个不需要的事例:

XHTML

<!– 请不要复制那段代码!此处不要求header –> <header>  
<hgroup>     <h1>My company</h1>    
<h2>Established 1893</h2>   </hgroup> </header>

1
2
3
4
5
6
7
<!– 请不要复制这段代码!此处不需要header –>
<header>
  <hgroup>
    <h1>My company</h1>
    <h2>Established 1893</h2>
  </hgroup>
</header>

一旦header唯一的子元素是hgroup,那还要header干神马?借使header中尚无别的的要素(比如五个hgroup),如故直接拿掉header吧

XHTML

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

1
2
3
4
<hgroup>
  <h1>My company</h1>
  <h2>Established 1893</h2>
</hgroup>

关于<hgroup>更多的例子和解释,请参阅相关文章

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

随着HTML5引入了30个新因素(为止到原文公布时),大家在构造语义化和结构化的竹签时的抉择也变得有些不慎重。也就是说,大家不应该滥用超语义化的要素。不幸的是,nav就是那样一个被滥用的例证。nav元素的正规化描述如下:

nav元素表示页面中链接到其余页面或者本页面其余部分的区块;包涵导航连接的区块。

瞩目:不是颇具页面上的链接都急需放在nav元素中——那个元素本意是用作重点的领航区块。举个具体的例证,在footer中时常会有不少的链接,比如服
务条款,主页,版权表明页等等。footer元素自身已经得以应付那些情形,固然nav元素也足以用在此处,但普通大家认为是不要求的。

WHATWG HTML
spec

重中之重的词语是“主要的”导航。当然大家可以互相喷上一整天怎样叫做“首要的”。而自我个人是那般定义的:

  • 重大的导航
  • 站内搜索
  • 二级导航(略有争议)
  • 页面内导航(比如很长的篇章)

既是并不曾断然的是非曲直,所以依照一个非正式投票以及自我要好的表达,以下的情状,不管您放不放,我左右放在<nav>中:

  • 分页控制
  • 争执链接(尽管有些交道链接也是最紧要导航,比如“关于”“收藏”)
  • 博客小说的竹签
  • 博客小说的归类
  • 三级导航
  • 过长的footer

假诺您不确定是还是不是要将一名目繁多的链接放在nav中,问你协调:“它是重点的导航吗?”为了扶持你回复这一个标题,考虑以下重点原则:

  • 假设应用section和hx也如出一辙适用,那么毫不用nav — Hixie on
    IRC
  • 为了方便访问,你会在某个“疾速跳转”中给这些nav标签加一个链接吗?

假若这个题材的答案是“不”,那就跟<nav>鞠个躬,然后独自离开吧。

四、figure元素的常见错误

figure以及figcaption的正确性利用,确实是为难精通。让大家来探望一些宽广的错误,

不是有所的图纸都是figure

上文中,我曾告知各位不要写不必要的代码。这些错误也是同样的道理。我见状众多网站把具有的图片都创作figure。看在图纸的份上请不要给它加额外的标签了。你只是让你协调蛋疼,而并不可以使您的页面内容更鲜明。

专业中校figure描述为“一些流动的情节,有时候会有隐含于我的标题表明。一般在文档流中会作为独立的单元引用。”那正是figure的脍炙人口之处——它能够从主内容页移动到sidebar中,而不影响文档流。

那么些难点也暗含在头里提到的HTML5 element
flowchart中。

若是纯粹只是为着彰显的图,也不在文档其余地点引用,那就相对不是<figure>。其余视景况而定,但一初叶可以问自己:“那些图片是或不是必须和左右文有关?”要是或不是,那可能也不是<figure>(也许是个<aside>)。继续:“我得以把它移动到附录中吗?”假使七个难题都契合,则它或许是
<figure>

Logo并不是figure

进而的说,logo也不适用于figure。上面是本身科普的片段代码片段:

XHTML

<!– 请不要复制那段代码!那是错的 –> <header>   <h1>  
  <figure>       <img src=”/img/mylogo.png” alt=”My company”
/>     </figure>     My company name   </h1>
</header> <!– 请不要复制那段代码!那也是错的 –>
<header>   <figure>     <img src=”/img/mylogo.png”
alt=”My company” />   </figure> </header>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!– 请不要复制这段代码!这是错的 –>
<header>
  <h1>
    <figure>
      <img src="/img/mylogo.png" alt="My company" />
    </figure>
    My company name
  </h1>
</header>
<!– 请不要复制这段代码!这也是错的 –>
<header>
  <figure>
    <img src="/img/mylogo.png" alt="My company" />
  </figure>
</header>

举重若轻好说的了。那就是很一般的失实。大家得以为logo是还是不是应当是H1标签而相互喷到牛都放完回家了,但此处不是我们谈论的纽带。真正的难题在于figure元素的滥用。figure只应该被引述在文档中,或者被section元素围绕。我想你的logo并不太可能以那样的方法引用吧。很粗略,请勿使用figure。你只需要那样做:

XHTML

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

1
2
3
4
<header>
  <h1>My company name</h1>
  <!– More stuff in here –>
</header>

Figure也不仅仅只是图片

另一个广泛的关于figure的误会是它只被图片应用。figure可以是视频,音频,图表,一段引述文字,表格,一段代码,一段随笔,以及任何它们仍然别的的构成。不要把figure局限于图片。web标准的职分是精确的用竹签描述内容。

五、不要采纳不要求的type属性

那是个周边的问题,但并不是一个谬误,我以为我们相应经过顶尖实践来幸免那种风格。

在HTML5中,script和style元素不再要求type属性。但是这个很可能会被您的CMS自动抬高,所以要移除也不是那么的轻松。但倘若您是手工编码或者您一点一滴可以操纵你的模版的话,那真的没有怎么说辞再去涵盖type属性。所有的浏览器都觉得脚本是javascript而体制是css样式,你没必要再多此一举了。

XHTML

<!– 请不要复制那段代码!它太冗余了! –> <link type=”text/css”
rel=”stylesheet” href=”css/styles.css” /> <script
type=”text/javascript” src=”js/scripts” /></script>

1
2
3
<!– 请不要复制这段代码!它太冗余了! –>
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/scripts" /></script>

实则只须要那样写:

XHTML

<link rel=”stylesheet” href=”css/styles.css” /> <script
src=”js/scripts” /></script>

1
2
<link rel="stylesheet" href="css/styles.css" />
<script src="js/scripts" /></script>

竟然点名字符集的代码都足以省略掉。马克 Pilgrim在避免大规模的二种HTML5错误用法,常见的6种HTML5错误用法。Dive into
HTML5
的语义化一章中作出了诠释。

六、form属性的不当选取

HTML5引入了一部分form的新属性,以下是局地接纳上的注意事项:

布尔属性

有些多媒体元素和其他因素也有所布尔属性。那里所说的条条框框也一致适用。

有一部分新的form属性是布尔型的,意味着它们一旦现身在标签中,就有限支撑了对应的行事已经安装。那几个属性包蕴:

  • autofocus
  • autocomplete
  • required

交代的说,我很少见到如此的。以required为例,常见的是上边那种:

XHTML

<!– 请不要复制这段代码! 那是错的! –> <input type=”email”
name=”email” required=”true” /> <!– 另一个张冠李戴的例证 –>
<input type=”email” name=”email” required=”1″ />

1
2
3
4
<!– 请不要复制这段代码! 这是错的! –>
<input type="email" name="email" required="true" />
<!– 另一个错误的例子 –>
<input type="email" name="email" required="1" />

严厉来说,那并不曾大碍。浏览器的HTML解析器只要看看required属性出现在标签中,那么它的效益就会被应用。不过一旦你扭曲写equired=”false”呢?

XHTML

<!– 请不要复制那段代码! 那是错的! –> <input type=”email”
name=”email” required=”false” />

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

解析器仍旧会将required属性视为有效并履行相应的行事,即使你试着报告它并非去实践了。那明明不是你想要的。

有三种有效的章程去行使布尔属性。(后三种只在xthml中有效)

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

上述例子的不利写法应该是:

XHTML

<input type=”email” name=”email” required />

1
<input type="email" name="email" required />

赞 收藏
评论

亚洲必赢官网 1

一、不要使用section作为div的替代品
  人们在标签使用中最常见到的谬误之一就是不管三七二十一将HTML5的<section>等价于<div>——具体地说,就是直接当做替代品(用于样式)。在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>  
  而现在在HTML5中,会是那样:
<!– 请不要复制那么些代码!那是不对的! –>
<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的作风),那么考虑如Kroc
Camen所说,直接把体制写到body元素上吗。假设你照旧需求分外的样式容器,仍然一而再应用div吧。
  基于上述思想,下边才是正确的应用HTML5和部分ARIA
roles特性的事例(注意,按照你协调的规划,你也说不定须要投入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和hgroup
  写不要求写的竹签当然是毫无意义的。不幸的是,我时常看看header和hgroup被无意义的滥用。你可以阅读一下有关header和hgroup元素的两篇文章做一个详尽的问询,其中内容我大致计算如下:
header元素表示的是一组介绍性或者导航性质的救助文字,日常用作section的头顶 
当底部有多层组织时,比如有子底部,副标题,各样标识文字等,使用hgroup将h1-h6元素组合起来作为section的头顶 
  header的滥用
  由于header可以在一个文档中动用频仍,可能使得那样代码风格受到欢迎:
<!– 请不要复制这段代码!此处并不需求header –>
<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>的错误使用
  在headers那几个主旨上,我也不时看看hgroup的荒谬使用。有时候不该同时利用hgroup和header:
一经唯有一个子尾部 
假如hgroup自己就能工作的很好。。。那不废话么 
  第二个难题一般是那般的:
<!– 请不要复制那段代码!此处不需求hgroup –>
<header>
  <hgroup>
    <h1>My best blog post</h1>
  </hgroup>
  <p>by Rich Clark</p>
</header>  
  此例中,直接拿掉hgroup,让heading果奔吧。
<header>
<h1>My best blog post</h1>
<p>by Rich Clark</p>
</header>  
  第一个难点是另一个不须要的例证:
<!– 请不要复制那段代码!此处不需求header –>
<header>
  <hgroup>
    <h1>My company</h1>
    <h2>Established 1893</h2>
  </hgroup>
</header>  
  假诺header唯一的子元素是hgroup,那还要header干神马?要是header中从来不其他的因素(比如多少个hgroup),如故直接拿掉header吧
<hgroup>
  <h1>My company</h1>
  <h2>Established 1893</h2>
</hgroup>  
  关于<hgroup>更加多的例证和分解,请参阅相关小说
  三、不要把持有列表式的链接放在nav里
  随着HTML5引入了30个新因素(停止到原文公布时),大家在构造语义化和结构化的竹签时的选料也变得有些不慎重。也就是说,大家不该滥用超语义化的要素。不幸的是,nav就是那样一个被滥用的例证。nav元素的正规描述如下:
nav元素表示页面中链接到其余页面或者本页面其余一些的区块;包罗导航链接的区块。
在意:不是享有页面上的链接都亟待放在nav元素中——那些因素本意是用作首要的领航区块。举个具体的事例,在footer中平时会有广大的链接,比如服务条款,主页,版权阐明页等等。footer元素自身已经足以应付这个景况,尽管nav元素也得以用在那边,但一般我们以为是不须求的。
  关键的词语是“主要的”导航。当然大家得以并行喷上一整天什么叫做“主要的”。而我个人是这么定义的:
根本的导航 
站内搜索 
二级导航(略有争议) 
页面内导航(比如很长的作品) 
  既然并不曾相对的好坏,所以据悉一个业余投票以及自己要好的解释,以下的情事,不管您放不放,我反正不放在<nav>中:
分页控制 
应酬链接(尽管有点交道链接也是第一导航,比如“关于”“收藏”) 
博客小说的标签 
博客小说的分类 
三级导航 
过长的footer 
  如果你不确定是还是不是要将一多重的链接放在nav中,问你协调:“它是至关紧要的领航吗?”为了支持您回复这些难点,考虑以下重点原则:
要是接纳section和hx也一律适用,那么毫不用nav — Hixie on IRC 
为了便利访问,你会在某个“飞快跳转”中给那个nav标签加一个链接吗? 
  若是这一个标题标答案是“不”,那就跟<nav>鞠个躬,然后独自离开吧。
  四、figure元素的广阔错误
  figure以及figcaption的不错使用,确实是为难精晓。让大家来探望一些常见的荒唐,
  不是具有的图片都是figure
  上文中,我曾告知各位不要写不须要的代码。这几个荒唐也是一律的道理。我见状众多网站把持有的图片都创作figure。看在图片的份上请不要给它加额外的价签了。你只是让你协调蛋疼,而并不可以使你的页面内容更清晰。
  规范中将figure描述为“一些流动的内容,有时候会有隐含于自我的标题表达。一般在文档流中会作为独立的单元引用。”那正是figure的精良之处——它可以从主内容页移动到sidebar中,而不影响文档流。
  这一个标题也带有在前头涉嫌的HTML5 element flowchart中。
  假诺纯粹只是为了显示的图,也不在文档其余地点引用,那就相对不是<figure>。其他视意况而定,但一开头可以问自己:“那几个图形是或不是必须和上下文有关?”如果不是,那也许也不是<figure>(也许是个<aside>)。继续:“我得以把它移动到附录中吗?”如若五个难点都契合,则它可能是
<figure>。
  Logo并不是figure
  进一步的说,logo也不适用于figure。下边是我科普的一些代码片段:
<!– 请不要复制那段代码!那是错的 –>
亚洲必赢官网 ,<header>
  <h1>
    <figure>
      <img src=”/img/mylogo.png” alt=”My company”
class=”hide”/>
    </figure>
    My company name
  </h1>
</header>
<!– 请不要复制那段代码!那也是错的 –>
<header>
  <figure>
    <img src=”/img/mylogo.png” alt=”My company”/>
  </figure>
</header>  
  没什么好说的了。这就是很一般的失实。大家得以为logo是不是合宜是H1标签而相互喷到牛都放完回家了,但此处不是咱们谈谈的要点。真正的题材在于figure元素的滥用。figure只应该被引述在文档中,或者被section元素围绕。我想你的logo并不太可能以那样的法门引用吧。很简单,请勿使用figure。你只要求这么做:
<header>
  <h1>My company name</h1>
  <!– More stuff in here –>
</header>  
  Figure也不仅仅只是图片
  另一个宽广的关于figure的误会是它只被图片采纳。figure可以是视频,音频,图表,一段引述文字,表格,一段代码,一段小说,以及其余它们或者其余的组合。不要把figure局限于图片。web标准的任务是准确的用竹签描述内容。
  五、不要使用不须求的type属性
  那是个广大的题材,但并不是一个不当,我以为大家应当通过一级实践来避免那种作风。
  在HTML5中,script和style元素不再需要type属性。不过这么些很可能会被你的CMS自动抬高,所以要移除也不是那么的无拘无束。但倘诺您是手工编码或者你完全可以决定你的沙盘的话,那的确没有何样理由再去涵盖type属性。所有的浏览器都觉着脚本是javascript而体制是
css样式,你没必要再多此一举了。
<!– 请不要复制那段代码!它太冗余了! –>
<link type=”text/css” rel=”stylesheet” href=”css/styles.css”/>
<script type=”text/javascript”
src=”js/scripts”/></script>  
  其实只须求如此写:
<link rel=”stylesheet” href=”css/styles.css”/>
<script src=”js/scripts”/></script>  
  甚至点名字符集的代码都足以省略掉。马克 Pilgrim在Dive into
HTML5的语义化一章中作出了表达。
  六、form属性的不当使用
  HTML5引入了有些form的新属性,以下是局地行使上的注意事项:
  布尔属性
  一些多媒体元素和其余因素也保有布尔属性。那里所说的条条框框也一致适用。
  有部分新的form属性是布尔型的,意味着它们一旦出现在标签中,就保障了对应的作为已经安装。那一个属性包蕴:
autofocus 
autocomplete 
required 
  坦白的说,我很少见到那样的。以required为例,常见的是上面那种:
<!– 请不要复制那段代码! 那是错的! –>
<input type=”email” name=”email” required=”true”/>
<!– 另一个不当的例证 –>
<input type=”email” name=”email” required=”1″/>  
  严厉来说,那并从未大碍。浏览器的HTML解析器只要看看required属性现身在标签中,那么它的职能就会被应用。不过如若您扭曲写equired=”false”呢?
<!– 请不要复制那段代码! 那是错的! –>
<input type=”email” name=”email” required=”false”/>  
  解析器依然会将required属性视为有效并施行相应的一言一行,固然你试着报告它并非去履行了。那明显不是你想要的。
  有三种有效的点子去行使布尔属性。(后三种只在xthml中有效)
required 
required=”” 
required=”required” 
  上述例子的不错写法应该是:

来源: sinaued 发布时间: 2011-12-08 13:54 阅读:
1092 次 原文链接
全屏阅读
[收藏]

一、不要采用section作为div的替代品
人人在标签使用中最常见到的荒谬之一就是随机将HTML5的<section>等价于<div>——具体地说,就是直接当做替代品(用于样式)。在XHTML或者HTML4中,大家常看到那样的代码:

<input type=”email” name=”email” required />

近年组内举办HTML5标签的读书,方法吗就是豪门每人挑选多少个标签,自己先去学习,然后给大家作讲解。那个进度大家要么挺有收获的。不过现在HTML5还处在草案阶段,有些新的竹签元素的演说也是平常有变化,甚至标签进入/移出也很频仍(比如
hgroup),同时并存的大的门户网站在采用HTML5方面也远非很好的范例可以参照,让大家的读书进度更招来。上面是自家在
html5doctor
上边看到的一篇作品,在当前我们懵懂的等级,可能看看大师的任课会更便于了然。由于才疏学浅,很多不晓得的地方恐怕只是做了字面上的翻译,不对的地点还请我们多多指教。

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

下边附上原文地址:Avoiding common HTML5
mistakes,作者
:Richard
Clark,有难点的地点大家可以核查英文。

而现在在HTML5中,会是如此:
请不要复制那么些代码!那是荒唐的!

在那篇文章中,我将给大家享用HTML5创设页面的小错误和不好的举行措施,让大家在其后的行事中防止这几个不当。

<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>当成简单的器皿来定义样式

俺们平时看到的一个荒谬,就是武断的将<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来让您继承进步。

如此使用并不正确:<section>并不是体制容器。section元素表示的是内容中用来救助打造文档概要的语义部分。它应有包罗一个底部。假如您想找一个当做页面容器的因素(如同HTML或者XHTML的作风),那么考虑如Kroc
Camen所说,直接把体制写到body元素上吗。假使你照样需求相当的体裁容器,依然一连拔取div吧。
按照上述思想,上面才是没错的行使HTML5和部分ARIA
roles特性的事例(注意,根据你自己的宏图,你也恐怕须要参预div)

只在急需的时候利用<hgroup>和<header>标签

选用标志的时候写入了部分并不需求的景象那是不创造的。不幸的是,常常发现大家在并不需求的地点使用<header>和<hgroup>标签。你可以跟进大家关于<header>和<hgroup>的最新进展,上面是自我的粗略概括:

  • <header>元素平常是常见作为一组解释仍旧导航协助工具,平常包蕴section的标题.
  • <hgroup>元素会将当有副题目\子标题,各个标识文字时,对<h1>到<h6>标题举办群组,将其当作section的标题.
<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>
超负荷施用的<header>

你一定知道,在一个文档中,可以选取频仍<header>标签,下边就是一种很受我们欢迎的形式:

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

万一您要么不能够确定使用哪类因素,那么我提议您参考HTML5 sectioning content
element flowchart
二、只在要求的时候使用header和hgroup
写不需求写的竹签当然是毫无意义的。不幸的是,我时时看看header和hgroup被无意义的滥用。你可以翻阅一下有关header和hgroup元素的两篇作品做一个详细的了然,其中内容本身概括总括如下:

<hgroup>不客观运用

在标题的那一个宗旨上,平时看到使用<hgroup>的荒谬案例。在底下那种景观下您不可能将<header>标签和<hgroup>标签一起利用:

  • 那边唯有一个标题,
  • 或者<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>

当<header>标签的子元素唯有<hgroup>的时候,为何大家还亟需一个附加的<header>?即使没有额外的因素放到<header>中(比如<hgroup>的兄弟元素),大家直接将<header>元素去掉就好。

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

  • header元素表示的是一组介绍性或者导航性质的扶持文字,平常用作section的尾部
  • 当头部有多层构造时,比如有子头部,副标题,各样标识文字等,使用hgroup将h1-h6元素组合起来作为section的头顶
    header的滥用
不要将拥有的链接列表都放到<nav>标签

在HTML5新增的30个因素中(在大家写那篇作品的时候),我们在打造更具语义\结构化的竹签的时候,大家的选料变得太丰裕。也就是说大家对现在给我们提供的这么些一流有语义的价签,大家兴许会滥用。<nav>就是一个很喜剧的事例。在正儿八经中的描述是那般的:

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

那其中的要紧词是”首要”导航。大家也许会对”首要”有例外的定义,但是自己的敞亮是:

  • 最紧要导航
  • 网站寻找
  • 二级导航(那一个能是有争辩的)
  • 页面内链接(比如一篇很长的篇章)

固然如此并不曾好坏之分,但依据本人的接头和一个民意投票让自家以为在底下这几个情状下,我不会使用<nav>标签:

  • 翻页
  • 社交类的链接(即便有些社交类的链接也是根本的链接,比如关于我About
    me和品味Flavours )
  • 博客文章的价签
  • 博客小说的分类列表
  • 其三级导航
  • 大页脚

万一您不可能确定是或不是使用<nav>,那就先对您问一下底下的多少个难点:“那是还是不是是一个至关紧要链接?”,你能够按照下边的多少个因从来应对你刚刚的标题:

  • 即使用<section>和标题标签可以化解您的问题,那就毫无去拔取<nav>–Hixie
    on IRC
  • 您是否为了充实可访问性而扩充的一个火速跳转链接呢?

比方地方的答疑都是“不”,那也许就不合乎利用<nav>。

是因为header可以在一个文档中采取频仍,可能使得那样代码风格受到欢迎:
请不要复制那段代码!此处并不要求header –><article>

<figure>元素的错误

<figure>和平日与它一头作案的<figcaption>,是很难控制的标签,上边是时常看看的一些小错误。

    <header>
        <h1>My best blog post</h1>
    </header>
    <!-- Article content --></article>
并不是具有的图纸都是figure(注:相比难知晓阿,image=图片,figure=图形)

事先,我已经说过绝不写这一个不须求的标签。那些错误也是同等的。我时常看看一个网站上的每张图片都有<figure>标签。这个额外伸张的标签并不会给您带来别样的益处,并且还扩展了您自己的干活强度和让投机的内容变得更难精晓。

在正式中关于<figure>的诠释如下:“某些流内容,可以有标题,自我包涵并且普通作为一个单元独立于内文档流之外。”在那里有一揽子的宣布,就是它可以被从主内容中移除——比如放到边拦,而对文档流没有影响。

万一单单是一张表现类的图纸而且和文档中任何的始末没有关系的话,那就不必要运用<figure>.”这张图片须求对上下文的情节作出表明啊?”,若是答案是”否”,那就可能不是<figure>(可能是<aside>),“我能把它移到附录里面吗?”,假使那多个难题的答案都是”是”,那就可能是<figure>.

如若您的header元素只含有一个底部元素,那么屏弃header元素吧。既然article元素已经保险了尾部会冒出在文档概要中,而header又不可以包罗七个因素(如上文所定义的),那么为啥要写多余的代码。不难点写成那样就行了:

您的注脚不是一个<figure>

将地方的拉开开来,对您的logo也是这么。上面是两组我找到的有规律的代码片断:

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

<article>
    <h1>My best blog post</h1>
    <!-- Article content --></article>
figure只好用在标签上的误会

另一个对<figure>的误会就是大家常常认为它不得不用在图纸上边。事实上并不是这样子的,它可以被用在
<video><audio>, 一个图标 (比如<SVG>), 一个引用,
一个报表, 一段代码, 一段小说,
或者别的和那么些相关的咬合。不要把您的<figure>标签仅仅局限在图片上。大家网页制作师的天职就是用竹签更标准的叙说内容。

那边有一篇更深切讲解 <figure>的作品I wrote about
<figure>,很值得阅读的。

<hgroup>的一无可取采纳
在headers这一个主旨上,我也平日看到hgroup的不当使用。有时候不该同时选用hgroup和header:

不要去采纳这一个不须要的type属性

那恐怕是大家最普遍的有的难点,它们并不是真的的谬误,但自己认为我们的最好实施如故尽量幸免这种情势。

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

你也可以对编码的设置作出简短。马克 Pilgrim在Dive into
HTML5的语义化一章中作出了然释。

  • 借使唯有一个子尾部
  • 假使hgroup自己就能做事的很好。。。那不废话么
    先是个难点一般是那样的:
    请不要复制这段代码!此处不需求hgroup –><header>
决不包涵错误的表单属性

您或许发现<html5>引入了众多新的表单属性。现在自家就给大家讲讲一些不合适的使用。

布尔值属性

新引入的标签属性有多少个是布尔类型的,它们的价签行为基本相仿。那几个属性包蕴:

  • autofocus
  • autocomplete
  • required

坦白的说,下边的那种意况对自身来说并不常见,但大家从 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 />

总结
对自家的话,我无能为力将有着蹩脚的代码方式都来得在此地,然而下边说的那几个都是我们日常遇上的。

www.wak99.com站长转载

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

此例中,直接拿掉hgroup,让heading果奔吧。

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

其次个难点是另一个不要求的事例:
请不要复制这段代码!此处不要求header –><header>

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

比方header唯一的子元素是hgroup,那还要header干神马?借使header中平昔不其它的元素(比如五个hgroup),依然一向拿掉header吧。

<hgroup>
    <h1>My company</h1>
    <h2>Established 1893</h2></hgroup>
(web前端学习交流群:328058344 禁止闲聊,非喜勿进!) 

关于<hgroup>更加多的例子和表明,请参阅相关作品

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

趁着HTML5引入了30个新因素(停止到原文发表时),大家在布局语义化和结构化的价签时的选项也变得稍微不慎重。也就是说,大家不应有滥用超语义化的元素。不幸的是,nav就是如此一个被滥用的事例。nav元素的正规化描述如下:
nav元素表示页面中链接到任何页面或者本页面其余一些的区块;包括导航连接的区块。
留意:不是怀有页面上的链接都亟需放在nav元素中——这一个因素本意是用作重大的导航区块。举个具体的例子,在footer中日常会有为数不少的链接,比如服
务条款,主页,版权注脚页等等。footer元素自身已经可以应付这几个情况,纵然nav元素也得以用在那里,但常见大家觉得是不要求的。
根本的用语是“主要的”导航。当然我们得以相互喷上一整天怎么着叫做“首要的”。而自己个人是如此定义的:

  • 重中之重的导航

  • 站内搜索

  • 二级导航(略有争议)

  • 页面内导航(比如很长的稿子)
    既然如此并从未相对的是非,所以基于一个业余投票以及自己自己的讲演,以下的场地,不管你放不放,我反正不放在<nav>中:

  • 分页控制

  • 顶牛链接(就算有点交道链接也是器重导航,比如“关于”“收藏”)

  • 博客小说的竹签

  • 博客小说的归类

  • 三级导航

  • 过长的footer
    一旦您不确定是或不是要将一各类的链接放在nav中,问你自己:“它是重点的导航吗?”为了救助你答应这些题材,考虑以下重点标准:

  • 设若使用section和hx也一如既往适量,那么毫无用nav — Hixie on IRC
    为了便于访问,你会在某个“急速跳转”中给这一个nav标签加一个链接吗?

  • 比方这个难题的答案是“不”,那就跟<nav>鞠个躬,然后独自离开吧。

四、figure元素的广大错误

figure以及figcaption的正确性采用,确实是麻烦精晓。让大家来探视一些广泛的一无所能,
不是有着的图样都是figure
上文中,我曾告知各位不用写不需求的代码。那么些错误也是平等的道理。我看出不少网站把具有的图形都创作figure。看在图纸的份上请不要给它加额外的价签了。你只是让您自己蛋疼,而并无法使你的页面内容更清晰。
业内将官figure描述为“一些流动的内容,有时候会有隐含于自家的标题表达。一般在文档流中会作为独立的单元引用。”那正是figure的可观之处——它可以从主内容页移动到sidebar中,而不影响文档流。
这个难点也饱含在事先涉嫌的HTML5 element flowchart中。
设若纯粹只是为了展现的图,也不在文档其余地方引用,那就相对不是<figure>。其余视情形而定,但一早先可以问自己:“那一个图片是不是必须和上下文有关?”如果不是,那也许也不是<figure>(也许是个<aside>)。继续:“我可以把它移动到附录中呢?”即使多少个难题都严丝合缝,则它或许是
<figure>。
Logo并不是figure
越是的说,logo也不适用于figure。上边是自身科普的片段代码片段:

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

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

没什么好说的了。那就是很普通的错误。我们得以为logo是不是应该是H1标签而互相喷到牛都放完回家了,但那边不是大家谈论的点子。真正的标题在于figure元素的滥用。figure只应该被引述在文档中,或者被section元素围绕。我想你的logo并不太可能以如此的主意引用吧。很粗略,请勿使用figure。你只须求那样做:

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

Figure也不只只是图片

另一个宽广的关于figure的误解是它只被图片采用。figure可以是摄像,音频,图表,一段引述文字,表格,一段代码,一段随笔,以及其余它们或者其余的三结合。不要把figure局限于图片。web标准的义务是可依赖的用竹签描述内容。

五、不要选用不需求的type属性

那是个科普的标题,但并不是一个漏洞非常多,我觉着我们应当通过一流实践来防止那种作风。
在HTML5中,script和style元素不再需求type属性。但是那个很可能会被你的CMS自动抬高,所以要移除也不是那么的无拘无束。但假诺你是手工编码或者你完全可以操纵你的模版的话,那实在没有怎么理由再去涵盖type属性。所有的浏览器都以为脚本是javascript而体制是css样式,你没必要再多此一举了。

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

实在只要求这样写:

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

竟然点名字符集的代码都可以省略掉。马克 Pilgrim在Dive into
HTML5的语义化一章中作出了诠释。

六、form属性的荒谬采纳

HTML5引入了一部分form的新属性,以下是一对应用上的注意事项:
布尔属性
一对多媒体元素和另外因素也有所布尔属性。这里所说的规则也如出一辙适用。
有一部分新的form属性是布尔型的,意味着它们一旦出现在标签中,就确保了相应的表现早就设置。那几个属性包括:

  • autofocus
  • autocomplete
  • required

坦白的说,我很少看到那般的。以required为例,常见的是底下那种:

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

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

严谨来说,那并没有大碍。浏览器的HTML解析器只要看到required属性现身在标签中,那么它的成效就会被利用。可是如若你扭曲写equired=”false”呢?

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

解析器依旧会将required属性视为有效并推行相应的行事,尽管你试着告诉它并非去执行了。那显著不是您想要的。
有三种有效的方法去行使布尔属性。(后三种只在xthml中有效)

  • required
  • required=””
  • required=”required”

上述例子的科学写法应该是:

<input type="email" name="email" required />
网站地图xml地图