セマンティックタグとは？非エンジニア向けにわかりやすく解説

一言で言うと

意味を持つ HTML 要素。main / section / article 等。

意味を持つ HTML 要素。main / section / article 等。IT エンジニアリングの現場で頻繁に登場する概念のひとつで、関連する仕組みやベストプラクティスと合わせて理解しておくと応用が利きます。

div や span の乱用を避け、意味のあるタグを使うことでコードの可読性と保守性が高まります。また、スクリーンリーダーなどの支援技術がページ構造を正確に解釈できるようになり、アクセシビリティの向上にも直結します。

文書構造の明示 ── div や span の乱用を避け、header・nav・main・footer・section・article などで文書のアウトラインを明確にする

アクセシビリティ ── スクリーンリーダーがランドマーク要素として認識し、キーボードナビゲーションや音声読み上げの精度が向上する

SEO ── 検索エンジンがページの構造と内容を解析しやすくなり、適切なインデックスにつながる