一、不要使用section作为div的替代品,原文链接

幸免大范围的三种HTML5谬误用法

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

马耳他语原著:Avoiding common HTML5 mistakes

后生可畏、不要接纳section作为div的代替品

人们在标签使用中最平淡无奇到的不当之朝气蓬勃正是任意将HTML5的<section>等价于<div>。

具体地说,正是一贯作为代替品(用于样式卡塔尔(英语:State of Qatar)。在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和某些A奇骏IA 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引入了二十六个新因素(截至到最早的小说宣布时),大家在构造语义化和布局化的竹签时的筛选也变得有一点不严慎。也便是说,大家不应该滥用超语义化的要素。不幸的是,nav便是那般叁个被滥用的例证。nav成分的正规描述如下:

nav元素表示页面中链接到其它页面或许本页面别的部分的区块;包罗导航连接的区块。

潜心:不是兼具页面上的链接都亟待放在nav成分中——那个因素本意是用作主要的领航区块。举个具体的例子,在footer中平日会有那一个的链接,譬如服 务条约,主页,版权注明页等等。footer成分本身已经能够应付这几个情况,尽管nav成分也得以用在此,但不足为奇大家认为是不供给的。

WHATWG HTML spec

注重的词语是“主要的”导航。当然大家可以相互喷上一成天怎么叫做“主要的”。而自己个人是如此定义的:

  • 要害的导航
  • 站内找寻
  • 二级导航(略有争论)
  • 页面内导航(例如十分长的稿子)

既然如此并从未断然的长短,所以听大人讲四个非正式投票以致本身自身的批注,以下的情况,不管你放不放,小编左右放在<nav>中:

  • 分页调节
  • 社交链接(纵然有一点点交道链接也是重要导航,比方“关于”“收藏”)
  • 博客小说的价签
  • 博客文章的分类
  • 三级导航
  • 过长的footer

假定您不分明是还是不是要将生龙活虎雨后春笋的链接放在nav中,问你和谐:“它是任重(Ren Zhong卡塔尔(英语:State of Qatar)而道远的导航吗?”为了帮扶你回答那个主题材料,考虑以下器重条件:

  • 若果运用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>

以至点名字符集的代码都足以省略掉。Mark Pilgrim在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

来源: sinaued 发布时间: 二零一二-12-08 13:54 阅读: 1092 次 初藳链接 全屏阅读 [收藏]

眼前组内实行HTML5标签的上学,方法吧正是贵族每人筛选几个标签,本人先去上学,然后给大家作讲授。这几个进度我们要么挺有收获的。不过以后HTML5还地处草案阶段,有个别新的标签成分的解说也是常事有转移,以致标签踏入/移出也很频仍(比如hgroup卡塔尔国,同期现有的大的门户网站在使用HTML5方面也从未很好的范例能够参照,让大家的读书进程更招来。上边是自己在 html5doctor 上边见到的一篇小说,在当下大家懵懂的级差,大概看看大师的上书会更便于精通。由于学浅才疏,比超级多不明白的地点或许只是做了字面上的翻译,不对的地点还请大家多多打点。

下边附上原来的小说地址:Avoiding common HTML5 mistakes,作者 :Richard Clark,有疑问之处大家能够查处斯拉维尼亚语。

在这里篇小说中,笔者将给大家享受HTML5构建页面包车型大巴小错误和倒霉的奉行方法,让大家在之后的干活中制止那个不当。

决不把<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来让你继续前进。

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

应用标识的时候写入了生龙活虎部分并无需的光景那是不客观的。不幸的是,日常开掘我们在并不必要之处选拔<header>和<hgroup>标签。你能够跟进大家关于<header>和<hgroup>的最新进展,上边是本身的大约归纳:

  • <header>成分平日是平时作为少年老成组解释或然导航协理理工程师具,日常包罗section的题目.
  • <hgroup>成分会将当有副标题子标题,各样标记文字时,对<h1>到<h6>标题实行群组,将其看作section的标题.
过分施用的<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>

<hgroup>不创建选用

在标题标这么些核心上,平时看看接收<hgroup>的荒诞案例。在上边这种场合下您无法将<header>标签和<hgroup>标签一齐利用:

  • 此处独有一个标题,
  • 或许<hgroup>本人就够了(比方:无需<hgroup>卡塔尔(英语:State of Qatar)

先是种情况看上去是底下的范例:

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

本文由必威发布于必威-前端,转载请注明出处:一、不要使用section作为div的替代品,原文链接

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。