web-dev-qa-db-ja.com

html5-<figure>要素の位置の重要性

私は簡単な質問に悩まされている上級開発者です。 Webページ上の<figure>要素の位置は重要ですか?そして、figure要素のいくつかの良いユースケースは何ですか?

一般的に、写真、コードブロック、図などに<figure>要素が使用されていると言われています。要素のコンテンツはメインフローに関連していますが、その位置はメインフローとは無関係であり、削除された場合、文書の流れに影響を与えます。

Pluralsight からのこれらの記事によると:
コンテンツが不可欠な場合は<figure>を使用しますが、ページ上の正確な位置ですisが重要です。

html.com の記事を見ると:
_<figure>はメインコンテンツに直接関連するコンテンツ用であり、<aside>は「接線的に関連する」コンテンツ用です。

したがって、<figure>要素:

  1. 自己完結型コンテンツ(それ自体に意味があるコンテンツ)が含まれています。
  2. それは削除することができ、例えば記事に影響を与えません。
  3. メインコンテンツに直接関連するコンテンツにのみ使用されます。
  4. 記事内の位置は重要です。

<img>が不要な場合に、<figure><figcaption>でラップする理由と時期を教えてください。

2
Luhn

カメラのマニュアルを紙に印刷したとします。

1ページにすべての要素の図を含めることができます。この図は図番号です。 1。

16ページに「図1を見てください」と書くことができます

これは、ページの他の部分に配置する必要があるため、ページの別の部分に配置することができることを意味します。

しかし、SEOの観点からすると、図は識別可能なテキストコンテンツを持つことができます(持つ必要があります)。そのため、「figcaption」要素が必要です。

検索エンジンのAIが、画像で説明しているテキストまでの「距離」を測定できるとは思えませんが、すべてのSEO戦略として、用語を配置したい場合、適切なキャプションのあるコンテンツと図がある場合これはあなたにいいです。

2
Rafael