繁体   English   中英

HTML5 <section> 在里面 <article> 和标题

[英]HTML5 <section>'s inside <article> and header

我正在尝试制作语义HTML5代码,但不确定它是否正确。 Visualy我有一篇文章/帖子分为3个小册子:

图像 (200像素)| H1 +摘要+更多链接 (350px)| 附加部分有2个标题H2 (150px)

在CSS中我会浮动:left - figure,.post-summary,.post-aside

这是Ver.1:

<article>
        <figure>
        <a href="#"><img src="images/temp/entry_01.jpg" alt=""></a>
        <figcaption>Title for Case Study</figcaption>
        </figure>

        <div class="post-summary">          
            <section>
                <h1>MAIN Article Title</h1>
                <p>Lorem ipsum...</p>
                <a href="#">read more</a>
            </section>              
        </div>

        <div class="post-aside">
            <section>
                <h2>The Charges:</h2>
                <p>Lorem ipsum...</p>
            </section>

            <section>
                <h2>The Verdict:</h2>
                <p>Lorem ipsum...</p>
            </section>
        </div>
</article>

版本。 2

<article>
        <figure>
        <a href="#"><img src="images/temp/entry_01.jpg" alt=""></a>
        <figcaption>Title for Case Study</figcaption>
        </figure>

        <section class="post-summary">
            <h1>MAIN Article Title</h1>
            <p>Lorem ipsum...</p>
            <a href="#">read more</a>
        </section>                          

        <section class="post-aside">
            <h2>The Charges:</h2>
            <p>Lorem ipsum text ...</p>

            <h2>The Verdict:</h2>
            <p>Lorem ipsum text...</p>
        </section>

</article>  

哪一个是对的?

取决于你想要什么..

div - 我们都知道和喜爱的“通用流量容器”。 它是一个块级元素,没有额外的语义含义。

部分 - “通用文件或申请部分”。 一节通常有标题(标题),也可能是页脚。 它是一大块相关内容,如长文章的子部分,页面的主要部分(例如主页上的新闻部分),或webapp标签界面中的页面。

http://boblet.tumblr.com/post/130610820/html5-structure1 文章链接

我会这样使用它( 你的v2 ):

<div> <!-- Main article div -->
    <article> <!-- First article -->
        <section><!-- Header, about the author... --></section> 
        <section><!-- related info .. --></section> 
        <section><!-- conclusion --></section> 
    </article>

    <article>
        <section></section>
        <section></section>
        <section></section>
    </article>
</div>

这不对......他们两个,也是答案......不要使用DIV! 使用部分INSTEAD!

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM