8

HTML5 で画像ギャラリーを作成する場合、 or のようなセムティック タグを付ける必要がありますsectionかarticle、それとも単にdiv?

4

3 に答える 3

11

画像ギャラリーのコンテキストによって異なります。

ギャラリーがメイン コンテンツに関連している場合は、メイン コンテンツ内にギャラリーを配置するのが理にかなっていsectionます。

このarticleタグは、個々のブログ投稿など、タグ内のコンテンツがそれ自体で意味を成す場合に使用する必要があります。タグを使用してマークされarticleたコンテンツは、コンテンツをシンジケートする必要がある場合 (RSS フィードなど) にも非常に役立ちます。この最後の点を説明するために、W3C は次のように説明しています。

シンジケーションで再配布されるコンテンツで特に使用する場合、article 要素の目的は Atom の entry 要素と似ています。

このdivタグは、要素の一般的なグループ化に使用されます。他のタグが目的に適しておらず、スタイリングやスクリプトの目的でグループ化が必要な場合に使用する必要があります。W3C の推奨によると:

作成者は、適切な要素が他にない場合に備えて、最後の手段として div 要素を参照することを強くお勧めします。div 要素の代わりにより適切な要素を使用すると、読者のアクセシビリティが向上し、作成者の保守が容易になります。

質問に戻ると、画像ギャラリーがコンテンツに関連している場合 (ブログ投稿の画像ギャラリーなど)、ブログ投稿article全体にsectionを使用し、画像ギャラリーに を使用します。ギャラリーに見出しがない場合は ではなく、sectionとしてマークする必要があると主張する人もいるかもしれませんdiv。ただし、W3C は、その Web サイトのセクションを考えるのに非常に優れた方法を提供します (申し訳ありませんが、10 担当者未満のリンクを 2 つ以上投稿することはできません!):

一般的な規則として、section 要素は、要素の内容がドキュメントのアウトラインに明示的に記載されている場合にのみ適切です。

考えてみれば、ギャラリーを記事のアウトライン (たとえば、ブログ投稿) にリストすることは非常に理にかなっています。記事に特定の導入テキストがある場合でも、記事の概要に記載できます。アウトラインは、概念的には記事の目次のようなものであり、さまざまなセクションがリストされていると考えてください。

前にも言ったように、それは本当に文脈に依存します。

編集：

figureギャラリー自体の画像に関しては、Romin が提案したように、それらを内部に配置することは理にかなっています。あなたの発言に答えるには：

感謝しますが、「ドキュメントの意味に影響を与えることなく、ドキュメントのメインフローから移動できる」と彼らが言っているので、ここにあるとは思いません。したがって、テキスト内の画像を対象としています。ギャラリーから画像を削除すると、その意味に影響します

W3C が実際に推奨しているのは次のとおりです。

したがって、要素 ( figure) を使用して、ドキュメントのメイン コンテンツから参照されるイラスト、図、写真、コード リストなどに注釈を付けることができますが、ドキュメントの流れに影響を与えることなく、ドキュメントから離れることもできます。ページの横、専用ページ、または付録などの主要なコンテンツ。

つまり、ドキュメントの流れに影響を与えずに、画像ギャラリーをプライマリ コンテンツ (つまり、ブログ投稿のコンテンツまたはテキスト) から移動できるかどうかという問題です。画像ギャラリー自体は、実際にはサイドバーなど、ドキュメントの主要なコンテンツから移動することができ、その位置/順序の変更はコンテンツの解釈方法に影響を与えません. その位置が影響を与えるfigure場合、その特定のケースでは適切ではありません。

要約すると、ドキュメントにとってコンテンツ (画像ギャラリー) が重要であるが、コンテンツの流れの中での位置が重要でない場合 (つまり、あまり影響を与えずに移動できる場合) は、 を使用しますfigure。その位置が重要な場合は、他のタグを使用してください。重要でない場合は、aside代わりに使用してください。

于 2013-04-26T13:12:41.640 に答える
1

section意味がある場合、または意味がある場合は a を使用できますaside。それ以外の場合は使用してdivください。

audioギャラリーにはやのようなセマンティック タグがないvideoため、 を使用することをお勧めしますdiv。

それはWeb Componentsリリースされるまでです:)

于 2012-09-04T09:52:23.583 に答える
-1

HTML5 を使用している場合は、セマンティック タグを使用することをお勧めしdivます。

実際、ギャラリーをセマンティック タグにうまくマッピングすることもできます。たとえば、セクションには個々の画像である記事のリストを含めることができます。Anasideは、特定の画像などに関する詳細情報を提供できます。

figureとの使用方法を示す素敵な記事figcaptionがここにあります: http://html5doctor.com/the-figure-figcaption-elements/

于 2012-09-04T10:13:22.113 に答える