HTMLフィギュアとFigcaptionタグの使用方法
図とfigcaptionタグを使用して、メディアコンテンツをタイトルセマンティクスに正しく関連付け、アクセシビリティ、SEO、構造を改善します。 1.図は、写真、チャート、コードスニペットなどの独立したコンテンツを含むために使用されます。 2。フィグキャプションはタイトルを提供します。タイトルは、その中の最初または最後の位置に配置できます。 3.タイトル、テキストに引用されているチャート、またはテキストの意味に影響を与えることなく削除できるコンテンツを備えたメディアに適しています。 4.それを使用する場合、スタイルレイアウトのみに使用されないように、画像ALT属性を保持する必要があります。 5.デフォルトでは視覚的なスタイルはありません。CSSは外観を制御する必要がありますが、HTMLセマンティクスを強化します。
figureとfigcaption HTMLタグは、関連するキャプションを持つ画像、図、コードスニペット、またはその他のメディアを意味的にグループ化するのに役立ちます。それらを使用すると、アクセシビリティ、SEO、およびコンテンツの全体的な構造が改善されます。
フィギュアとフィガプションタグが何をするか
<figure></figure>要素は、ドキュメントのフローに影響を与えずに、イラスト、写真、図、またはコードの例など、メインコンテンツから離れることができる自己完結型コンテンツを表します。通常、インラインで参照されていますが、単独では立つことができます。
<figcaption></figcaption>要素は、内部の<figure></figure>のキャプションまたは凡例を提供します。オプションですが、使用する場合は、 <figure></figure>の最初または最後の子である必要があります。
一緒に、彼らは読者を選別し、検索エンジンがメディアとその説明の関係を理解するのに役立ちます。
フィギュアとフィガプションを使用するタイミング
これらのタグを使用して：
- 画像、チャート、またはコードブロックにはキャプションがあります。
- コンテンツは、メインテキストから参照されます（例：「図1を参照」）。
- メディアは自己完結型であり、周囲のテキストの意味を破らずに削除することができます。
一般的なユースケース：
- 説明的なキャプション付きの写真
- タイトル付きのチャートまたはグラフ
- 説明付きのコードスニペット
- 記事のイラスト
それらの使用方法：基本的な構文
これが画像の簡単な例です。
<図> <img src = "chart.png" alt = "2020年から2023年までの売上成長> <figcaption>過去3年間の売上成長。</figcaption> </図>
コードスニペットで：
<図>
<pre class="brush:php;toolbar:false"> <code> function hello（）{
console.log（ "hello、world！"）;
} </code>
<figcaption>メッセージを印刷する単純なJavaScript関数。
上記のキャプションが必要な場合は、コンテンツの前に<figcaption>を配置することもできます。
<図>
<figcaption>基本的なWebプロジェクトのディレクトリ構造。</figcaption>
<pre class="brush:php;toolbar:false">
プロジェクト/
├├） index.html
├├。。CSS/
│└│。-style.css
└└）/ js/
└└）main.js
覚えておくべき重要なポイント
-
<figure></figure>内部でも画像にaltテキストを常に使用してください。alt属性はアクセシビリティの画像を説明し、<figcaption></figcaption>はコンテキストを追加します。 -
スタイリングだけに
<figure></figure>を使用しないでください。それは意味的な要素であり、浮遊画像のラッパーではありません。 - 単一のキャプションと一緒に画像とチャートのように、複数の要素が1つの
<figure></figure>に移動できます。 -
<figure></figure>ごとに1つの<figcaption></figcaption>のみですが、必要に応じて複数の文または段落を含めることができます。
これらのタグは、デフォルトで視覚的な外観を変更することはありません - スタイリングはCSSまでです - しかし、彼らはあなたのHTMLをより意味のあるものにします。
基本的に、それが下（または上）のキャプションがある教科書の図のように見える場合（または上）、 <figure></figure>と<figcaption></figcaption>がおそらく正しい選択です。
以上がHTMLフィギュアとFigcaptionタグの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undress AI Tool
脱衣画像を無料で
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
`` vs.` `in html
Jul 19, 2025 am 12:41 AM
これは、大きなブロックコンテンツ領域を分割するために使用されるブロックレベルの要素です。これは、テキストまたはコンテンツの断片の小さなセグメントを包むのに適したインライン要素です。特定の違いは次のとおりです。1。列、幅、高さのみを占有し、内側と外側の縁を設定できます。これは、ヘッダー、サイドバーなどのレイアウト構造でよく使用されます。 2。ラインを包み、コンテンツ幅のみを占有し、変色、太字などのローカルスタイル制御に使用されます。 3.使用シナリオの観点から、それは全体の領域のレイアウトと構造の組織に適しており、全体的なレイアウトに影響を与えない小規模なスタイル調整に使用されます。 4.ネスティングの場合、任意の要素を含めることができ、ブロックレベルの要素を内部にネストしないでください。
html `link rel =' preload '`を使用したリソースのプリロード
Jul 19, 2025 am 12:54 AM
Linkrel = "Preload"は、ページの読み込みパフォーマンスを最適化するテクノロジーであり、重要なリソースを事前にロードするために使用されます。その中心的な目的は、フォント、キーCSS/JS、ホーム画面画像など、ホーム画面のレンダリングに不可欠なリソースの負荷を優先することです。使用する場合に注意してください。1。リソースタイプを指定するには、AS属性を正しく設定します。 2。乱用を避け、過度の帯域幅の使用を防ぐ。 3.リソースが実際に使用されることを確認してください。そうしないと、リクエストの無駄を引き起こします。 4.クロスドメインリソースにCrossorigin属性を追加します。 AS属性の欠如などの誤った執筆方法により、プリロードが無効になります。合理的な使用は、ページの読み込み効率を改善する可能性があります。そうしないと、逆効果になる可能性があります。
初心者向けの不可欠なHTMLタグ
Jul 27, 2025 am 03:45 AM
HTMLをすばやく開始するには、Webスケルトンを構築するためにいくつかの基本的なタグをマスターするだけです。 1.ページ構造は不可欠であり、ルート要素であり、メタ情報が含まれ、コンテンツディスプレイ領域です。 2。タイトルを使用します。レベルが高いほど、数が小さくなります。タグを使用してテキストをセグメント化して、レベルをスキップしないようにします。 3.リンクはタグを使用してHREF属性を一致させ、画像はタグを使用し、SRCおよびALT属性が含まれます。 4.リストは、順序付けられていないリストと順序付けリストに分割されます。各エントリは表され、リストにネストする必要があります。 5.初心者は、すべてのタグを強制的に記憶する必要はありません。あなたが書いている間にそれらを書いてチェックする方がより効率的です。構造、テキスト、リンク、写真、リストをマスターして、基本的なWebページを作成します。
Shadow Domの概念とHTML統合
Jul 24, 2025 am 01:39 AM
Shadowdomは、孤立したDOMサブツリーを作成するためにWebコンポーネントテクノロジーで使用されるテクノロジーです。 1.独自のスタイルと行動を備えた通常のHTML要素上の独立したDOM構造のマウントを可能にし、メインドキュメントに影響しません。 2。AttachShadowメソッドの使用やモードの設定など、JavaScriptを介して作成されました。 3。HTMLと組み合わせて使用すると、3つの主要な機能があります。クリア構造、スタイル分離、コンテンツプロジェクション（スロット）。 4。ノートには、複雑なデバッグ、スタイルスコープ制御、パフォーマンスオーバーヘッド、フレームワークの互換性の問題が含まれます。要するに、Shadowdomは、再利用可能で汚染されていないUIコンポーネントを構築するためのネイティブカプセル化機能を提供します。
別のタグ内にタグを入れることはできますか？
Jul 27, 2025 am 04:15 AM
youcannotnesttagsinsisideantagbecuseit’sinvalidhtml; browsersautomatelycloseThefirsteforeopeningthenext、spedinginselementsied、useinlineelements like like like、orforstylingwithinaparagraph、またはblockainerslikegoriveparagragh
リンクにHTML「ダウンロード」属性を使用します
Jul 17, 2025 am 03:57 AM
TheHTMLdownloadattributeallowsuserstodownloadfilesdirectlyfromalinkbyusingthetag.Toimplementit,adddownloadtotheanchortag,suchasDownloadPDF,orspecifyacustomfilenamelikeDownloadasmy-document.pdf.1.Itworksbestwithsame-originURLsandcommonfiletypeslikePDF
html `style`タグ：インラインと内部css
Jul 26, 2025 am 07:23 AM
シーンに従ってスタイル配置方法を選択する必要があります。 1。インラインは、操作によるボタンの色の変更など、単一要素または動的JS制御の一時的な変更に適しています。 2。内部CSSは、ページが少ないプロジェクトと単純な構造に適しています。これは、ログインページの基本スタイル設定など、スタイルの集中管理に便利です。 3。再利用、メンテナンス、パフォーマンスが優先され、大規模なプロジェクトの外部リンクCSSファイルを分割することをお勧めします。
HTMLにYouTubeビデオを埋め込む方法
Jul 16, 2025 am 04:43 AM
YouTubeビデオをWebページに埋め込むには、YouTubeが提供する埋め込みコードを直接コピーして、HTMLページに貼り付けることができます。 1.ターゲットビデオページを開き、正しいビデオリンクを確認します。 2。「共有」→[埋め込み]をクリックして、生成されたiframeコードをコピーします。 3。または、iframeタグを手動で作成し、srcをhttps://www.youtube.com/embed/video idに設定します。 4.レスポンシブ幅を使用して、Allowfullscreen属性を追加することをお勧めします。 5.高度な提案には、コンテナを使用して16：9の比率を達成すること、パフォーマンスを改善するための遅延ロード、プライバシーポリシーのヒントに注意を払うことが含まれます。
