セマンティックHTML（意味論的HTML）とは、Webページの構造やコンテンツを意味的に正しく表現するために使用されるHTMLのマークアップ方法です。
参考 HTMLとは？
わかりやすく言うと、レイアウトや見た目を重視してタグを使うのではなく、意味に注目してタグを利用しよう！というのがセマンティックHTMLの考え方です。
このページではセマンティックHTMLって何？どんなときに利点があるの？普通のHTMLとは何が違う？という疑問をお持ちの方に、セマンティックHTMLの基本を１からわかりやすく解説します。
| タグ | 説明 |
|---|---|
<header> | ページやセクションのヘッダーを示す。 |
<nav> | ナビゲーションリンクを含むセクションを示す。 |
<main> | ページの主要コンテンツ領域を示す。 |
<article> | 独立して再利用可能なコンテンツ（ブログ記事、ニュース記事など）を示す。 |
<section> | 関連するコンテンツのグループを示す。 |
<aside> | ページのメインコンテンツに関連するが、直接的には属さない補足情報を示す。 |
<footer> | ページやセクションのフッターを示す。 |
<figure> | 図やイメージ、ビデオ、コードブロックなどの参照コンテンツを示す。 |
<figcaption> | <figure>内のコンテンツに対するキャプションや説明を示す。 |
Webエンジニアを目指す方であれば知らないと恥ずかしい基本知識の１つです。是非最後までご覧ください。
セマンティックHTMLとは
セマンティックHTML（意味論的HTML）とは、Webページの構造やコンテンツを意味的に正しく表現するために使用されるHTMLのマークアップ方法です。
参考 マークアップ言語とは？
セマンティックHTMLは、要素（タグ）を選ぶ際に、その要素が持つ意味を考慮して適切なものを選択することを重視しています。＝つまり、HTMLをレイアウトを整えるためだけに利用するのではなく、その構造の意味を表現するために利用するのがセマンティックHTMLということです。
例えば、表（tableタグ）をページのレイアウトを整える目的として利用する人がいますが、これはセマンティックではない例です。
あくまでも表形式で表すべき文章構造がある場合にtableタグを利用するのがセマンティックな考え方。
<div id="header">
<div id="navigation">
<!-- ナビゲーションリンク -->
</div>
</div>
<div id="content">
<div class="article">
<!-- 記事の内容 -->
</div>
<div class="sidebar">
<!-- サイドバーの内容 -->
</div>
</div>
<div id="footer">
<!-- フッターの内容 -->
</div>
<!-- 非推奨 --> <p>このテキストは<b>重要</b>です。</p> <p>このテキストは<i>強調</i>されています。</p> <!-- 推奨 --> <p>このテキストは<strong>重要</strong>です。</p> <p>このテキストは<em>強調</em>されています。</p>
<!-- 非推奨 -->
<table>
<tr>
<td>
<!-- 左カラムの内容 -->
</td>
<td>
<!-- 右カラムの内容 -->
</td>
</tr>
</table>セマンティックHTMLのメリット
セマンティックHTMLはWebページの構造と意味を明確に表現することで、アクセシビリティ、SEO、メンテナンス性を向上させるという点でメリットがあります。
セマンティックHTMLのタグ
セマンティックHTMLのタグを以下に示します。
| タグ | 説明 |
|---|---|
<header> | ページやセクションのヘッダーを示す。 |
<nav> | ナビゲーションリンクを含むセクションを示す。 |
<main> | ページの主要コンテンツ領域を示す。 |
<article> | 独立して再利用可能なコンテンツ（ブログ記事、ニュース記事など）を示す。 |
<section> | 関連するコンテンツのグループを示す。 |
<aside> | ページのメインコンテンツに関連するが、直接的には属さない補足情報を示す。 |
<footer> | ページやセクションのフッターを示す。 |
<figure> | 図やイメージ、ビデオ、コードブロックなどの参照コンテンツを示す。 |
<figcaption> | <figure>内のコンテンツに対するキャプションや説明を示す。 |
HTML4では、ページの構造を表現するために主に<div>や<span>が使われていましたが、これらは意味を持たないため、構造が不明瞭でアクセシビリティが低いという問題がありました。これを解決するために、HTML5では導入されたのがセマンティックHTML。
したがって、セマンティックHTMLのタグは主にHTML5から導入されたものが多く、それ以前のHTMLバージョンでは利用できないものがあるという点に注意しましょう。
このページではセマンティックHTMLのタグの意味と使い方を簡単にわかりやすく網羅的に解説していきます。
HTML：<header>
HTMLの<header>要素は、Webページの上部に表示されるコンテンツのために使用されます。通常、ページのタイトル、ナビゲーションメニュー、検索フォームなどが含まれます。
<header>要素は、文書全体で1回だけ使用することが推奨されています。これは、ページのコンテンツが複数の<header>要素を持つことができるためです。
以下は、<header>要素の基本的な使用方法の例です。
<!DOCTYPE html>
<html>
<head>
<title>サンプルページ</title>
</head>
<body>
<header>
<h1>サンプルページ</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<p>ここにページのメインコンテンツが表示されます。</p>
</main>
</body>
</html>
この例では、ページの上部に<header>要素が使用され、その中にページのタイトルとナビゲーションメニューが含まれています。また、<main>要素内にはページのメインコンテンツが表示されます。
<header>要素は、ページの上部に表示されるコンテンツを表すための要素です。必要な情報を適切に配置し、ページのユーザビリティを高めることができます。
さらに詳しく学習したい方は以下の記事をご覧ください。
HTML：<nav>
<nav>要素は、ナビゲーションメニューを表すために使用されます。これは、Webページのヘッダー、フッター、またはサイドバーなど、ページ内のどこでも使用できます。
先ほどのサンプルコードのheaderタグにネストされて<nav>タグが利用されていることが分かります。
<!DOCTYPE html>
<html>
<head>
<title>サンプルページ</title>
</head>
<body>
<header>
<h1>サンプルページ</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<p>ここにページのメインコンテンツが表示されます。</p>
</main>
</body>
</html>
HTML：<main>
<main>要素は、Webページのメインコンテンツを表すために使用されます。これには、テキスト、画像、ビデオ、音声など、ページの主要なコンテンツが含まれます。
<!DOCTYPE html>
<html>
<head>
<title>サンプルページ</title>
</head>
<body>
<header>
<h1>サンプルページ</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<h2>メインコンテンツの見出し</h2>
<p>ここにページのメインコンテンツが表示されます。</p>
<img src="example.jpg" alt="サンプル画像">
</main>
<footer>
<p>Copyright (C) 2023</p>
</footer>
</body>
</html>
参考 imgタグ
この例では、<main>要素が使用され、その中にページのメインコンテンツが含まれています。また、<header>要素と<footer>要素も使用されています。
<main>要素は、Webページのメインコンテンツを表すための要素です。必要なコンテンツを適切に配置し、ページの意図を明確にすることができます。
HTML：<article>
<article>要素は、Webページ内の独立したセクションに対して使用されます。これには、ブログ投稿、ニュース記事、フォーラムのスレッドなど、ページ内で独立しているコンテンツが含まれます。
<!DOCTYPE html>
<html>
<head>
<title>サンプルページ</title>
</head>
<body>
<header>
<h1>サンプルページ</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>記事の見出し</h2>
<p>ここに記事の本文が表示されます。</p>
</article>
</main>
<footer>
<p>Copyright (C) 2023</p>
</footer>
</body>
</html>
この例では、<article>要素が使用され、その中に記事のタイトルと本文が含まれています。また、<header>要素と<footer>要素も使用されています。
<article>要素は、Webページ内の独立したセクションを表すための要素です。必要なコンテンツを適切に配置し、ページの意図を明確にすることができます。
HTML：<section>
HTMLの<section>要素は、Webページ内のセクションに対して使用されます。これには、<article>要素と同様に、独立したコンテンツが含まれることがありますが、通常はより一般的なセクションを表します。
<!DOCTYPE html>
<html>
<head>
<title>サンプルページ</title>
</head>
<body>
<header>
<h1>サンプルページ</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>セクションの見出し</h2>
<p>ここにセクションのコンテンツが表示されます。</p>
</section>
</main>
<footer>
<p>© 2023 サンプルページ</p>
</footer>
</body>
</html>
この例では、<section>要素が使用され、その中にセクションのタイトルと本文が含まれています。また、<header>要素と<footer>要素も使用されています。
HTML：<aside>
HTMLの<aside>要素は、Webページのメインコンテンツから独立したコンテンツを表すために使用されます。
例えば、サイドバー、広告、関連記事など。
<!DOCTYPE html>
<html>
<head>
<title>サンプルページ</title>
</head>
<body>
<header>
<h1>サンプルページ</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>記事の見出し</h2>
<p>ここに記事の本文が表示されます。</p>
</article>
</main>
<aside>
<h3>関連記事</h3>
<ul>
<li><a href="#">関連記事1</a></li>
<li><a href="#">関連記事2</a></li>
<li><a href="#">関連記事3</a></li>
</ul>
</aside>
<footer>
<p>© 2023 サンプルページ</p>
</footer>
</body>
</html>
この例では、<aside>要素が使用され、その中に関連記事のタイトルとリンクが含まれています。また、<header>要素と<footer>要素も使用されています。
HTML：<footer>
<footer>要素は、Webページのフッターを表すために使用されます。これには、著作権情報、リンク、連絡先情報などが含まれます。
以下は、<footer>要素の基本的な使用方法の例です。
<!DOCTYPE html>
<html>
<head>
<title>サンプルページ</title>
</head>
<body>
<header>
<h1>サンプルページ</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>記事の見出し</h2>
<p>ここに記事の本文が表示されます。</p>
</article>
</main>
<footer>
<p>© 2023 サンプルページ</p>
</footer>
</body>
</html>
この例では、<footer>要素の中に著作権情報が含まれています。
HTML：<figure>
<figure>要素は、画像、イラスト、写真、図表などのメディア要素に関連する説明文やキャプションをまとめて表すために使用されます。
<figure>要素には<img>要素や<svg>要素を含めることができます。
参考 imgタグ
<!DOCTYPE html>
<html>
<head>
<title>サンプルページ</title>
</head>
<body>
<header>
<h1>サンプルページ</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<figure>
<img src="example.jpg" alt="サンプル画像">
<figcaption>サンプル画像のキャプション</figcaption>
</figure>
</main>
<footer>
<p>© 2023 サンプルページ</p>
</footer>
</body>
</html>
HTML：<figcaption>
<figcaption>要素は、<figure>要素内で使用され、図表や画像などのキャプション（説明文）を表すために使用されます。
<!DOCTYPE html>
<html>
<head>
<title>サンプルページ</title>
</head>
<body>
<header>
<h1>サンプルページ</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<figure>
<img src="example.jpg" alt="サンプル画像">
<figcaption>サンプル画像のキャプション</figcaption>
</figure>
</main>
<footer>
<p>© 2023 サンプルページ</p>
</footer>
</body>
</html>
このページで学習したセマンティックHTMLは以下の通り。重要なポイントはそれぞれがどのような意味を持つのか？という点です。
| タグ | 説明 |
|---|---|
<header> | ページやセクションのヘッダーを示す。 |
<nav> | ナビゲーションリンクを含むセクションを示す。 |
<main> | ページの主要コンテンツ領域を示す。 |
<article> | 独立して再利用可能なコンテンツ（ブログ記事、ニュース記事など）を示す。 |
<section> | 関連するコンテンツのグループを示す。 |
<aside> | ページのメインコンテンツに関連するが、直接的には属さない補足情報を示す。 |
<footer> | ページやセクションのフッターを示す。 |
<figure> | 図やイメージ、ビデオ、コードブロックなどの参照コンテンツを示す。 |
<figcaption> | <figure>内のコンテンツに対するキャプションや説明を示す。 |
Webエンジニア向け→完全無料のHTML/CSS/JS ロードマップ
Webエンジニアを目指す方にとって避けては通れないベースとなる超・重要知識の１つがHTML/CSS/JavaScriptです。
以下のページでは、そもそもHTMLって何？何のために学習するの？という疑問に回答しつつ、HTML/CSS/JavaScriptを学習するためのロードマップ（全５０記事）を整理しています。
Webエンジニアを目指す方に、完全無料でかつ短時間で理解できるようにまとめましたので是非ご覧ください。
