6

セマンティック HTML5 コードを作成しようとしていますが、それが正しいかどうかわかりません。視覚的に、3 つの列に分割された記事/投稿があります。

画像(200px) | H1+ サマリー + その他のリンク(350px) | 2 つのヘッダー H2 (150px)を含む追加セクション

CSS ではfloat: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>

どちらが正しいですか？

4

2 に答える 2

6

あなたが望むものに依存します..

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>
于 2012-05-10T09:40:53.553 に答える
-20

そうではありません...どちらも、そして答えも... DON'T USE DIV ! 代わりにセクションを使用してください！

于 2012-05-10T13:41:26.927 に答える