セマンティックエイチティーエムエル
セマンティックHTMLとは？
内容の役割が伝わるHTMLの書き方。
セマンティックHTMLの意味
見出し、ナビゲーション、本文などに適切なタグを使い、構造を明確にします。
どんな場面で使う？
Webサイトやアプリの見た目、情報の並び方、利用者の操作を考える場面で登場します。
見た目の好みだけでなく、迷わず使えるか、スマートフォンでも読みやすいかという視点で確認します。
身近な例
見た目だけでなく、見出しには見出し用のタグを使います。
何を押さえればいい？
役割
内容の役割が伝わるHTMLの書き方。
理解の深さ
基本の意味に加えて、関連する用語との役割の違いまで押さえると理解が深まります。
確認の視点
見た目の好みだけでなく、迷わず使えるか、スマートフォンでも読みやすいかという視点で確認します。
似た言葉・関連する言葉との違い
「セマンティックHTML」は内容の役割が伝わるHTMLの書き方ものです。一方、「HTML」はWebページの「骨組み」を作る言葉ものです。役割を分けて考えると、二つのつながりを理解しやすくなります。
使うとき・学ぶときの注意
きれいに見えることだけを目的にせず、読みやすさ、操作のしやすさ、さまざまな利用環境を一緒に考えることが大切です。
セマンティックHTMLについてのQ&A
QセマンティックHTMLをひと言でいうと？
A内容の役割が伝わるHTMLの書き方。
QセマンティックHTMLはどの言葉と一緒に覚えるとよい？
A「HTML」、「アクセシビリティ」と一緒に覚えると、役割や使われる場面の違いが分かりやすくなります。
AIに相談してみる
このままコピーして使える指示文
［ ］の部分を自分の状況に合わせて書き換えてください。
あなたはセマンティックHTMLとアクセシビリティの専門家です。以下のHTML構造を、要素の意味・見出し階層・ランドマーク・読み上げやすさの観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。 対象のHTML構造： ［ここに貼り付け］
秘密情報は入力しないでください
ほかの言葉も調べてみませんか？
用語一覧へ戻る