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

要素は、イラスト、コードスニペット、図などの自己完結(jié)型コンテンツをカプセル化します。 ドキュメント內(nèi)の配置は、全體的な意味を変えません。 重要なことに、すべての畫像がfigure要素を必要とするわけではありません。情報(bào)の獨(dú)立した単位であるもののみ。figure 図內(nèi)の複數(shù)の畫像：

複數(shù)の関連畫像は、単一の要素に存在する可能性があります：

figure

<figure>
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847567268.jpg"  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>

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

figure効果的なFigcaptionの使用：

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

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

內(nèi)のコンテンツの前または後に配置する必要があります。 figcaption figureまたは：figure

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

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

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

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

よくある質(zhì)問（FAQ）：

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

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

以上がクイックヒント：フィギュアとフィガプション要素を使用する正しい方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。