HTMLタグ チートシート

AI作成データこのコンテンツのデータはAIが公式資料や辞書を参照して作成しました。正確さを心がけていますが、誤りが含まれる可能性があります。

HTMLタグの一覧チートシート。基本構造・セクション・テキスト・フォーム・テーブル・メディアなど用途別に約70タグを収録。セマンティクスの使い分けガイド付きで、SEO・アクセシビリティ観点も解説。

約70のHTMLタグを用途別に整理。セマンティクスの使い分けもわかる

Loading...

こんなときに使えます

シーンsectionとarticleとdivの使い分けに迷ったとき
得られる情報用途ごとの比較表で適切なタグをすぐ判断できる

セマンティクスガイドで混乱しやすいタグの違いを解説

よくある質問

sectionとarticleとdivはどう使い分けますか?
articleは独立して意味をなすコンテンツ(ブログ記事やニュース記事など)に使います。sectionはページ内の意味的なまとまり(章・節)に使い、通常は見出しを伴います。divは意味を持たない汎用コンテナで、スタイリング目的のみの場合に使います。
strongタグとbタグの違いは何ですか?
strongは意味的に「重要な内容」を示し、スクリーンリーダーが強調して読み上げます。bは視覚的に太字にするだけで意味的な強調はありません。SEOやアクセシビリティを考慮する場合はstrongを使います。
HTMLのmetaタグでSEOに重要なものはどれですか?
最も重要なのはmeta descriptionで、検索結果のスニペットに表示されます。次にviewport設定(モバイル対応)、charset指定(文字化け防止)が必須です。OGPタグ(og:title, og:image等)はSNSシェア時の表示に影響します。
HTML5で追加されたセマンティックタグにはどんなものがありますか?
主なものはheader, footer, nav, main, article, section, aside, figure, figcaption, time, mark, details, summaryなどです。これらを使うことで文書構造が明確になり、SEOやアクセシビリティが向上します。