目次
はじめに
Webページは、ただの文字や画像を並べただけのものではありません。
見えない部分にもしっかりとした「骨組み＝構造」があり、それによって情報が整理され、誰が見ても理解しやすい形で表示されています。
その設計図を描き出すのがHTMLの役割です。
構造を意識したページは、検索エンジンに強く、アクセシビリティにも優れ、デザインの自由度も大きく広がります。
つまり、基礎を知ることであなたのWeb制作の世界はぐんと豊かに、そして面白くなるのです。
特に重要なのが「セクション要素」と「ページ全体の基本構造」。
これを理解できれば、HTMLのコードはぐちゃぐちゃの羅列から「整理された美しい文章」へと変わります。
今回は初心者の方でも迷わず進めるように、ページの基本構造と代表的なセクション要素を、実例を交えながら丁寧に解説していきます。
独学の方は特にですが、学びながら「自分でもこんなページが作れる！」という感覚を楽しんでください。
HTMLの基本構造とは？
以前にも軽く説明話したことがありますが、HTML文書は大きく次のような枠組みでできています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>本文の内容</p>
</body>
</html>
各部分の役割
<!DOCTYPE html>
→ HTML5であることを宣言するおまじない。<html>
→ HTML文書のルート要素。すべての要素をここに包みます。<head>
→ ページの設定や検索エンジン向けの情報を記述。タイトルや文字コードなど。<body>
→ 実際にブラウザに表示される部分。ここにセクション要素やコンテンツを書いていきます。
セクション要素の基本
HTMLにはページを論理的に分けるための「セクション要素」があります。
これを正しく使うと、ページが読みやすくなるだけでなくSEO（検索エンジン最適化）にも効果的です。
セクション要素＋関連要素一覧（完全版）
| 要素 | 役割 | 使用例 |
|---|---|---|
<header> | ページや記事の冒頭部分。ロゴやナビゲーションを含む。 | サイトのロゴ、メニュー |
<nav> | ナビゲーションリンクのまとまり。 | グローバルメニュー、パンくずリスト |
<main> | ページで最も重要なメインコンテンツ。1ページに1つだけ。 | 記事本文、商品紹介 |
<section> | テーマごとのまとまりを示す。見出しと一緒に使うのが基本。 | 会社情報、サービス紹介 |
<article> | 独立して成り立つコンテンツの塊。 | ブログ記事、レビュー記事 |
<aside> | サブ情報や補足的な内容。 | サイドバー、広告枠 |
<footer> | ページや記事の末尾。著作権表示や補足リンクなど。 | コピーライト、フッターメニュー |
<h1>〜<h6> | 見出し。階層構造を持ち、ページやセクションの主題を示す。 | ページタイトル（h1）、章タイトル（h2）、小見出し（h3〜） |
<hgroup> | 複数の見出しをまとめて一つのまとまりとして扱う。 | メインタイトル＋サブタイトルの組み合わせ |
<address> | 連絡先や著者情報を示す。物理的住所だけでなく、メールやSNSリンクも可。 | 会社住所、メールアドレス、著者プロフィール |
<div> | 汎用的なブロック要素。特定の意味は持たないが、スタイルやスクリプト適用に使う。 | レイアウトの区切り |
<span> | 汎用的なインライン要素。特定の意味はなく、部分的にスタイルやスクリプトを当てたいときに使う。 | 文字装飾、部分的なハイライト |
各要素の簡単な説明
改めてわかりやすいようにまとめてみました。
わかりにくかったら教えてください。
header
ページや記事の「顔」となる部分。
サイトロゴやメニュー、キャッチコピーなどを入れるのが一般的です。
訪問者が最初に目にする重要な位置づけになります。
nav
サイト内を移動するためのリンク集をまとめます。
グローバルメニューやサイドメニューなど、訪問者が迷わず目的のページにたどり着けるように導く役割を持ちます。
main
ページの中心的なコンテンツを入れる場所。
1ページに必ず1つだけ使うのがルールです。
記事本文や商品情報など、ユーザーにとって最も大切な部分を配置します。
section
ページ内をテーマごとに区切る要素。
見出し（h2など）と組み合わせると効果的です。
会社概要・サービス紹介・利用者の声など、まとまりのある情報を分けて整理できます。
article
それ単体で独立したコンテンツを表します。
ブログ記事、レビュー記事、ニュース記事など、他のページに埋め込んでも意味が通じる情報を入れるのに適しています。
aside
サブ的な情報を載せる場所です。
サイドバー、広告、プロフィール紹介など、記事本文を補う役割を持ちます。
読者に「ついでに見てほしい情報」を入れるのに便利です。
footer
ページや記事の一番下に置く要素。
コピーライト、サイトマップへのリンク、問い合わせ先などがよく使われます。
全体を締めくくる「まとめ部分」として機能します。
h1〜h6
ページやセクションの見出しを示します。
h1が一番大きなタイトル（1ページに１つ）で、以下h2〜h6と階層が深まります。
文章を論理的に整理し、SEOにも効果的です。
hgroup
複数の見出しをグループ化して一つのまとまりにするための要素。
メインタイトルとサブタイトルをセットで表現したいときに便利です。
address
単なる住所ではなく「連絡先全般」を意味します。
著者情報、会社の住所、メールやSNSのリンクなども含められます。
div
意味を持たない汎用的なブロック要素。
CSSやJavaScriptで見た目や動きをつけるために多用されます。
レイアウトの基礎になる要素です。
span
小さな範囲を装飾・操作したいときに使う汎用インライン要素。
文字の一部分を色付けしたり、スクリプトで処理したい部分を囲ったりするのに便利です。
ページ構造のサンプル
実際にセクション要素を組み合わせると、以下のようなシンプルなWebページになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<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>
<section>
<h2>サービス紹介</h2>
<p>当社のサービス内容をご紹介します。</p>
</section>
</main>
<aside>
<h2>プロフィール</h2>
<p>運営者の紹介や関連情報をここに載せます。</p>
</aside>
<footer>
<p>© 2025 Sample Site</p>
</footer>
</body>
</html>
まとめ
HTMLの「セクションと基本構造」を理解すると、コードがぐっと整理されて、見た目にも中身にも優しいページが作れます。
- 基本構造は
<!DOCTYPE> → html → head → body - セクション要素で論理的にページを分ける
- SEOやアクセシビリティの観点でも大切
これを意識するだけで、あなたのHTMLは「見やすい＆伝わる」ものになります。
次のステップとして、CSSを組み合わせてレイアウトを整えていくと、さらに理解が深まりますよ！
