HTML5のFigureタグは何を意味するのでしょうか? HTML5のfigureタグの使い方を詳しく解説

HTML5のFigureタグは何を意味しますか? HTML5のfigureタグの使い方を知りたいですか?続いて、今日はHTML5のfigureタグの定義と使い方を中心に紹介します(例付き)

HTML5

タグの定義と使い方:

タグは要素を結合するために使用されます。 。

タグは、独立したストリーム コンテンツ (画像、チャート、写真、コードなど) を指定します。

要素のコンテンツはメインコンテンツに関連しており、要素の位置はメインコンテンツから独立している必要があります。削除されても、文書の流れには影響しません。

HTML5

タグの例:

PRC を説明するドキュメントのサブセクション:

<figure>
  <h1>PRC</h1>
  <p>The People&#39;s Republic of China was born in 1949...</p>
</figure>

ヒント: 要素のグループにキャプションを追加するには、

要素を使用します。

Figure 要素は要素の組み合わせであり、オプションでタイトルも付けられます。 Figure タグは、Web サイト制作ページ上の独立したコンテンツを表すために使用されます。Web ページから削除しても、Web ページ上の他のコンテンツには影響しません。図で表されるコンテンツは、写真、統計グラフ、またはコード例です。

注: Figure 要素内に配置できる figcaption 要素は 1 つだけであり、他の要素は無制限に配置できます。

HTML5 の Figure タグの役割:

以前、非常に興味深いホイールを見ました。これは、JavaScript コードを使用せずに実装されており、レビューアー ツールを使用しました。 HTML の基本的な構造は次のとおりです。

<figure class="effect-julia">
  <img src="img/21.jpg" alt="img21"/>
  <figcaption>
    <h2>Passionate <span>Julia</span></h2>
    <div>
      <p>Julia dances in the deep dark</p>
      <p>She loves the smell of the ocean</p>
      <p>And dives into the morning light</p>
    </div>
    <a href="#">View more</a>
  </figcaption>         
</figure>

そして、私が実装したソース コードの HTML 部分のコード、比較例:

<div class="hover-area area-Julia">
  <img src="imgs/21.jpg" height="360" width="480">
  <h3>PASSIONATE<strong>JULIA</strong></h3>
  <ul>
    <li>Julia dances in the deep dark.</li>
    <li>She loves the smell of the ocean</li>
    <li>And dives into the morning light</li>
  </ul>
</div>

明らかな違いは、新しいタグ

が追加されていることです。実装する元のコードでは HTML5 が使用されました。ページの基本構造については、この新しい HTML5 タグ

について簡単に説明しましょう。

公式ドキュメントには、ドキュメントの主流から独立していることが記載されていることに言及する価値があります。また、このタグに含まれるコンテンツは独立しており、移植可能であり、主流のコンテンツに影響を与えないようにする必要があるとも述べられています。上記の説明は、

としてオプションのサブタグ

の内容になります。

ここで、再発明しようとしていた車輪に戻り、画像のすべての説明コンテンツを

タグで囲むと、セマンティクスとコード構造の両方の点でより明確になることがわかりました。 。

HTML 4.01とHTML 5の違い

タグはHTML 5の新しいタグです。

【関連おすすめ】

HTML5のタグの意味は何ですか? HTML5のタグの基本的な使い方を詳しく解説

HTML5のheaderタグの意味は？ HTML5のheaderタグの使い方をご存知ですか？

以上がHTML5のFigureタグは何を意味するのでしょうか? HTML5のfigureタグの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。