HTML5 セマンティック マークアップの詳細な説明 セクションと記事の例

Web ページ制作 cnn6 記事の紹介: 最もよくある質問は、次のとおりです。どのような状況でこれらの要素を使用する必要がありますか?そして、これらの要素を正しく使用するにはどうすればよいでしょうか?

HTML5 は一連の新しい要素をもたらし、将来的に広く使用されるでしょう。ただし、

と

という 2 つの新しい要素を含め、使用が混乱する可能性のある要素がいくつかあります。

最もよくある質問は、どのような状況でこれらの要素を使用する必要があるかということです。そして、これらの要素を正しく使用するにはどうすればよいでしょうか?

セクション要素

これは最もあいまいな要素です。

要素との違いは何ですか?段落を分割するために

を使用していますが、

以外にこの要素をいつ使用しますか。それを説明するために公式ドキュメントを引用します。 WHATWG ドキュメントによると、

要素は次のように説明されています:

「

要素はドキュメントまたはアプリケーション内の共通の段落を表します - WHATWG」

説明から、

要素が次のように記述されていることがわかります。 section> 要素の目的は、

とほぼ同様に、要素をセグメント化することです。しかし、それでも特殊なケースがあります。ドキュメントには、次の特別なステートメントが追加されています:

「要素がスタイルまたはスクリプトの利便性のためだけに使用される場合、作成者は

を使用することをお勧めします。

要素は、要素のコンテンツが必要な場合に適しています。明示的にリストされている場合は必要です - WHATWG"

これに基づいて、次の 2 つの点を要約できます:

まず、section 要素は技術的にスタイル設定できますが、複雑なスタイルやスクリプトがある場合は、やはり使用することをお勧めします。 p要素。

2 番目に、

要素と同様に、section 要素はコンテンツをリストするために使用されます。

実際の例では、

要素を使用する理由は、次のとおりです。これは単なる例であり、

要素を使用することもできます。他の目的に使用すること。

Article 要素

名前からして、それ自体はすでによく説明されていますが、公式ドキュメントでどのように説明されているかをまだ確認する必要があります:

「ドキュメント、ページ、アプリケーション、またはサイト上の独立した要素 パーツ、および一般的には、たとえば公開する場合、フォーラムの投稿、雑誌やニュース項目、ブログのエントリ、ユーザーが投稿したコメント、インタラクティブなウィジェットやウィジェット、またはその他の独立したプロジェクトのコンテンツなど、個別に再配布または再利用できます。 . "

上記の説明から、

要素は構造化された記事、特にブログ、ページ コンテンツ、フォーラムの投稿など、公開したい記事専用であると結論付けることができます。

次の例は、

を使用してブログ記事を作成する方法を示しています。

<p class="blog">  
    <section class="post">  
        <h2 class="post-title">Blog Post Title</h2>  
        <p class="post-excerpt">Ice cream tart powder jelly-o.   
        Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>  
    </section>  
    <section class="post">  
        <h2 class="post-title">Blog Post Title</h2>  
        <p class="post-excerpt">Ice cream tart powder jelly-o.   
        Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>  
    </section>  
    <section class="post">  
        <h2 class="post-title">Blog Post Title</h2>  
        <p class="post-excerpt">Ice cream tart powder jelly-o.   
        Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>  
    </section>  
</p>

さらに、以下の例に示すように、

要素をセクション要素と組み合わせて、記事を複数の段落に分割することもできます。

<article class="post">  
    <header>  
    <h1>This is Blog Post Title</h1>  
    <p class="post-meta">  
        <ul>  
            <li class="author">Author Name</li>  
            <li class="categories">Save in Categories</li>  
        </ul>  
    </p>  
    </header>  

    <p class="post-content">  
        Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.   
        Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oatnbon. Gummies   
        halvah gummies danish biscuit applicak   
        cake tootsie roll sesame snaps lollipop gingerbread boe gingerbread jelly-o pastry.  
    </p>  

</article>

概要

World Wide Web の創設者と W3C の理事が予測したように、HTML5 によって作成されたすべての新しい要素は、Web 構造をよりセマンティックにすることを目的としています。これらの要素を正しく適用するかどうかは、Web 開発者とデザイナーの間でまだ議論されています。

いずれにしても、アイデアを混同しないでください。前に述べたように、それが理にかなっていて、それを使用すると構造が理にかなっていることがわかる場合は、それを使用してください。

以上がHTML5 セマンティック マークアップの詳細な説明 セクションと記事の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。