HTMLには、文章の構造を示すためのセマンティックタグが存在します。これらのタグは、Webページのアクセシビリティを向上させるだけでなく、SEOにも影響を与えることがあります。今回は、セマンティックタグについて解説していきます。
セマンティックタグとは
セマンティックタグは、HTML5から導入された構造化マークアップのことで、要素の意味を明確に示すことができます。
これによって、Webページの構造が読みやすくなり、検索エンジンがページのコンテンツを正しく理解することができます。
セマンティックタグの実例
headerタグ
headerタグは、ページのヘッダーを表します。
このタグ内には、ページのタイトルやロゴ、ナビゲーションなどを記述することができます。
<header>
<h1>サンプルサイト</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>mainタグ
mainタグは、ページのメインコンテンツを表します。
このタグ内には、ページの主要なコンテンツや記事などを記述することができます。
<main>
<article>
<h2>記事タイトル</h2>
<p>記事本文</p>
</article>
</main>sectionタグ
sectionタグは、ページ内のセクションを表します。
このタグ内には、関連するコンテンツや記事などを記述することができます。
<section>
<h2>セクションタイトル</h2>
<article>
<h3>記事タイトル</h3>
<p>記事本文</p>
</article>
<article>
<h3>記事タイトル</h3>
<p>記事本文</p>
</article>
</section>asideタグ
asideタグは、ページのサイドバーを表します。
このタグ内には、関連するリンクや広告などを記述することができます。
<aside>
<h3>広告</h3>
<a href="#"><img src="ad.png" alt="広告"></a>
<h3>関連リンク</h3>
<ul>
<li><a href="#">リンク1</li>
</ul>
</aside>footerタグ
footerタグは、ページのフッターを表します。
このタグ内には、著作権表示や連絡先などを記述することができます。
<footer>
<p>© 2023 サンプルサイト</p>
<address>〒123-4567 東京都渋谷区1-2-3 TEL: 03-1234-5678</address>
</footer>セマンティックタグの利点
セマンティックタグを使うことで、以下のような利点があります。
アクセシビリティの向上
セマンティックタグを使用することで、スクリーンリーダーを使用するユーザーや、色覚異常を持つユーザーなどに対しても、ページの内容を正しく伝えることができます。
SEOの向上
検索エンジンは、Webページのコンテンツを理解するために、セマンティックタグを使用しています。セマンティックタグを適切に使用することで、検索エンジンからの評価を向上させることができます。
メンテナンスの容易化
セマンティックタグを使用することで、ページの構造が明確になり、メンテナンスが容易になります。また、タグの意味が明確なため、後からコンテンツを追加する際にも、タグの意味を考えながら追加することができます。
まとめ
セマンティックタグを使用することで、Webページのアクセシビリティを向上させ、SEOにも影響を与えることができます。適切に使用することで、ページの構造が明確になり、メンテナンスが容易になるという利点もあります。是非、セマンティックタグを活用して、より良いWebページを作成してください。
