【初心者向け】HTML5で始めるセマンティックマークアップとは？

HTML5 セマンティックマークアップという言葉を聞いたことはありますか？

これは、ウェブサイトの構造をより明確にし、人間だけでなく検索エンジンやブラウザにも内容を正確に伝えるための、非常に重要なコーディング手法です。

今回は、なぜセマンティックマークアップが重要なのか、そしてどのように実装するのかを、具体的なコード例を交えて解説します。

目次

セマンティックマークアップの重要性

セマンティック（semantic）とは「意味論的な」という意味です。HTML5では、<div>や<span>のような汎用的なタグだけでなく、その要素が持つ役割を明確に示すための新しいタグが導入されました。
セマンティックマークアップには、主に2つのメリットがあります。

SEO効果の向上

検索エンジンのクローラーは、ウェブサイトを巡回してコンテンツを解析しています。headerやmain、articleといったタグを使うことで、どの部分がページの主要なコンテンツなのかを正確に理解できるようになり、検索順位の向上に繋がる可能性があります。

アクセシビリティの向上

スクリーンリーダー（読み上げツール）は、セマンティックなタグを頼りにページの構造を把握します。例えば、<nav>タグがあれば「ここはナビゲーションメニューだ」と認識し、ユーザーがスムーズにサイトを操作できるようになります。

セマンティックタグの具体的な使い方

ここでは、よく使われるセマンティックタグをいくつかご紹介します。

タグ名役割
headerページのヘッダー部分（ロゴ、ナビゲーションなど）
navナビゲーション・メニュー
mainページの主要なコンテンツ
article独立した記事やブログ投稿
section関連性のあるコンテンツのまとまり
asideメインコンテンツとは直接関係ない補足情報（サイドバーなど）
footerページのフッター部分

実践！非セマンティックなコードを改善しよう

ここからは、実際に非セマンティックなコードと、セマンティックに改善したコードを比較してみましょう。

非セマンティックなHTMLの例

<div id="header">
	<span class="heading">サイトのタイトル<span>
	<div class="nav"></div>
</div>
<div class="main-content">
	<div class="article-section">
		<span class="title">記事タイトル</span>
		<div class="article-body"> </div>
	</div>
</div>
<div id="footer"> </div>

このコードでは、すべての要素が<div>や<span>で構成されています。クラス名やIDで意味を示していますが、検索エンジンやブラウザは単なるブロック要素としてしか認識できません。

セマンティックに改善したHTMLの例

<header>
	<h1>サイトのタイトル</h1>
	<nav> </nav>
</header>
<main>
	<article>
		<h2>記事タイトル</h2>
	</article>
</main>
<footer> </footer>

このように、適切なセマンティックタグに置き換えるだけで、コードの見た目はすっきりし、意味が明確になります。

まとめ

セマンティックマークアップは、より高品質なウェブサイトを制作するための基本です。最初は少し難しく感じるかもしれませんが、意識してコーディングすることで、SEOに強く、アクセシブルなサイトを効率的に作れるようになります。
もし、ご自身のウェブサイトやこれから制作するサイトでセマンティックマークアップの導入を検討している場合は、ぜひ弊社までお気軽にご相談ください。

関連記事