🧱

HTMLサンプルコード集

文法解説で学んだ内容を組み合わせた、難易度が段階的に上がる3本の実践的なサンプルです。①セマンティックタグを使ったプロフィールページ、②入力検証付きの問い合わせフォーム、③アクセシビリティに配慮したナビゲーション、の順に見ていきましょう。

① セマンティックタグを使ったプロフィールページ

<div>だけで組み立てるのではなく、header・nav・main・article・section・footerを適切に使い分けることで、文書の意味構造が明確になります。ブラウザはこのHTMLを解析してDOMツリーを構築し、その後CSSと組み合わせてレンダリングします。画像には必ずaltを付け、画面外になりやすい画像はloading="lazy"で読み込みを遅延させています。

SAMPLE PROGRAM

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>太郎の自己紹介</title>
  <meta name="description" content="Webエンジニア太郎の自己紹介ページ">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>太郎の自己紹介ページ</h1>
    <nav aria-label="ページ内メニュー">
      <a href="#profile">プロフィール</a>
      <a href="#works">制作物</a>
    </nav>
  </header>

  <main>
    <article>
      <section id="profile">
        <h2>プロフィール</h2>
        <img src="profile.jpg" alt="太郎のプロフィール写真" loading="lazy" width="120" height="120">
        <ul>
          <li>出身: 東京</li>
          <li>趣味: プログラミング</li>
        </ul>
      </section>

      <section id="works">
        <h2>制作物</h2>
        <table>
          <thead>
            <tr><th>年</th><th>作品名</th></tr>
          </thead>
          <tbody>
            <tr><td>2025</td><td>学習サイト構築</td></tr>
          </tbody>
        </table>
      </section>
    </article>
  </main>

  <footer>
    <p>&copy; 2026 太郎</p>
  </footer>
</body>
</html>

② 入力検証付きの問い合わせフォーム

文法解説で紹介したrequired・pattern・minlengthなどの検証属性を組み合わせた、実務でよくある問い合わせフォームの例です。typeに応じてスマートフォンでは最適なキーボード（数字用・メールアドレス用など）が自動的に切り替わります。ラベルはfor属性で対応する入力欄と紐付け、クリック範囲を広げるとともに、スクリーンリーダーが「何を入力する欄か」を正しく読み上げられるようにしています。

SAMPLE PROGRAM

<form action="/contact" method="post" novalidate>
  <h2>お問い合わせフォーム</h2>

  <div>
    <label for="name">お名前（必須）</label>
    <input type="text" id="name" name="name" required minlength="1" maxlength="50">
  </div>

  <div>
    <label for="email">メールアドレス（必須）</label>
    <input type="email" id="email" name="email" required
           aria-describedby="email-hint">
    <p id="email-hint">例: taro@example.com</p>
  </div>

  <div>
    <label for="tel">電話番号（任意・ハイフンあり）</label>
    <input type="tel" id="tel" name="tel" pattern="\d{2,4}-\d{2,4}-\d{4}">
  </div>

  <fieldset>
    <legend>お問い合わせ種別（必須）</legend>
    <label>
      <input type="radio" name="type" value="question" required> 質問
    </label>
    <label>
      <input type="radio" name="type" value="request"> 要望
    </label>
  </fieldset>

  <div>
    <label for="message">お問い合わせ内容（必須・10〜500文字）</label>
    <textarea id="message" name="message" required
              minlength="10" maxlength="500" rows="5"></textarea>
  </div>

  <label>
    <input type="checkbox" name="agree" required>
    プライバシーポリシーに同意する
  </label>

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

③ アクセシビリティに配慮したナビゲーション

キーボードだけで操作するユーザーや、スクリーンリーダーを使うユーザーにも配慮したナビゲーションの例です。ページ先頭の「スキップリンク」で本文へ直接ジャンプできるようにし、現在のページをaria-current="page"で明示し、開閉するメニューにはaria-expandedで状態を伝えます。:focusで見た目のフォーカスリングをCSS側で消さないことも、キーボード操作のユーザーにとって重要です。

SAMPLE PROGRAM

<body>
  <!-- キーボードユーザー向けのスキップリンク（先頭要素として配置） -->
  <a class="skip-link" href="#main-content">本文へスキップ</a>

  <header>
    <nav aria-label="グローバルナビゲーション">
      <ul>
        <li><a href="/" aria-current="page">ホーム</a></li>
        <li><a href="/about">サイトについて</a></li>
        <li>
          <button type="button" aria-expanded="false" aria-controls="sub-menu">
            サービス ▾
          </button>
          <ul id="sub-menu" hidden>
            <li><a href="/service/a">サービスA</a></li>
            <li><a href="/service/b">サービスB</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </header>

  <main id="main-content">
    <h1>本文の見出し</h1>
    <p>スキップリンクから直接ここに移動できます。</p>
  </main>
</body>

<style>
/* スキップリンクは通常は画面外に隠し、フォーカス時だけ表示する */
.skip-link {
  position: absolute;
  left: -999px;
}
.skip-link:focus {
  left: 0;
  top: 0;
}
/* フォーカスリングを消さない（アクセシビリティの基本） */
a:focus, button:focus {
  outline: 2px solid #4da3ff;
}
</style>

理解度チェッククイズに挑戦する →