伽然官网|AnyForWeb官网|CtrlCRM官网 博客分享:WEB技术|WEB前端|WEB视觉

小心Html5的写法误用

2014-07-09浏览:
标签HTML5

人们在标签使用中最常见到的错误之一就是随意将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>

 

本文为Anyforweb技术分享博客,需要了解网站建设及更多web应用相关信息,请访问anyforweb.com



标签



订阅

欢迎订阅《AnyForWeb 程序开发》
博客


热门文章



AnyForWeb 内部博客分享

版权所有 © 2000- AnyForWeb

Oh~What’s up?

您当前访问的网站已关闭!

如需了解Web行业资讯,请进入:

如需了解Web行业资讯,请进入:伽然书院