シリーズゼロからWebサイトを作ろう！第2回 / 全10回

HTML

HTMLの基本 ―
Webページの"骨格"を知ろう

WebサイトのすべてはHTMLから始まります。今回は、前回書いたコードの意味を一つずつ読み解きながら、セマンティックタグの考え方を学び、café SOELのページの"骨格"を組み立てていきましょう。

✍

KANON

2026.04.12 読了目安：15分

前回のおさらい

📖 前回のおさらい

VS Codeをインストールし、拡張機能（Live Server等）を導入した
プロジェクトフォルダ cafe-soel を作り、画像素材をダウンロードした
index.html を作成し、ブラウザに「Hello World!」を表示した

前回作った index.html がブラウザに表示できていれば、今回の内容に進む準備は完了です。テキストを「ようこそ、café SOELへ」に変更した方も、元のままの方も、どちらでも大丈夫です。

今回のゴール

🎯 今回のゴール

HTMLの基本構造（DOCTYPE、html、head、body）を理解する
セマンティックHTMLの考え方を身につける
café SOELの全セクションの"骨格"をHTMLで書き上げる

👀 この回の完成イメージ

今回の内容を終えると、サイトはこのような状態になります。先に完成形を確認しておきたい方はこちらをご覧ください。
第2回の完成イメージを見る →

CSSはまだ使わないので、見た目は素朴なテキストの羅列です。でも心配いりません。家を建てるときも、最初は骨組みから。見た目は後から整えていきましょう。

HTMLってそもそも何？

HTMLは HyperText Markup Language の略で、Webページの「構造」を記述するための言語です。

たとえば、私たちが家を建てるときのことを想像してみてください。まず最初にやるのは、柱を立てて壁の位置を決めること。つまり「骨組み」を作ることですよね。HTMLはまさにそれと同じ役割を持っています。

「ここが見出し」「ここが本文」「ここが画像」「ここがリンク」……。そうやってページの構成要素に"意味"を付けていく。それがHTMLの仕事です。

見た目を整えるのはCSSの役割で、これは第4回で学びます。HTMLとCSSは役割がはっきり分かれていて、HTMLが家の骨組みなら、CSSは内装や外壁の色にあたります。

HTMLは「見た目」ではなく「意味」を書く言語。この感覚をつかめたら、もう半分わかったも同然です。

前回のコードを読み解こう

前回の index.html を開いてください。中身はこのようになっていますよね（テキストを書き換えた方は少し違うかもしれませんが、構造は同じです）。

index.html（前回の状態）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>café SOEL</title>
</head>
<body>
  <h1>ようこそ、café SOELへ</h1>
  <p>café SOELのWebサイトを作っていきます。</p>
</body>
</html>

実は、このコードにはHTMLの基本的な形がすでにほぼ揃っています。<!DOCTYPE html>、<html>、<head>、<body>……。前回は「おまじないのようなもの」として書いてもらいましたが、今回はこの一行一行が何をしているのかをきちんと理解していきましょう。

<!DOCTYPE html> — 「これはHTML5です」の宣言

1行目の <!DOCTYPE html> は、ブラウザに「このファイルはHTML5で書かれていますよ」と伝えるための宣言です。前回「おまじないのようなもの」と紹介しましたね。

もう少し詳しく言うと、これがないとブラウザが「互換モード」という古い表示方法で描画してしまうことがあります。レイアウトが崩れる原因になるので、必ず1行目に書いてください。

<html lang="ja"> — ページ全体を囲む最上位の要素

<html> タグは、ページのすべてのHTML要素を囲む「最上位の要素（ルート要素）」です。HTMLファイルの中身は、すべてこの <html> と </html> の中に書きます。前回のコードにもすでにありましたね。

lang="ja" は「このページの言語は日本語です」という意味。検索エンジンや音声読み上げソフト（スクリーンリーダー）が、ページの言語を正しく判別するために使います。英語のサイトなら lang="en" と書きます。

<head> — ページの「裏方情報」

<head> の中には、ブラウザの画面には直接表示されないけれど、ページにとって重要な情報を書きます。具体的には文字コードの指定、ページタイトル、CSSの読み込みなどです。

料理に例えると、お皿に盛られた料理が <body> の中身で、レシピや栄養成分表が <head> の中身。お客さんの目には見えないけれど、なくてはならない情報ですね。

<body> — ページの「本文」

<body> の中に書いたものが、ブラウザの画面に表示されます。テキスト、画像、リンク、ボタン……。ユーザーが目にするすべてのコンテンツはここに入ります。

📌 覚えておこう

HTMLの基本構造は3層です。<html> がすべてを囲み、その中に <head>（裏方情報）と <body>（表示内容）がある。この入れ子構造はどんなWebページでも同じです。

<head>に1行追加しよう

前回のコードの <head> には <meta charset="UTF-8"> と <title> が入っていました。今回、ここに大事な1行を追加します。

<head> の中を、次のように書き換えてください。

index.html — head 部分

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- ← この行を追加 -->
  <title>café SOEL</title>
</head>

追加したのは <meta name="viewport"> の1行だけです。では、<head> の中にある3つの要素を、それぞれ確認していきましょう。

meta charset="UTF-8" — 文字化けを防ぐ

UTF-8は世界中のほぼすべての文字を扱える標準的なエンコーディングです。これを書かないと、日本語が「文字化け」してしまうことがあります。私も昔、この1行を書き忘れて盛大に文字化けさせた経験があります。地味ですが、とても大事な1行です。

meta name="viewport" — スマートフォン対応の土台

これがないと、スマートフォンのブラウザは「PCサイトを縮小して表示する」という動作をしてしまいます。文字が極端に小さくなって、指でピンチして拡大しないと読めない状態です。この1行があることで、画面の幅に合わせてページが表示されるようになります。

この設定は後の回で学ぶ「レスポンシブデザイン」の土台になります。第6回でこの意味がよりはっきりわかるので、今は「スマホ対応の準備」と覚えておいてください。

title — ブラウザタブに表示される名前

<title> タグに書いたテキストは、ブラウザのタブに表示されます。試しにブラウザのタブを見てみてください。「café SOEL」と表示されていますか？

このタイトルは検索エンジンの検索結果にも使われます。つまり、ユーザーが最初に目にする「サイトの名前」。短くてもとても重要な要素です。

ブロック要素とインライン要素

HTMLのタグを学んでいく前に、ひとつ大事な概念を知っておきましょう。HTMLの要素は大きく分けて「ブロック要素」と「インライン要素」の2種類があります。

ブロック要素は、画面の横幅いっぱいを占領する大きな箱のようなものです。たとえば <p>（段落）や <h1>（見出し）がこれにあたります。ブロック要素は必ず前後で改行され、縦に積み上がっていきます。段ボール箱を積み上げるイメージですね。

インライン要素は、文章の中に溶け込む要素です。<a>（リンク）や <strong>（強調）がこれにあたります。文の途中に入っても改行されず、テキストの流れに沿って横に並びます。

ブロック要素とインライン要素の例

<!-- ブロック要素：縦に積み上がる -->
<h1>これは見出しです</h1>
<p>これは段落です。</p>

<!-- インライン要素：文の中に入る -->
<p>詳しくは<a href="#">こちら</a>をご覧ください。</p>

前回書いた <h1> と <p> が上下に並んで表示されていたのは、どちらもブロック要素だからです。今の時点では「ブロック要素は大きな箱、インライン要素は箱の中に入るパーツ」というイメージで十分です。CSSでレイアウトを組む段階になると、この違いがもっと実感できるようになります。

まず覚えたい基本のHTMLタグ

café SOELのサイトを組み立てる前に、よく使うHTMLタグをいくつか紹介します。

見出しタグ：h1〜h6

見出しは <h1> から <h6> まで6段階あります。数字が小さいほど重要度が高く、文字も大きく表示されます。前回のコードでは <h1> を使って「ようこそ、café SOELへ」と書きましたね。

<h1> はページで最も重要な見出しで、1ページにつき1つだけ使うのが基本です。café SOELのサイトなら、メインのキャッチコピーが <h1> にあたります。各セクションのタイトル（「コンセプト」「メニュー」など）は <h2> にします。

ここで大事なのは、見出しタグを「文字を大きくするため」に使わないこと。見出しタグはあくまで「文書の構造」を表すためのもので、文字の大きさはCSSで自由に変えられます。

⚠️ よくあるミス

「文字を大きくしたいから <h1> を使う」はNGです。見出しの階層は、本の目次のように「章 → 節 → 項」の順序で使います。h1の次にいきなりh4が来る、というような飛ばし方もしないようにしましょう。

段落タグ：p

<p> は段落（paragraph）を表します。本文テキストを書くときの基本的なタグです。前回のコードにも <p> がありましたね。ブラウザは <p> ごとに前後にスペースを入れて表示してくれるので、文章が読みやすくなります。

リンクタグ：a

<a> はリンクを作るタグです。href 属性にリンク先のURLを書きます。

リンクの書き方

<a href="https://example.com">外部サイトへのリンク</a>
<a href="#concept">ページ内リンク</a>

href="#concept" のように # をつけると、同じページ内の id="concept" がついた要素にジャンプするリンクになります。café SOELのようなシングルページサイトでは、このページ内リンクをナビゲーションに使います。

リストタグ：ul と li

<ul> は順序のないリスト、<li> はリストの各項目を表します。ナビゲーションのメニュー項目は、意味的には「リンクのリスト」なので <ul> + <li> で書くのが適切です。

リストの書き方

<ul>
  <li>コーヒー</li>
  <li>ラテ</li>
  <li>ケーキ</li>
</ul>

セマンティックHTMLという考え方

ここまで <h1> や <p> を紹介してきましたが、もうひとつ、HTMLを書くうえでとても大切な考え方があります。それが「セマンティック（意味のある）HTML」です。

たとえば、ページのナビゲーション部分。これを <div>（意味を持たない汎用的な箱）で書くこともできます。でもHTMLには <nav> という「ナビゲーション」を意味するタグが用意されているんです。

❌ やりがちなNG例

<div class="navigation">
  <!-- ナビゲーションの中身 -->
</div>

✅ 正しい書き方

<nav>
  <!-- ナビゲーションの中身 -->
</nav>

どちらもブラウザでの見た目は変わりません。でも <nav> を使うことで、検索エンジンは「ここはナビゲーションだ」と理解できますし、スクリーンリーダー（視覚障害のある方が使う音声読み上げソフト）も「ナビゲーションです」とユーザーに伝えることができます。

HTMLには、こうした意味を持つタグがいくつも用意されています。café SOELのサイトで使うものを紹介しますね。

<header> はページや各セクションのヘッダーを表します。サイトの最上部にあるロゴやナビゲーションを囲むのに使います。

<nav> はナビゲーション（リンクの集まり）を表します。メインメニューやフッターメニューに使います。

<main> はページのメインコンテンツを表します。ヘッダーとフッターを除いた、ページの中心となる内容を囲みます。1ページに1つだけ使えます。

<section> はテーマを持ったコンテンツのまとまりを表します。「コンセプト」「メニュー」「ギャラリー」のような、見出しを持つ区切りに使います。

<footer> はページや各セクションのフッターを表します。著作権表記やフッターナビゲーションを囲みます。

正しいタグを選ぶことは、人にもロボットにも「このページの構造」をちゃんと伝えるということ。

💡 KANONのワンポイント

私が独学でHTMLを学び始めたころは、何でも <div> で書いていました。でも現場に入ってから「divばかりのHTMLはソースを読んでも構造がわからない」と気づいたんです。セマンティックなタグを使えば、自分がコードを読み返すときにも「ここはナビ」「ここはメインコンテンツ」とすぐわかる。未来の自分への親切でもあります。

café SOELの骨格をHTMLで書こう

ここからいよいよ、café SOELのWebサイトの骨格を作っていきます。前回書いた <body> の中身を書き換えて、セマンティックHTMLでサイトの構造を組み立てましょう。

完成形のサイトは、大きく分けて次の構成です。

ヘッダー（ロゴ + ナビゲーション）、ヒーローセクション（メインビジュアル + キャッチコピー）、コンセプトセクション、メニューセクション、ギャラリーセクション、アクセス・店舗情報セクション、フッター。

これをセマンティックHTMLで表すと、次のような構造になります。

サイト構造のスケルトン

<header>     <!-- サイトのヘッダー -->
</header>

<main>
  <section>  <!-- ヒーロー -->
  </section>

  <section>  <!-- コンセプト -->
  </section>

  <section>  <!-- メニュー -->
  </section>

  <section>  <!-- ギャラリー -->
  </section>

  <section>  <!-- アクセス -->
  </section>
</main>

<footer>     <!-- サイトのフッター -->
</footer>

<header> → <main>（中に <section> が5つ）→ <footer>。この構造が、café SOELのサイトの骨格です。

では、<body> の中身を書き換えていきましょう。前回の <h1> と <p> は役目を終えたので、ここからは本番のコードに入れ替えます。ステップごとに進めていきますね。

ヘッダーを書こう

ヘッダーとナビゲーション

index.html の <body> の中身（<h1> と <p>）を削除して、以下のコードに書き換えてください。

index.html — body の中身

  <header>
    <a href="#top">café SOEL</a>
    <nav>
      <ul>
        <li><a href="#concept">Concept</a></li>
        <li><a href="#menu">Menu</a></li>
        <li><a href="#gallery">Gallery</a></li>
        <li><a href="#access">Access</a></li>
      </ul>
    </nav>
  </header>

ロゴ部分はまだテキストで「café SOEL」と書いているだけですが、これで十分です。画像ロゴへの置き換えは次回（第3回）で行います。

ナビゲーションのリンク先が #concept や #menu になっていますよね。これはページ内リンクです。後ほど、各セクションに id 属性をつけていくので、そこにジャンプするリンクになります。

💡 KANONのワンポイント

ナビゲーションを <nav> の中の <ul> + <li> で書くのは、Web制作の現場では定番のパターンです。「リンクの一覧」は意味的にリストなので、リストタグで表現するのが理にかなっています。

ヒーローとコンセプトセクションを書こう

ヒーローセクション

ヘッダーの下に <main> を開始し、最初のセクションとしてヒーロー（メインビジュアル）を書きます。

index.html — main の開始 + ヒーロー

  <main>

    <section id="hero">
      <h1>そよぐ光と、ひと息つくひととき。</h1>
      <p>café SOEL — Natural Light &amp; Coffee</p>
    </section>

前回は練習用に「ようこそ、café SOELへ」と書いた <h1> を、本番のキャッチコピーに入れ替えました。ここがページ唯一の <h1> です。

id="hero" をセクションに付けました。id 属性はページ内でユニーク（唯一）でなければいけません。同じ id を2箇所以上につけるとエラーになるので注意してくださいね。

& は、HTMLで「&」を表すための書き方です。HTMLでは & が特殊な意味を持つため、テキストとして表示したい場合はこの「HTMLエンティティ」という書き方を使います。

コンセプトセクション

ヒーローの下に、カフェのコンセプトを説明するセクションを追加します。

index.html — コンセプトセクション

    <section id="concept">
      <h2>コンセプト</h2>
      <p>café SOEL（カフェ ソエル）は、「そよぐ光」をイメージした造語から名づけました。</p>
      <p>大きな窓から差し込む自然光、ナチュラルな木のぬくもり、丁寧に淹れた一杯のコーヒー。忙しい日常からすこしだけ離れて、穏やかな時間を過ごしていただける場所でありたいと思っています。</p>
    </section>

ヒーローの <h1> に対して、コンセプトの見出しは <h2> です。ページの見出し階層がきちんと「h1 → h2」の順番になっていますね。

メニューとギャラリーセクションを書こう

メニューセクション

コンセプトの下に、メニューセクションを追加します。

index.html — メニューセクション

    <section id="menu">
      <h2>メニュー</h2>
      <p>素材を活かしたシンプルなおいしさを、丁寧にお届けします。</p>
    </section>

メニューの個別アイテム（コーヒー、ラテ、ケーキ……）は次回、画像と一緒に追加していきます。今回は見出しと説明文だけで、セクションの「存在」を示す骨格です。

ギャラリーセクション

メニューの下に、店内の様子を紹介するセクションを追加します。

index.html — ギャラリーセクション

    <section id="gallery">
      <h2>ギャラリー</h2>
      <p>店内の様子をご覧ください。</p>
    </section>

アクセスセクションとフッターを書こう

アクセス・店舗情報セクション

ギャラリーの下に、住所や営業時間などの店舗情報を配置します。

index.html — アクセスセクション

    <section id="access">
      <h2>アクセス</h2>
      <p>〒156-0054 東京都世田谷区桜丘町3-12-8</p>
      <p>平日 10:00 – 19:00 / 土日 9:00 – 19:00</p>
      <p>定休日：毎週水曜日</p>
    </section>

  </main>

アクセスセクションで </main> を閉じています。ここまでが <main> の中身、つまりページのメインコンテンツです。

フッター

最後に、ページの一番下にフッターを追加します。

index.html — フッター

  <footer>
    <p>&copy; 2025 café SOEL. All rights reserved.</p>
  </footer>

ここまでの全体を確認しよう

すべてのセクションを書き終えました。保存して、ブラウザで確認してみましょう。

ここまでの index.html の全体は、次のようになっているはずです。

index.html（第2回完成時点）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>café SOEL</title>
</head>
<body>

  <header>
    <a href="#top">café SOEL</a>
    <nav>
      <ul>
        <li><a href="#concept">Concept</a></li>
        <li><a href="#menu">Menu</a></li>
        <li><a href="#gallery">Gallery</a></li>
        <li><a href="#access">Access</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="hero">
      <h1>そよぐ光と、ひと息つくひととき。</h1>
      <p>café SOEL — Natural Light &amp; Coffee</p>
    </section>

    <section id="concept">
      <h2>コンセプト</h2>
      <p>café SOEL（カフェ ソエル）は、「そよぐ光」をイメージした造語から名づけました。</p>
      <p>大きな窓から差し込む自然光、ナチュラルな木のぬくもり、丁寧に淹れた一杯のコーヒー。忙しい日常からすこしだけ離れて、穏やかな時間を過ごしていただける場所でありたいと思っています。</p>
    </section>

    <section id="menu">
      <h2>メニュー</h2>
      <p>素材を活かしたシンプルなおいしさを、丁寧にお届けします。</p>
    </section>

    <section id="gallery">
      <h2>ギャラリー</h2>
      <p>店内の様子をご覧ください。</p>
    </section>

    <section id="access">
      <h2>アクセス</h2>
      <p>〒156-0054 東京都世田谷区桜丘町3-12-8</p>
      <p>平日 10:00 – 19:00 / 土日 9:00 – 19:00</p>
      <p>定休日：毎週水曜日</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 café SOEL. All rights reserved.</p>
  </footer>

</body>
</html>

👀 この回の完成イメージ

ここまでのコードをブラウザで開くと、このような表示になります。
第2回の完成イメージを見る →

あなたのブラウザにも、セクションごとにテキストが並んでいますか？まだ装飾は何もないので、黒い文字が白い背景にズラッと並んでいるだけ。見出しのフォントサイズに差があるくらいですよね。

でもこれでいいんです。これがWebサイトの"骨格"です。

もしうまく表示されない場合は、タグの閉じ忘れがないか確認してみてください。<section> を開いたら必ず </section> で閉じる。この対応関係が崩れると、表示がおかしくなることがあります。

ページ内リンクを試してみよう

せっかくナビゲーションを作ったので、動作を確認してみましょう。ページ上部の「Concept」のリンクをクリックしてみてください。

画面がスクロールして、id="concept" がついたコンセプトセクションの位置にジャンプしましたか？これがページ内リンクの仕組みです。ナビゲーションの href="#concept" と、セクションの id="concept" が対応しているからジャンプできるんです。

「Menu」「Gallery」「Access」のリンクも同じように動くはずです。試してみてくださいね。

⚠️ よくあるミス

ページ内リンクが動かない場合、ナビゲーション側の href="#concept" の # を忘れていないか、セクション側の id="concept" のスペルが一致しているかを確認してください。大文字・小文字も区別されるので、#Concept と id="concept" ではリンクされません。

なぜ、わざわざセマンティックに書くの？

ここまで <header> や <nav>、<main>、<section>、<footer> を使って書いてきました。正直なところ、全部 <div> で書いてもブラウザの表示は同じです。では、なぜわざわざセマンティックなタグを使うのでしょうか。

理由は3つあります。

1つ目は 検索エンジン（SEO） のためです。Googleなどの検索エンジンは、HTMLのタグを手がかりにページの構造を理解します。<nav> を見れば「ここがナビゲーションだ」とわかりますし、<main> を見れば「ここがメインコンテンツだ」とわかります。正しいタグを使うことで、検索エンジンに自分のサイトの構造を正確に伝えられるんです。

2つ目は アクセシビリティ のためです。視覚に障害のある方が使うスクリーンリーダーは、セマンティックなタグを頼りにページを読み上げます。たとえば「ナビゲーションランドマーク」「メインコンテンツ」といった案内を自動で生成してくれるので、ユーザーがページ内を効率よく移動できるようになります。

3つ目は コードの可読性 のためです。半年後に自分のコードを見返したとき、<div class="nav"> より <nav> のほうが一瞬で「ここはナビだ」とわかります。チームで開発するときも、セマンティックなHTMLは「読めるコード」の基本です。

「動けばいい」と「正しく書く」のあいだには、小さいけれど大きな違いがある。

今はまだ「そういうものなんだな」で大丈夫です。SEOの詳しい話は第8回、アクセシビリティは第9回であらためて深掘りします。ただ、最初から正しい構造で書いておくことで、後から修正する手間がなくなります。それが、この講座でセマンティックHTMLを最初に教える理由です。

今回のまとめ

<!DOCTYPE html> は「このファイルはHTML5です」とブラウザに伝えるための宣言で、必ず1行目に書く
HTMLの基本構造は <html>（全体） → <head>（裏方情報） → <body>（表示内容）の3層になっている
<meta charset="UTF-8"> で文字化けを防ぎ、<meta name="viewport"> でスマホ対応の土台を作る
セマンティックHTMLとは、<header> / <nav> / <main> / <section> / <footer> のように「意味を持つタグ」で構造を書くこと
見出しタグ（<h1>〜<h6>）は文書の階層構造を表し、<h1> は1ページに1つだけ使う
ページ内リンクは、ナビゲーションの href="#id名" とセクションの id 属性を対応させて実現する
café SOELのサイトの骨格を、header → main（section×5）→ footer の構造で書き上げた

ここまでできたら、HTMLの基礎はしっかり身についています。次回はこの骨格に画像やテキストのコンテンツを入れて、café SOELのHTMLを完成させます。各セクションが一気に"サイトらしく"なっていくので、楽しみにしていてくださいね。

← 前回この講座で作るもの＆制作環境を整えよう次回 → サイトのコンテンツをHTMLで組み立てよう

HTMLの基本 ―Webページの"骨格"を知ろう

前回のおさらい

今回のゴール

HTMLってそもそも何？

前回のコードを読み解こう

<!DOCTYPE html> — 「これはHTML5です」の宣言

<html lang="ja"> — ページ全体を囲む最上位の要素

<head> — ページの「裏方情報」

<body> — ページの「本文」

<head>に1行追加しよう

meta charset="UTF-8" — 文字化けを防ぐ

meta name="viewport" — スマートフォン対応の土台

title — ブラウザタブに表示される名前

ブロック要素とインライン要素

まず覚えたい基本のHTMLタグ

見出しタグ：h1〜h6

段落タグ：p

リンクタグ：a

リストタグ：ul と li

セマンティックHTMLという考え方

café SOELの骨格をHTMLで書こう

ヘッダーを書こう

ヘッダーとナビゲーション

ヒーローとコンセプトセクションを書こう

ヒーローセクション

コンセプトセクション

メニューとギャラリーセクションを書こう

メニューセクション

ギャラリーセクション

アクセスセクションとフッターを書こう

アクセス・店舗情報セクション

フッター

ここまでの全体を確認しよう

ページ内リンクを試してみよう

なぜ、わざわざセマンティックに書くの？

今回のまとめ

HTMLの基本 ―
Webページの"骨格"を知ろう