Welcome, Old Sport!

HTML5中的article和section元素的规范使用

by ilikecss ON 2013/03/19 9174

HTML5中的article和section元素的规范使用看了许多老外的博客都已经改为HTML5框架,对于HTML5的实践我也只是在工作中少数案件使用,昨天看了个老外的博客其中谈及了HTML5新的元素article和section的应用,官方其实有一个模糊的标准,但经过后期技术革新和优化有了一套更为人用之的模型,优化后更利于搜索引擎和文章架构的层次表现。这里我只想谈谈我自己对这两个新元素的使用方法,如有错误请在留言指出,不甚感激。

1. Section元素

大家可以参照我上面的Demo更形象的了解。官方的解释和大多数人是认为section是代替了原来的div,这话没错,如果不优化结构的情况下的确可以这样使用,W3C检查也不提示错误。我看了许多老外博客后理解是这是一个重复段落元素,你有许多结构重复的段落就可以使用这个标签,参考Demo中的代码:

<section class="post-layout">  
    <h2 class="title">Demo1 H2 Title</h2>  
    <p class="txt-contents">Here is the contents test test test test test test test test test test test test</p>  
</section><!--! REPEAT LAYOUT-->    
<section class="post-layout">  
    <h2 class="title">Demo1 H2 Title</h2>  
    <p class="txt-contents">Here is the contents test test test test test test test test test test test test</p>  
</section><!--! REPEAT LAYOUT-->     
<section class="post-layout">  
    <h2 class="title">Demo1 H2 Title</h2>  
    <p class="txt-contents">Here is the contents test test test test test test test test test test test test</p>   
</section><!--! REPEAT LAYOUT-->

类似上面这种就可以使用section元素让它成段落化结构。

2. Article元素

Article元素我的理解是包裹一整段内容的标签,整段内容的意思是有头、内容、尾巴。参考下面代码:

<article class="mian-contents"> 
 <header>
    <h1>Article H1 Title</h1>
</header>
<div class="post-layout">  
    <h2 class="title">Demo2 Title</h2>  
    <p class="txt-contents">Here is the contents test test test test test test test test test test test test</p>  
</div>
<footer>Copyright 2013 ilikecss presonal blog</footer>     
</article><!--! REPEAT LAYOUT-->

上面这段代码就包含了头、内容、尾巴三个部分组成,然后article元素也可以形成这样段落化重复使用。好比你的博客文章格式: header文章题目, div文章内容,footer文章作者日期评论数。我要指出一点,中间的div可以换成section像demo1这样使用。

article中引用到header作为头部,当看到此类结构你可以使用H1标签在每一个段落中出现。※注意:这是要结合articleheader标签同时使用的,W3C检测下来没有出现问题,搜索引擎貌似也没算我作弊,毕竟许多老外博客都是这样写的。

25条评论
  1. #1

    axiu说道:

    :twisted: 经常都是乱写一通……

  2. #2

    小蝴蝶说道:

    哎呀沙发没了 发现你确实like css

  3. #3

    Norman_D说道:

    哈哈,我终于会弄博客评论的头像了… :smile:

  4. #4

    Qihuawu说道:

    发觉一个问题,Section和Article默认display属性,都是block的,对嘛?

  5. #5

    入门啦说道:

    第一次来访问您的博客,多多支持哦!~

  6. 看起来效果很好哦

  7. #7

    wmtimes说道:

    html5的东西还没开始用。

  8. 支持~!

  9. #9

    大发说道:

    这个没看过统一的标准。。。这两货感觉难以区分。




TOP