ページの意味を、
先に決める。

01★☆☆学習レベル：基礎

HTML は「意味」を書くもの

Web ページは主に HTML・CSS・JavaScript を組み合わせて作ります。それぞれの役割を意識して分けると、あとから直しやすくなります。

02★☆☆学習レベル：基礎

最小の HTML 文書

メモ帳でもエディタでも構いません。次の内容を index.html という名前で保存し、ダブルクリックすればブラウザで開けます。これが出発点です。

<h1>はじめてのページ</h1>
<p>これは段落です。HTML はこうやって書きます。</p>

ただし、実際のファイルには外側の決まり文句が必要です。全体はこうなります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>はじめてのページ</title>
</head>
<body>
  <h1>はじめてのページ</h1>
  <p>これは段落です。HTML はこうやって書きます。</p>
</body>
</html>

<!DOCTYPE html>

「これは今の HTML です」という宣言。1 行目に必ず書きます。これが無いと、ブラウザが古い互換モードで表示してしまいます。

<html lang="ja">

文書全体の入れ物。lang でページの言語を伝えます。読み上げの発音や自動翻訳の判断に使われるので、必ず書きます。

<head>

画面には出ない設定置き場。文字コード、タイトル、CSS の読み込みなどを書きます。

<body>

画面に表示される中身。以降に書く見出しや段落は、すべてこの中に入ります。

<html> <head> <body> lang 属性

03★☆☆学習レベル：基礎

head に書くもの

<head> は画面に出ませんが、ページの品質はここでかなり決まります。まずは次の 5 つを押さえておきましょう。

<head>
  <!-- 1. 文字コード。必ず head の先頭に置く -->
  <meta charset="utf-8">

  <!-- 2. スマホで正しい幅にする。これが無いと縮小表示になる -->
  <meta name="viewport" content="width=device-width">

  <!-- 3. タブと検索結果に出る題名。ページごとに変える -->
  <title>会社概要 | ○○デザイン事務所</title>

  <!-- 4. 検索結果に出る説明文。120 文字くらいまで -->
  <meta name="description" content="○○デザイン事務所の所在地・沿革・アクセスのご案内です。">

  <!-- 5. CSS の読み込み -->
  <link rel="stylesheet" href="assets/stylesheets/style.css">

  <!-- JavaScript は defer を付けて head で読み込むのが今の定番 -->
  <script src="assets/javascripts/main.js" defer></script>
</head>

花屋サイトの head じゃんけんの manifest の読み込み <meta> <title> <link> <script>

検索結果と SNS での見え方を決める — description と OGP

<head> には、ページの外でどう見えるかを決める情報も書きます。検索結果に出る説明文（description）と、SNS やチャットで URL を共有したときに出るカード（OGP）です。

<!-- 検索結果に出る説明文。ページごとに、内容に合わせて書く -->
<meta name="description" content="○○デザイン事務所の所在地・沿革・アクセスのご案内です。">

<!-- SNS やチャットで URL を共有したときのカード（OGP） -->
<meta property="og:title" content="会社概要 | ○○デザイン事務所">
<meta property="og:description" content="○○デザイン事務所の所在地・沿革・アクセスのご案内です。">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/about.html">
<!-- 画像は https:// から始まる URL で書く。1200 × 630px が目安 -->
<meta property="og:image" content="https://example.com/assets/images/ogp.png">

<!-- X（旧 Twitter）で、大きな画像のカードにする -->
<meta name="twitter:card" content="summary_large_image">

description — 検索結果の説明文

• 検索結果で、ページの題名の下に表示される説明文です。ページを開く前の人が「自分の探しているページか」を判断する手がかりになります。
• ページごとに、そのページの内容を具体的に書きます。全ページに同じ文を入れると、どのページか区別できません。
• 表示される長さは、検索エンジンや画面の幅で変わります。大事なことは前半に書きます。この章の最初の例のコメントにある「120 文字くらいまで」は、日本語での目安です。
• 検索エンジンは、description をそのまま使うとは限りません。検索された言葉に合わせて、本文の一部を説明文として表示することもあります。

OGP — 共有されたときのカード

OGP（Open Graph Protocol）は、URL が共有されたときに、題名・説明・画像をカードの形で見せるための決まりです。Facebook が始めた仕組みで、今は多くの SNS やチャットのアプリが読み取ります。書き方は <meta property="og:…"> で、name ではなく property を使う点に気をつけます。

花屋サイトの description と OGP <meta name> head の中身（メタデータ）

04★☆☆学習レベル：基礎

タグの書き方

HTML は要素を積み重ねて書きます。要素は「開始タグ・中身・終了タグ」の 3 つでできています。

<p class="lead">これが中身です</p>
 ↑     ↑                    ↑
開始タグ 属性              終了タグ

<!-- 中身を持たない「空要素」は終了タグを書かない -->
<img src="cat.jpg" alt="窓辺で眠る猫">
<br>
<hr>

<!-- 入れ子は、開いた順と逆の順で閉じる -->
<p>これは <strong>とても <em>大事</em></strong> です。</p>

<!-- コメント。メモを残せる（画面には出ないが、閲覧者からは読める） -->

• 属性は開始タグの中に 名前="値" の形で書きます。値は必ず引用符で囲みます。
• 入れ子の順序を守ります。<p><strong>…</p></strong> は間違いです。
• インデント（字下げ）は半角スペース 2 個が一般的。ブラウザは気にしませんが、人が読めなくなります。
• HTML では、連続した半角スペースや改行はまとめて 1 個の空白として表示されます。余白は CSS で作ります。

グローバル属性 class id

JavaScript とつなぐ data-* 属性

操作のあるページでは、見た目のための class、ラベルやページ内リンクに使う id、JavaScript が探すための data-* を使い分けると変更に強くなります。id は不要という意味ではありません。

<label for="display-mode">表示形式</label>
<select id="display-mode" class="select-box" data-ui="display-mode">
  <option value="list">一覧</option>
</select>
<button type="button" class="button" data-action="save">保存</button>
<div data-ui="status-message" aria-live="polite"></div>

data-ui は更新する表示部品、data-action は操作の目印です。動的に変わる状態メッセージは aria-live="polite" で読み上げにも伝えられます。詳しい探し方は JavaScript の DOM 操作で扱います。

じゃんけんの data-* の使い方 data-* aria-live

05★☆☆学習レベル：基礎

ページの骨組み

<body> の中は、いきなり本文を書き始めるのではなく、 意味を持った箱で区切ります。これがセマンティック（意味的）なマークアップです。

<header>
  <h1>山田製作所</h1>
  <nav>
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/about">会社概要</a></li>
      <li><a href="/contact">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>新しい工場が完成しました</h2>
    <p>2026 年 4 月、第 2 工場の稼働を開始しました。</p>
  </article>

  <section>
    <h2>採用情報</h2>
    <p>現在、製造スタッフを募集しています。</p>
  </section>
</main>

<aside>
  <h2>関連リンク</h2>
  <p>本文の補足や広告など、本筋から少し外れる内容。</p>
</aside>

<footer>
  <p>© 2026 山田製作所</p>
</footer>

<header>

そのページ（またはその記事）の導入部。ロゴ・サイト名・ナビゲーションなど。

<nav>

主要なリンクのまとまり。ページ内のすべてのリンクを囲む必要はありません。

<main>

そのページの主役。1 ページに 1 つだけ。「本文へスキップ」の飛び先にもなります。

<article>

それだけ切り出しても意味が通るまとまり。記事・投稿・商品カードなど。

<section>

意味のある区切り。見出しとセットで使うのが原則です。

<aside>

本筋から外れる補足。サイドバー、関連記事、広告など。

<footer>

締めくくり。著作権表示、サイトマップ、連絡先など。

<div> / <span>

意味を持たない箱。他に当てはまるタグが無いときだけ使います。div がブロック、span が文中の一部分。

花屋サイトの骨組み <header> <nav> <main> <section> <article> <aside> <footer>

06★☆☆学習レベル：基礎

見出しと文章

見出しは <h1> から <h6> まであり、 本の目次と同じ階層を表します。大きく見せたいから <h1>、ではありません。大きさは CSS の仕事です。

<h1>料理の基本</h1>
<p>毎日の食事づくりを、少し楽にするための覚え書きです。</p>

<h2>だしをとる</h2>
<p>だしは <strong>味の土台</strong> です。ここを丁寧にやると、
  調味料は <em>ぐっと少なく</em> て済みます。</p>

<h3>昆布だし</h3>
<p>水 1L に対して昆布 10g。<mark>沸騰させない</mark>のがコツです。</p>

<blockquote>
  <p>火加減は、鍋の底に小さな泡が並ぶくらい。</p>
</blockquote>

<p>公開日：<time datetime="2026-04-01">2026 年 4 月 1 日</time></p>

• <h1> はそのページの題名。1 ページに 1 つが基本です。
• 階層を飛ばさない。h2 の次にいきなり h4 は避けます。
• <strong> は「重要」、<em> は「強調」。太字・斜体にしたいだけなら CSS で。
• 改行したいだけで <br> を並べない。段落が変わるなら <p> を分けます。

<h1>〜<h6> <p> <strong> <em> <blockquote>

07★☆☆学習レベル：基礎

リストと表

並んでいるものはリストにします。順番に意味があるなら <ol>、無いなら <ul>。表は「行と列に意味があるデータ」にだけ使い、レイアウト目的では使いません。

<h2>買うもの（順不同）</h2>
<ul>
  <li>昆布</li>
  <li>かつお節</li>
  <li>醤油</li>
</ul>

<h2>作る手順（順番が大事）</h2>
<ol>
  <li>昆布を水に 30 分つける</li>
  <li>弱火にかける</li>
  <li>沸騰する直前に取り出す</li>
</ol>

<h2>用語</h2>
<dl>
  <dt>だし</dt>
  <dd>素材のうまみを水に移したもの。</dd>
  <dt>下ごしらえ</dt>
  <dd>調理の前に行う準備。</dd>
</dl>

<h2>営業時間</h2>
<table>
  <caption>店舗の営業時間</caption>
  <thead>
    <tr><th scope="col">曜日</th><th scope="col">開店</th><th scope="col">閉店</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">平日</th><td>9:00</td><td>18:00</td></tr>
    <tr><th scope="row">土曜</th><td>10:00</td><td>16:00</td></tr>
  </tbody>
</table>

料金表と注文の流れ <ul> <ol> <dl> <table> <th>

08★☆☆学習レベル：基礎

リンクと画像

リンクは Web の心臓部です。<a> は移動するもの、 <button> はその場で何かを起こすもの。ここを取り違えないでください。

<!-- 同じサイトの中へ -->
<a href="about.html">会社概要</a>

<!-- ページ内の場所へ（id を目印にする） -->
<a href="#contact">お問い合わせへ</a>

<!-- 外部サイトを別タブで開くときは rel をセットで -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部サイト</a>

<!-- 電話とメール -->
<a href="tel:0312345678">03-1234-5678</a>
<a href="mailto:info@example.com">メールを送る</a>

<!-- 画像。alt・width・height は必ず書く -->
<img src="assets/images/factory.jpg"
     alt="稼働を始めた第 2 工場の外観"
     width="1200" height="800" loading="lazy">

href="about.html"

同じサイトの別ページへ。../ で 1 つ上の階層、先頭の / でサイトのルートからの指定になります。

href="#contact"

ページ内リンク。同じページの id="contact" を付けた要素まで移動します。href="#" だけならページ先頭へ。

href="about.html#access"

別ページの特定の場所へ。ページ移動と位置指定を同時にできます。

href="tel:0312345678"

電話をかける。スマホでタップすると発信画面が開きます。番号は数字だけで書くのが確実です。国番号を付けるなら tel:+81312345678。

href="mailto:info@example.com"

メールを書く。メールソフトが開きます。?subject=件名&body=本文 を付ければ、あらかじめ入れておけます。

href="https://…"

外部サイトへ。別タブで開くなら target="_blank" rel="noopener noreferrer" をセットで。

<a> <img> <figure>

ページ内リンクを試す

飛び先には id を付けておくだけです。 id はページの中で重複させないこと。同じ名前が 2 つあると、最初の 1 つにしか飛べません。

<h2 id="toc">目次</h2>
<ul>
  <li><a href="#access">アクセス</a></li>
  <li><a href="#contact">お問い合わせ</a></li>
</ul>

<p>下のリンクを押すと、同じページの中を移動します。</p>
<p>（間を空けるための文章です。ここは読み飛ばしてください。）</p>
<p>（間を空けるための文章です。ここは読み飛ばしてください。）</p>
<p>（間を空けるための文章です。ここは読み飛ばしてください。）</p>

<h2 id="access">アクセス</h2>
<p>JR 大阪駅から徒歩 8 分。駐車場はございません。</p>
<p>（間を空けるための文章です。ここは読み飛ばしてください。）</p>
<p>（間を空けるための文章です。ここは読み飛ばしてください。）</p>

<h2 id="contact">お問い合わせ</h2>
<p>電話：<a href="tel:0312345678">03-1234-5678</a></p>
<p>メール：<a href="mailto:info@example.com?subject=お問い合わせ">info@example.com</a></p>
<p><a href="#toc">▲ 目次へ戻る</a></p>

/* なめらかにスクロールする */
html { scroll-behavior: smooth; }

/* 飛び先の上に、固定ヘッダーの高さぶんの余白を取る */
section { scroll-margin-block-start: 5rem; }

/* 「動きを減らす」設定の人には、すぐに移動する */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

固定ヘッダーとページ内リンク scroll-behavior scroll-margin-block-start

• リンク文字は行き先が分かる言葉に。「こちら」「詳しくはこちら」だけでは、リンク一覧を読み上げたときに何も伝わりません。
• alt は必ず書く。写真の内容を短く説明します。飾りの画像なら alt="" と空にして「読み上げなくてよい」と伝えます。
• width と height を書く。読み込み前に場所を確保でき、表示中にレイアウトがずれるのを防げます。
• 最初の画面より下の画像は loading="lazy"。スクロールするまで読み込まないので、表示が速くなります。

画像の形式を選ぶ

同じ写真でも、形式を選び間違えるとファイルが何倍にも膨らみます。使い分けを決めるのは 写真か図形か、そして 透過が要るかの 2 点です。

<!-- 写真は WebP。ふだんはこれだけで足ります -->
<img src="assets/images/factory.webp" alt="稼働を始めた第 2 工場の外観"
     width="1200" height="800" loading="lazy">

<!-- 古い環境にも届けたいときは picture で切り替える。
     上から順に試して、表示できた最初のひとつが使われる -->
<picture>
  <source srcset="assets/images/factory.webp" type="image/webp">
  <img src="assets/images/factory.jpg" alt="稼働を始めた第 2 工場の外観"
       width="1200" height="800" loading="lazy">
</picture>

<!-- ロゴやアイコンは SVG。拡大してもぼやけない -->
<img src="assets/images/logo.svg" alt="カフェ ベベ" width="160" height="40">

• 迷ったら WebP。写真も図も扱えて、JPEG や PNG より軽くなります。
• ロゴとアイコンは SVG。画面の解像度に左右されず、色や大きさをあとから変えられます。
• 書き出す大きさは、表示幅の 2 倍まで。幅 600px で見せる写真に 4000px の元画像を置いても、重くなるだけで見た目は変わりません。

写真に説明を添えるときは <figure> を使います。

<figure>
  <svg viewBox="0 0 200 90" width="200" height="90" role="img"
       aria-label="青い四角とオレンジの円">
    <rect x="10" y="15" width="80" height="60" fill="#2f80b8"/>
    <circle cx="150" cy="45" r="30" fill="#ff6a3d"/>
  </svg>
  <figcaption>図 1：図形は SVG で直接書くこともできます</figcaption>
</figure>

画像を操作で切り替える方法や、音声・動画を再生する例は JavaScript 実践編のメディアへ。YouTube・Vimeo や Google マップをページに表示する方法は外部コンテンツの埋め込みで扱います。

<picture> 画像ファイルの種類

09★☆☆学習レベル：基礎

フォーム

入力欄には必ずラベルを付けます。 <label for="…"> と <input id="…"> を同じ名前で結ぶと、ラベルをクリックしただけで入力欄が選ばれ、読み上げも正しく働きます。

<form>
  <p>
    <label for="name">お名前（必須）</label><br>
    <input type="text" id="name" name="name" required autocomplete="name">
  </p>

  <p>
    <label for="mail">メールアドレス</label><br>
    <input type="email" id="mail" name="mail" placeholder="you@example.com"
           autocomplete="email">
  </p>

  <fieldset>
    <legend>ご希望の連絡方法</legend>
    <label><input type="radio" name="how" value="mail" checked> メール</label>
    <label><input type="radio" name="how" value="tel"> 電話</label>
  </fieldset>

  <p>
    <label for="body">お問い合わせ内容</label><br>
    <textarea id="body" name="body" rows="3"></textarea>
  </p>

  <p>
    <button type="submit">送信する</button>
    <button type="button">下書き保存</button>
  </p>
</form>

• type を正しく選ぶと、スマホで最適なキーボードが出ます（email / tel / number / date）。
• placeholder はラベルの代わりになりません。入力し始めると消えてしまうためです。
• autocomplete を書くと、ブラウザが保存済みの住所や氏名を提案してくれます。
• フォームの中の <button> は既定で送信ボタンになります。送信させたくないなら type="button" を明示します。

料金シミュレーターの入力部品 花屋サイトのお問い合わせ <form> <label> <input> <textarea> <button> <fieldset>

入力条件を HTML で指定する

文字数には minlength と maxlength、数値の範囲には type="number" と min・max・step を使います。required は空欄を防ぎますが、任意項目の minlength は空欄を必須にはしません。

<form class="contact-form" action="/contact" method="post" data-ui="contact-form">
  <label for="contact-name">お名前（必須）</label>
  <input id="contact-name" name="name" type="text" required
         minlength="2" maxlength="80" autocomplete="name">

  <label for="contact-email">メールアドレス（必須）</label>
  <input id="contact-email" name="email" type="email" required
         autocomplete="email">

  <label for="contact-tel">電話番号（任意・数字 10〜11 桁）</label>
  <input id="contact-tel" name="tel" type="tel" inputmode="tel"
         pattern="[0-9]{10,11}" autocomplete="tel"
         aria-describedby="tel-hint">
  <small id="tel-hint">ハイフンなしで入力してください。</small>

  <label for="contact-count">相談人数（1〜10 人）</label>
  <input id="contact-count" name="count" type="number"
         min="1" max="10" step="1">

  <label for="contact-message">お問い合わせ内容（必須）</label>
  <textarea id="contact-message" name="message" required
            minlength="10" maxlength="2000"></textarea>

  <button type="submit">送信する</button>
</form>

type="email" は一般的なメール形式をブラウザが確認します。一般的なメールアドレスを独自の正規表現で網羅する必要はありません。特定ドメインだけを受け付けるなど、追加の業務条件がある場合は pattern=".+@example[.]com" のように指定できます。type="tel" は形式を自動判定しないため、例では pattern で数字 10〜11 桁に限定しました。pattern は値全体に一致する必要があり、許す形式を説明文にも書きます。

action="/contact" は送信先の例です。実際にお問い合わせを受け取るには、送信先のサーバーやフォームサービスを用意します。ブラウザ側の入力確認だけでは不正な送信を防げないため、送信先でも入力を検証します。見た目は CSS のフォーム状態、追加の条件は JS 実践編で扱います。

required minlength pattern autocomplete

10★☆☆学習レベル：基礎

意味に合ったタグを選ぶ

HTML には「これ専用」のタグがたくさんあります。自分で JavaScript を書く前に、同じことをするタグが無いかを疑ってください。

<!-- 開閉する箱。JavaScript は要りません -->
<details>
  <summary>配送について</summary>
  <p>ご注文から 2〜3 営業日で発送します。</p>
</details>

<details>
  <summary>返品について</summary>
  <p>到着後 8 日以内にご連絡ください。</p>
</details>

<!-- 進み具合 -->
<p>アップロード：<progress value="70" max="100">70%</progress></p>

<!-- 略語・引用・コード -->
<p><abbr title="HyperText Markup Language">HTML</abbr> の
  <code>&lt;p&gt;</code> は paragraph（段落）の略です。</p>

<!-- 出典付きの引用 -->
<figure>
  <blockquote cite="https://example.com/">
    <p>速いサイトとは、待たされないサイトのことだ。</p>
  </blockquote>
  <figcaption>— 誰かの言葉（※ これはサンプルの引用です）</figcaption>
</figure>

花屋サイトのよくある質問 じゃんけんの確認ダイアログ <details> <dialog> <progress> <time> <video> <audio>

11★☆☆学習レベル：基礎

誰でも使えるようにする

アクセシビリティは特別な作業ではありません。 正しいタグを使うだけで、ほとんど達成できます。追加で意識してほしいのは次の 7 つです。

1. lang を書く

   <html lang="ja">。読み上げの発音が変わります。

2. 見出しの階層を守る

   読み上げソフトは見出しを拾って目次を作ります。飛ばすと迷子になります。

3. 画像に alt を書く

   見えない人にとっては alt が画像そのものです。飾りなら alt=""。

4. 入力欄に label を付ける

   ラベルの無い入力欄は「編集テキスト」としか読まれません。

5. リンクとボタンを使い分ける

   移動するなら <a>、動作するなら <button>。<div onclick> はキーボードで押せません。

6. キーボードだけで操作できるか試す

   Tab キーで進み、Enter や Space で押せるか。マウスを置いて確認します。

7. 色だけで情報を伝えない

   「赤字が必須」ではなく、文字でも「（必須）」と書きます。

本文へスキップと aria-hidden じゃんけんの aria-label と aria-live アクセシビリティ ARIA

12★☆☆学習レベル：基礎

やりがちな間違い

13

タグ早見表

最初はこれだけ知っていれば、たいていのページは組めます。

早見表のページ HTML 要素リファレンス

14

次は CSS へ

ここまでで「何が書いてあるか」は表現できるようになりました。次は、それをどう見せるかです。意味のあるタグで書いておいたおかげで、CSS 側は狙った場所を簡単に指定できます。