レッスン2：文章をマークアップする——見出し・段落・リスト・リンク・画像

このレッスンで学ぶこと

要素・タグ・属性の関係を理解する
見出し・段落・リスト・リンク・画像の基本タグを使い分けられる
自己紹介ページを実習で作成する
セマンティクス（意味のあるマークアップ）の考え方を知る

レッスン1では、Visual Studio Codeで index.html を作り、ブラウザに最初のページを表示しました。このレッスンでは、HTMLの基本タグを使って、文章を意味のある構造にマークアップしていきます。実習として、自己紹介ページを完成させましょう。

要素・タグ・属性

タグの説明に入る前に、3つの言葉を整理します。HTMLを書くうえで、繰り返し出てくる用語です。

タグは、<h1> や </h1> のような、< と > で囲まれた文字列のことです。<h1> のように開始を示すものを開始タグ、</h1> のようにスラッシュが付いて終了を示すものを終了タグと呼びます。

要素は、開始タグから終了タグまで全体のかたまりのことです。<h1>こんにちは</h1> 全体が「h1要素」です。

属性は、タグの中に書く追加情報です。例えば <a href="https://example.com"> の href="https://example.com" の部分が属性です。属性は「属性名="値"」の形で書きます。

💡 ポイント 「要素」「タグ」「属性」は、これからのレッスンで何度も出てきます。タグ＝印、要素＝印で囲まれた範囲全体、属性＝印に付ける付加情報、と整理しておくと混乱しません。

ステップ1：レッスン1の続きから始める

レッスン1で作った my-website フォルダの index.html を、VSCodeで開いてください。中身は次の状態のはずです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのページ</title>
</head>
<body>
  <h1>こんにちは、Webの世界！</h1>
  <p>これは私の最初のWebページです。</p>
</body>
</html>

この <body> の中身を、自己紹介ページの内容に書き換えていきます。

見出し——h1からh6

HTMLの見出しタグは、<h1> から <h6> までの6段階あります。h1が一番大きく、h6が一番小さい見出しです。Wordなどの「見出し1」「見出し2」と同じ感覚です。

ページに1つだけ「これがメインのテーマ」とわかる大見出しがあり、その下に章にあたる中見出し、節にあたる小見出しが続く——という構造を作ります。

<h1>森田 彩花のページ</h1>
<h2>自己紹介</h2>
<h3>趣味</h3>

⚠️ 注意 見出しタグは「文字を大きく見せたい」ためのタグではありません。文章の構造を表すタグです。装飾目的では使わず、論理的な見出しの階層に合わせて使いましょう。装飾はCSS（レッスン3以降）で行います。

段落——p

段落を表すタグが <p> です。1つのまとまった文のかたまりごとに <p> で囲みます。改行したいだけなら <br> というタグもありますが、段落はあくまで <p> で囲むのが正しい使い方です。

<p>はじめまして。森田 彩花と申します。Web制作のかたわら、初学者向けの講師もしています。</p>
<p>このページでは、わたしの自己紹介や趣味について書いています。</p>

リスト——ul・ol・li

箇条書きを表すには、リストタグを使います。リストには2種類あります。

<ul>（unordered list、順序なしリスト）は、順序が関係ない箇条書きに使います。中点や黒丸で表示されます。

<ol>（ordered list、順序ありリスト）は、順序が意味を持つ箇条書きに使います。1, 2, 3といった番号で表示されます。

どちらの場合も、各項目は <li>（list item）で囲みます。

<h2>趣味</h2>
<ul>
  <li>登山</li>
  <li>映画鑑賞</li>
  <li>パン作り</li>
</ul>

<h2>朝のルーティン</h2>
<ol>
  <li>起きる</li>
  <li>顔を洗う</li>
  <li>コーヒーをいれる</li>
</ol>

📝 補足 リストは「並列の項目を並べたい」「順序を伝えたい」ときに使います。文章を箇条書きで書くと整理されて読みやすくなりますが、なんでも箇条書きにすると読みづらくなります。流れのある文は段落で、独立した項目はリストで、と使い分けましょう。

リンク——a

別のページや外部のサイトに移動するリンクを作るのが <a> タグです。href 属性にリンク先のURLを指定します。a は anchor（錨）の頭文字です。

<p>くわしくは<a href="https://www.mext.go.jp/">文部科学省のサイト</a>を参照してください。</p>

タグで囲んだ文字（上の例では「文部科学省のサイト」）が、ブラウザではクリック可能な青い下線付きの文字として表示されます。

別のタブで開きたい場合は、target="_blank" 属性を追加します。外部のサイトへのリンクには付けるのが慣例です。

<a href="https://www.mext.go.jp/" target="_blank">文部科学省のサイト</a>

💡 ポイント target="_blank" を付けたリンクは、別タブで開きます。外部サイトに飛ばす際は、自サイトのタブを残しておくと利用者に親切です。レッスン7で複数ページを作るときには、自サイト内のリンクは別タブを開かない（属性を付けない）使い分けがわかります。

画像——img

画像を表示するには <img> タグを使います。リンクと違って <img> は終了タグを書きません。「自己終結タグ」と呼ばれる種類のタグです。

src 属性に画像ファイルの場所、alt 属性に画像の説明文を指定します。

<img src="profile.jpg" alt="森田 彩花のプロフィール写真">

alt は「代替テキスト」と呼ばれ、画像が表示できないときや、目の不自由な方が読み上げソフトで読む際に使われる説明文です。装飾目的の画像でなければ、必ず指定しましょう。

実習用の画像を準備する

実習で使う画像を用意しましょう。お気に入りの写真を my-website フォルダに profile.jpg というファイル名で置いてください。手元に画像がない場合は、Windowsなら標準で入っている「ピクチャ」フォルダ内のサンプル画像、Macなら「写真」アプリから書き出したファイルなどでも構いません。一時的な実習なので何でも良いです。

ファイル名は半角英数字にし、.jpg または .png を使うのが標準です。今回はプロフィール写真として扱うので、profile.jpg または profile.png という名前にしておきましょう。

⚠️ 注意 <img src="profile.jpg"> のように相対パスで指定した場合、HTMLファイルから見て同じ場所（同じフォルダ）に画像があれば表示されます。後のレッスンで assets/img/profile.jpg のようにフォルダ整理する方法も学びますが、今は同じフォルダに置いてください。

実習：自己紹介ページを完成させる

ここまで学んだタグを使って、自己紹介ページを作ってみましょう。index.html の中身を、以下のコードに書き換えてください。名前や趣味の内容は自由に変えて構いません。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>森田 彩花のプロフィール</title>
</head>
<body>
  <h1>森田 彩花のページ</h1>

  <img src="profile.jpg" alt="森田 彩花のプロフィール写真">

  <h2>自己紹介</h2>
  <p>はじめまして。森田 彩花と申します。Web制作の現場で7年ほど働いたあと、現在はプログラミングスクールで初学者向けの講師をしています。</p>
  <p>このページでは、わたしの自己紹介と趣味、よく見ているWebサイトを紹介しています。</p>

  <h2>趣味</h2>
  <ul>
    <li>登山（特に低山ハイク）</li>
    <li>映画鑑賞（ジャンル問わず）</li>
    <li>パン作り（休日の朝に焼くのが好きです）</li>
  </ul>

  <h2>よく見るサイト</h2>
  <ul>
    <li><a href="https://developer.mozilla.org/ja/" target="_blank">MDN Web Docs</a></li>
    <li><a href="https://www.w3.org/" target="_blank">W3C</a></li>
  </ul>

  <h2>連絡先</h2>
  <p>お問い合わせは <a href="mailto:example@example.com">こちらのメールアドレス</a> までお願いします。</p>
</body>
</html>

保存（Ctrl + S または Command + S）してから、ブラウザで index.html を再読み込み（F5 または Command + R）してください。

見出しが3階層、段落が2つ、画像が1枚、箇条書きが2つ、リンクが3つ並んだ自己紹介ページが表示されたら成功です。

💡 ポイント mailto: で始まるリンクは、クリックすると標準のメールソフトが開いて、新規メール作成画面が立ち上がります。お問い合わせリンクとしてよく使われます。

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

ここまでで、見出し・段落・リスト・リンク・画像という、HTMLでもっとも使うタグを一通り学びました。これらのタグには、それぞれ「意味」があります。<h1> は「メインの見出しです」、<p> は「これは段落です」、<ul> は「これは順序のないリストです」と、ブラウザや検索エンジン、読み上げソフトに伝えています。

文章の意味に合ったタグを選ぶ考え方を「セマンティクス」と呼びます。日本語では「意味論」と訳されます。例えば、見た目を大きくしたいだけの理由で <h1> を使うのではなく、本当にそれが大見出しのときだけ <h1> を使う、というのがセマンティックなマークアップです。

正しいセマンティクスでマークアップされたページは、検索エンジンに内容を正確に伝えやすく、目の不自由な利用者の読み上げソフトでも構造が伝わります。装飾はCSS、構造はHTMLで分担する——この役割分担を意識すると、後のレッスンでも迷いが減ります。

📝 補足 セマンティックなHTMLには、ほかにも <header> <nav> <main> <article> <section> <footer> といった構造を表すタグがあります。これらはレッスン7で複数ページサイトを作るときに紹介します。

まとめ

このレッスンでは、以下のことを学びました。

HTMLは、要素・タグ・属性という3つの構成要素からなる
見出しはh1〜h6、段落はp、リストはul/ol/li、リンクはa、画像はimgで表現する
リンクは href 属性、画像は src と alt 属性が基本である
セマンティクス（文章の意味に合ったタグ選び）が、検索エンジンやアクセシビリティに役立つ
装飾はCSSで行うため、HTMLでは構造に集中する

次のレッスンでは、CSSを使ってこの自己紹介ページに色とフォントを当てていきます。同じHTMLが、CSSで一気に華やかに変わる体験をしてもらいます。

確認クイズ

このレッスンの理解度をチェックしましょう。