セマンティックとは。用語を調べる。

はじめに

mainタグやdivタグを調べている中、「HTML5で導入されたセマンティックな要素」の「セマンティック」という用語についてどういう意味なのか分からなかったので調べてみました。

セマンティック

セマンティックとは、「意味に関すること」を指す言葉です。日本語で言い換えても少しわかりにくいのですが、言語やデータの意味や解釈に関して使われることが多いそうです

セマンティックな意味の例

1. <header> タグ:
   • 意味: ページの「ヘッダー部分」を示します。通常、ページのタイトルやナビゲーションメニューが含まれます。
   • セマンティックな役割: ページの上部に位置するセクションとしての意味を持ちます。
2. <footer> タグ:
   • 意味: ページの「フッター部分」を示します。通常、著作権情報や連絡先情報が含まれます。
   • セマンティックな役割: ページの下部に位置するセクションとしての意味を持ちます。
3. <main> タグ:
   • 意味: ページの「主要なコンテンツ部分」を示します。ページ内で最も重要なコンテンツが含まれます。
   • セマンティックな役割: ページの主な内容としての意味を持ちます。
4. <article> タグ:
   • 意味: 独立したコンテンツの塊を示します。例えば、ブログの投稿やニュース記事など。
   • セマンティックな役割: 特定のトピックやテーマに関するコンテンツとしての意味を持ちます。
5. <section> タグ:
   • 意味: ページ内の「セクション」や「章」を示します。例えば、製品の説明セクションやサービスの紹介セクションなど。
   • セマンティックな役割: ページ内の異なる内容のブロックとしての意味を持ちます。

セマンティックな意味の利点

1. アクセシビリティの向上:
   • スクリーンリーダーなどの支援技術が、ページの構造やコンテンツを理解しやすくなります。例えば、スクリーンリーダーは <header> タグを見て、ページの上部にナビゲーションが含まれていることを理解できます。
2. SEO（検索エンジン最適化）:
   • 検索エンジンはページの構造を理解しやすくなり、コンテンツの重要性や関連性をより正確に評価することができます。セマンティックな要素を使用することで、検索エンジンがページの内容を正確に把握できます。
3. コードの可読性:
   • セマンティックな要素を使うことで、HTMLのコードが意味を持ち、他の開発者がコードを理解しやすくなります。たとえば、<footer> タグがあれば、コードを見ただけでその部分がフッターであると分かります。

まとめ

セマンティックな意味を持たせることは、ウェブページの構造をより意味的に正確にし、アクセシビリティやSEOの面での利便性を高めるために重要です。HTMLタグを適切に使うことで、ページの内容がより分かりやすく、使いやすくなります。
自分だけでなく、ほかの人にもわかりやすい意味を持たせるために大切なんだな、と思いました。