南京seo优化

几种常见的HTML5容易写错的地方

文章来自:www.njxiazhi.com 南京夏至信息科技有限公司

2019-07-26 16:01


一、不要使用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>

服务支持

我们珍惜您每一次在线询盘,有问必答,用专业的态度,贴心的服务。

让您真正感受到我们的与众不同!

合作流程

合作流程

网站制作流程从提出需求到网站制作报价,再到网页制作,每一步都是规范和专业的。

常见问题

常见问题

提供什么是网站定制?你们的报价如何?等网站建设常见问题。

常见问题

售后保障

网站制作不难,难的是一如既往的热情服务及技术支持。我们知道:做网站就是做服务,就是做售后。