4

私はまだhtml 5での「セクション」の使用について非常に混乱しています。以下の解決策のどれがより良いものかを知りたいです。リスト内の内容は互いに関連していません。それで、私はそれらのそれぞれにセクションを与える必要がありますか、それともすべてを1つのセクションに入れる必要がありますか. 下記参照：

解決策 1:

<ul>
<li>
    <section>
        <header>
            <h2>Services</h2>
        </header>
        <img src="img/foto/testpic1.jpg" alt="" title="" border="0"/>
        <p>This is text</p>
    </section>
</li>
<li>
    <section>
        <header>
        <h2>Products</h2>
        </header>
        <img src="img/foto/testpic2.jpg" alt="" title="" border="0"/>
        <p>This is text</p>
    </section>
</li>
<li>
    <section>
        <header>
        <h2>Contacts</h2>
        </header>
        <img src="img/foto/testpic3.jpg" alt="" title="" border="0"/>
        <p>This is text</p>
    </section>
</li>
</ul>

解決策 2:

<section>
<ul>
    <li>
        <header>
            <h2>Services</h2>
        </header>
        <img src="img/foto/testpic1.jpg" alt="" title="" border="0"/>
        <p>This is text</p> 
    </li>
    <li>
        <header>
            <h2>Products</h2>
        </header>
        <img src="img/foto/testpic2.jpg" alt="" title="" border="0"/>
        <p>This is text</p> 
    </li>
    <li>
        <header>
            <h2>Contacts</h2>
        </header>
        <img src="img/foto/testpic3.jpg" alt="" title="" border="0"/>
        <p>This is text</p>
    </li>
</ul>
</section>
4

2 に答える 2

2

<ul>ここで最初にリスト ( ) が必要な理由がわかりません。ここではそうではない実際のリスト（またはリストのような要素、つまりメニュー）にのみ使用するのが理にかなっているので、私はそれを削除します。

について<section>。仕様によると：

<section>要素は、ドキュメントまたはアプリケーションの一般的なセクションを表します。このコンテキストでのセクションは、通常は見出しを持つコンテンツのテーマ別グループです。

これにより、ソリューション＃2が不要になります。

もっと：

要素のコンテンツをシンジケート化することが理にかなっている場合、作成者は<article>要素の代わりに要素を使用することをお勧めします。<section>

だからあなたの場合、私はこれをします：

<article>
    <header>
        <h2>Services</h2>
    </header>
    <img src="img/foto/testpic1.jpg" alt="" title="" border="0"/>
    <p>This is text</p> 
</article>
<article>
    <header>
        <h2>Products</h2>
    </header>
    <img src="img/foto/testpic2.jpg" alt="" title="" border="0"/>
    <p>This is text</p> 
</article>
<article>
    <header>
        <h2>Contacts</h2>
    </header>
    <img src="img/foto/testpic3.jpg" alt="" title="" border="0"/>
    <p>This is text</p>
</article>

また、スタイリング目的でラッパーが必要な場合は、古き良きものを使用できます<div>

<section>要素は汎用コンテナ要素ではありません。スタイリング目的またはスクリプト作成の利便性のために要素が必要な場合、作成者は<div>代わりにその要素を使用することをお勧めします。

セクション要素_

トピックに関する記事

于 2012-11-29T17:24:26.687 に答える
0

<section>両方とも<div>セクショニングに使用されるという点で似ています。違いは、意図したセクションがスタイリングを目的としている場合は を<div>使用する必要があることですが、セクションが文字通りコンテンツ用である場合は を使用します<section>。次の引用を見てください。

「要素がスタイリング目的またはスクリプト作成の便宜のためにのみ必要な場合、作成者は代わりに div 要素を使用することをお勧めします...一般的なルールは、要素のコンテンツが明示的にリストされる場合にのみ section 要素が適切であるということです... ~ WHATWG」 </p>

の一般的な考え方は、 のようなコンテンツ<section>をリストすることであることに注意してください<li>。ただし、後者は箇条書きに適しています... 一方、前者はブログ投稿などに適しています.

したがって、どちらのソリューションもお勧めしません。次のようなものを使用する必要があります。

<div class="blog">
    <article class="post">
        <h2 class="post-title">Services</h2>
        <img src="img/foto/testpic1.jpg" alt="" title="" border="0"/>
        <p class="post-excerpt">This is text</p>
    </article>
    <article class="post">
        <h2 class="post-title">Products</h2>
        <img src="img/foto/testpic2.jpg" alt="" title="" border="0"/>
        <p class="post-excerpt">This is text</p>
    </article>
    <article class="post">
        <h2 class="post-title">Contacts</h2>
        <img src="img/foto/testpic3.jpg" alt="" title="" border="0"/>
        <p class="post-excerpt">This is text</p>
    </article>
</div>

それが役立つことを願っています。ではごきげんよう。

[参考：https ://azizecomm.wordpress.com/2016/01/04/html5-section-vs-div/ ]

于 2016-01-04T03:14:02.270 に答える