セマンティック要素

導入

<div> ばかりでも動きますが、「ここはヘッダー」と一目でわかる 意味を持った要素 を使うと、構造が読みやすくなります。これを セマンティック（意味的）HTML と呼びます。

説明

代表的なものは次のとおりです。役割は違っても、使い方は <div> と同じ「かたまりを囲む」だけです。

• <header> … ページや記事の上部
• <nav> … ナビゲーション（メニュー）
• <main> … そのページの主内容
• <footer> … ページの下部

<header>
  <h1>私のサイト</h1>
  <nav>メニュー</nav>
</header>
<main>
  <p>本文です。</p>
</main>
<footer>© 2026</footer>

見た目は <div> と変わりませんが、要素名そのものが「ここは何か」を説明してくれます。

やってみよう

上の例を打ち込み、プレビューに表示されることを確かめましょう（見た目上は <div> と同じでも、構造としての意味が明確になります）。

演習

<footer> の中に「連絡先」というテキストを入れてください。