クイックヒント：フィギュアとフィガプション要素を使用する正しい方法

figureおよびfigcaption要素は、コンテンツの構造とアクセシビリティを強化するために頻繁に一緒に使用される意味的にペアになったHTML5タグです。 このガイドは、正しい実装のためのベストプラクティスを提供します

要素は、イラスト、コードスニペット、図などの自己完結型コンテンツをカプセル化します。 ドキュメント内の配置は、全体的な意味を変えません。 重要なことに、すべての画像がfigure要素を必要とするわけではありません。情報の独立した単位であるもののみ。figure 図内の複数の画像：

複数の関連画像は、単一の要素に存在する可能性があります：

figure

画像を超えて：

<figure>
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847567268.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
</figure>

要素は画像に限定されません。 それは適しています：

figureコードブロック

ビデオ
オーディオクリップ
広告
コードブロックを備えた
• 例：

ネストされた数字：

<figure>
  <code>
    p {
      color: #333;
      font-family: Helvetica, sans-serif;
      font-size: 1rem;
    }
  </code>
</figure>

ネスト要素は、論理的に適切な場合に受け入れられます。 ARIA属性を使用すると、セマンティクスをさらに改善できます

figure効果的なFigcaptionの使用：

<figure role="group">
  <figcaption>Dog breeds</figcaption>
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
    <figcaption>Adorable Maltese Terrier</figcaption>
  </figure>
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
    <figcaption>Cute black labrador</figcaption>
  </figure>
</figure>

要素は、のキャプションまたは凡例を提供します。必ずしも必要ではありませんが、使用する場合は、理想的には、

：

内のコンテンツの前または後に配置する必要があります。 figcaption figureまたは：figure

<figure>
  <figcaption>Three different breeds of dog.</figcaption>
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847567268.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
</figure>

リッチなフィガプション：

<figure>
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847567268.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <figcaption>Three different breeds of dog.</figcaption>
</figure>

より詳細なキャプションについては、見出しと段落を組み込みます：

よくある質問（FAQ）：

<figure>
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018848099968.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <figcaption>
    <h2 id="Puppy-School">Puppy School</h2>
    <p>Championship Class of 2016</p>
  </figcaption>
</figure>

提供されたFAQSセクションは、およびの使用に関する一般的な質問に正確に対処するため、ほとんど変わらないままです。 情報はすでに簡潔で十分に構造化されています

以上がクイックヒント：フィギュアとフィガプション要素を使用する正しい方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。