セマンティックとは？
HTMLコーディングにおけるセマンティックとは、要素に意味を持たせ、コンテンツの構造や意味を明示的に表現することを指します。
セマンティックコーディングのメリット
SEO向上
セマンティックなコーディングをすることで、検索エンジンはコンテンツの意味や構造を正しく理解しやすくなります。これにより、ウェブページが適切なキーワードで検索結果に表示される可能性が高まります。
セマンティックなコーディングが推奨されるようになったきっかけ
HTML5の導入
HTML5の導入により、より多くのセマンティックな要素が導入されました。これにより、コンテンツの構造に対してより意味を持たせたり、より詳細に表現できるようになったため、セマンティックなコーディングが重要性を増しました。
よく使用されるセマンティックなタグ
<header>
ページやセクションのヘッダーを示すタグです。通常、サイトのロゴやサイト名、ナビゲーションメニューなどが含まれます。
<nav>
ナビゲーションメニューやリンクのセクションを示すタグです。ページ内の主要なリンクをまとめるために使用されます。
<main>
ページのメインコンテンツを示すタグです。ページ内で一番重要なコンテンツを包括します。1つのページに1つだけ使用することが推奨されています。
<article>
独立したコンテンツ単位を示すタグです。ブログ記事やニュース記事、個別のコンテンツを表現するために使用されます。
<section>
論理的なセクションを示すタグで、コンテンツをグループ化するために使用されます。セクション内にはhタグ とコンテンツが含まれます。
<section>タグ内にhタグを使用しないと「The W3C Markup Validation Service」でバリデーションエラーが出ます。
またhタグ内に<div>などのブロック要素を配置するのもエラーが出ます。
W3C's easy-to-use markup validation service, based on …
<aside>
メインコンテンツから関連する情報や補足情報を示すタグです。サイドバーや引用、広告などが含まれることがあります。
<footer>
ページやセクションのフッターを示すタグです。通常、著作権情報やコンタクト情報、サイト内リンクなどが含まれます。
<time>
日付や時刻を示すタグです。コンテンツ内で日時情報を正しくマークアップするために使用されます。
セマンティックコーディングのデメリット
SEOへの影響
セマンティックタグを適切に使用することでSEO効果が向上する可能性がありますが、誤った使用や不適切なコーディングが行われると逆にSEOのランキングに悪影響を及ぼす可能性もあります。
まとめ
HTMLコーディングにおけるセマンティックとは、要素に意味を持たせ、コンテンツの構造や意味を明示的に表現することです。これによってSEO効果が向上するというメリットがありますが、適切にコーディングをしないとSEOに悪影響を及ぼす可能性があります。自分がしたコーディングが正しいか、「The W3C Markup Validation Service」でチェックする必要があると感じました。
