🧱

HTML言語の文法解説

HTMLはマークアップ言語のため「アルゴリズムの実装」はありませんが、基本情報技術者試験ではWeb技術の基礎（DOM、ブラウザのレンダリング、HTTP、アクセシビリティなど）が頻出します。ここではタグの文法だけでなく、その裏側の仕組みまで掘り下げて解説します。

文法解説

1. HTML文書の基本構造とコメント

すべてのHTML文書は<!DOCTYPE html>宣言から始まります。これはブラウザに「この文書はHTML5の標準モードで解釈してほしい」と伝えるもので、省略すると互換モード（Quirksモード）で描画され、レイアウト崩れの原因になります。文書本体は<html>要素の中に<head>（メタ情報）と<body>（表示内容）を1つずつ持つ木構造です。コメントはで書き、ブラウザには表示されません。

SAMPLE

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
</head>
<body>
  <!-- ここから本文 -->
  <h1>ようこそ</h1>
  <p>これはサンプルページです。</p>
</body>
</html>

2. 見出し・段落とテキストの意味づけ

見出しは重要度順に<h1>〜<h6>、段落は<p>を使います。<strong>は文章上の重要性、<em>は強調（アクセント）という「意味」を表すタグで、見た目だけを太字・斜体にしたい場合はCSSのfont-weightやfont-styleを使うのが本来のHTMLの考え方（構造と見た目の分離）です。<br>は改行、<hr>は話題の区切りを表します。

SAMPLE

<h1>大見出し</h1>
<h2>中見出し</h2>
<p>これは段落です。<strong>ここは重要</strong>で、<em>ここは強調</em>です。</p>
<hr>
<p>新しい話題の段落です。<br>ここで改行しています。</p>

3. リストとテーブルの構文

箇条書きは順不同なら<ul>、番号付きなら<ol>を使い、それぞれの項目を<li>で表します。表は<table>の中に行<tr>、見出しセル<th>、データセル<td>を並べます。表の見出し行は<thead>、本体は<tbody>で意味的にグループ化できます。

SAMPLE

<ol>
  <li>材料を準備する</li>
  <li>混ぜる</li>
  <li>焼く</li>
</ol>

<table>
  <thead>
    <tr>
      <th>科目</th>
      <th>点数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数学</td>
      <td>90</td>
    </tr>
  </tbody>
</table>

4. リンクと画像、相対パス・絶対パス

リンクは<a href="...">、画像は<img src="..." alt="...">で表します。パスの指定方法には、現在のファイルを基準にした相対パス（./img/cat.jpgや../index.html）と、ドメインから始まる絶対パス（https://example.com/img/cat.jpg）があります。サイト内リンクは相対パスにしておくと、ドメイン変更やローカル環境での動作確認がしやすくなります。

SAMPLE

<!-- 相対パス（同じサイト内） -->
<a href="../index.html">トップページへ</a>
<img src="./img/cat.jpg" alt="かわいい猫の写真">

<!-- 絶対パス（外部サイト） -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部サイト</a>

5. セマンティックマークアップ

単なる<div>ではなく、意味を持つタグ（セマンティックタグ）を使うと、ブラウザ・検索エンジン・支援技術（スクリーンリーダーなど）が文書構造を正しく理解できます。<header>はページや章の導入部、<nav>はナビゲーションリンクの集まり、<main>はページの主要コンテンツ（1文書に1つ）、<article>は単独で配信・再利用できるまとまり、<section>は見出しを持つ話題のまとまり、<footer>は末尾情報を表します。

SAMPLE

<header>サイトのヘッダー</header>
<nav>ナビゲーションメニュー</nav>
<main>
  <article>
    <section>
      <h2>記事タイトル</h2>
      <p>本文...</p>
    </section>
  </article>
</main>
<footer>サイトのフッター</footer>

6. フォームと入力値の検証（バリデーション）

<form>はユーザー入力を送信する仕組みで、action属性に送信先URL、method属性にGET（URLにデータを付与して取得）かPOST（本文にデータを含めて送信）を指定します。<input>のtype属性にはtext、email、number、password、checkbox、radio、dateなどがあり、type="email"やtype="number"を指定するだけでブラウザが形式チェックを行います。加えてrequired（必須）、minlength/maxlength（文字数制限）、pattern（正規表現による形式チェック）といった検証属性を付けることで、サーバーに送る前にブラウザ側で入力ミスを検出できます（これをクライアントサイドバリデーションと呼びますが、安全のためサーバー側でも必ず再検証します）。

SAMPLE

<form action="/submit" method="post">
  <label for="name">お名前:</label>
  <input type="text" id="name" name="name" required minlength="1" maxlength="30">

  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email" required>

  <label for="age">年齢:</label>
  <input type="number" id="age" name="age" min="0" max="120">

  <label for="zip">郵便番号（例: 123-4567）:</label>
  <input type="text" id="zip" name="zip" pattern="\d{3}-\d{4}">

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

7. メタデータとSEO・OGPの基礎

<head>内の<title>はブラウザタブや検索結果の見出しに使われ、<meta name="description">は検索結果に表示される要約文になります。SNSでリンクを共有したときにタイトル・画像・説明をリッチに表示させる仕組みがOGP（Open Graph Protocol）で、<meta property="og:title">のような属性で指定します。<link rel="stylesheet">は外部CSSの読み込み、<meta name="viewport">はモバイル端末での表示幅の基準を指定します。

SAMPLE

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>プログラミングステーション</title>
  <meta name="description" content="プログラミングを基礎から学べる学習サイト">

  <!-- OGP（SNSでのシェア表示を制御） -->
  <meta property="og:title" content="プログラミングステーション">
  <meta property="og:description" content="文法・サンプル・クイズで学ぶ学習サイト">
  <meta property="og:image" content="https://example.com/ogp.png">

  <link rel="stylesheet" href="style.css">
</head>

8. グローバル属性とdata属性

id（文書内で一意な識別子）やclass（複数要素に共通のグループ名）はほぼ全てのタグで使えるグローバル属性で、CSSやJavaScriptから要素を参照する際に使います。独自データをHTMLに埋め込みたい場合はdata-*属性（data-user-idなど）を使うのがHTML5以降の標準的な方法で、JavaScript側からelement.dataset.userIdのようにアクセスできます。

SAMPLE

<div id="main-content" class="card highlight" data-user-id="42">
  内容
</div>

<script>
const el = document.getElementById("main-content");
console.log(el.dataset.userId); // "42"
</script>

9. iframeと埋め込み要素

<iframe>は別のHTML文書をページ内の枠として埋め込むタグで、地図や動画の埋め込みによく使われます。埋め込み先が信頼できない場合はsandbox属性で実行できる機能を制限し、セキュリティリスク（クリックジャッキングなど）を軽減します。loading="lazy"を付けると画面外のiframeの読み込みを遅延できます。

SAMPLE

<iframe
  src="https://example.com/map"
  width="400" height="300"
  loading="lazy"
  sandbox="allow-scripts allow-same-origin"
  title="地図の埋め込み">
</iframe>

10. HTML5のメディア要素（canvas / video / audio）

<canvas>はJavaScriptから直接図形やグラフを描画できる領域を提供します。<video>と<audio>はプラグイン（かつてのFlashなど）なしで動画・音声を再生できるHTML5の標準タグで、controls属性で再生バーを表示し、<source>を複数指定してブラウザが対応形式を自動選択できるようにします。

SAMPLE

<canvas id="chart" width="300" height="150"></canvas>

<video controls width="480">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  お使いのブラウザは動画再生に対応していません。
</video>

<audio src="sound.mp3" controls></audio>

11. アクセシビリティ（ARIA・altテキスト・フォーカス管理）

視覚に障害のあるユーザーはスクリーンリーダー（画面読み上げソフト）でページを利用します。<img>のalt属性は画像が表示できない場合や読み上げ時の代替テキストとして必須です。セマンティックタグだけでは意味を伝えきれない場合にroleやaria-*属性（ARIA: Accessible Rich Internet Applications）を補助的に使います。キーボードだけで操作するユーザーのために、フォーカス可能な要素の順序（tabindex）や現在フォーカスされている要素が視覚的に分かる状態（フォーカスリング）を維持することも重要です。

SAMPLE

<img src="chart.png" alt="2024年度の売上推移グラフ（前年比120%）">

<button aria-label="メニューを開く" aria-expanded="false">
  ☰
</button>

<nav aria-label="パンくずリスト">
  <a href="/">ホーム</a> >
  <a href="/blog">ブログ</a> >
  <span aria-current="page">現在のページ</span>
</nav>

12. DOM（Document Object Model）とツリー構造

ブラウザはHTMLファイルをそのまま画面に映しているのではなく、解析結果をDOM（Document Object Model）と呼ばれるツリー構造のオブジェクトとしてメモリ上に構築します。DOMツリーの各ノード（要素・テキスト・属性など）はJavaScriptからプログラム的に参照・変更でき、これによって静的なHTMLをページの再読み込みなしに動的に書き換えることができます。HTMLの入れ子関係がそのままDOMツリーの親子関係になる点が試験でも問われるポイントです。

SAMPLE

<!-- このHTML -->
<body>
  <h1>タイトル</h1>
  <p>本文</p>
</body>

<!--
DOMツリーは次のような親子構造になる:
body
 ├─ h1 ── "タイトル"（テキストノード）
 └─ p  ── "本文"（テキストノード）
-->

<script>
// DOMを操作して要素を書き換える
const h1 = document.querySelector("h1");
h1.textContent = "書き換えたタイトル";
</script>

13. ブラウザのレンダリングの仕組み

ブラウザがHTMLファイルを受け取ってから画面に表示するまでには、大きく次の流れがあります。

① HTML解析（パース） ── サーバーから受け取ったHTMLを上から順に読み込み、タグを解析する。
② DOM構築 ── 解析結果をもとにDOMツリーを作る。
③ CSSOM構築 ── CSSファイルを解析し、CSSOM（CSS Object Model）というスタイル情報のツリーを作る。
④ レンダーツリー構築 ── DOMとCSSOMを組み合わせ、実際に画面に表示される要素だけのツリー（display: noneの要素は除外）を作る。
⑤ レイアウト（リフロー） ── 各要素の正確な位置とサイズを計算する。
⑥ ペイント（描画） ── 実際に画面のピクセルとして描画する。

JavaScriptの<script>タグは、位置によってはHTML解析を一時停止させてしまう（レンダリングブロック）ため、読み込む位置やdefer/async属性の使い分けが表示速度に直結します。

SAMPLE

<!-- 解析をブロックしない script の書き方 -->
<head>
  <link rel="stylesheet" href="style.css">
  <!-- deferはHTML解析と並行してダウンロードし、解析完了後に実行順を保って実行 -->
  <script src="app.js" defer></script>
  <!-- asyncはダウンロード完了次第すぐ実行（実行順は保証されない） -->
  <script src="analytics.js" async></script>
</head>

14. HTTPの基礎とWebページ配信の流れ

ブラウザにURLを入力すると、ブラウザ（クライアント）はWebサーバーに対してHTTPリクエストを送信します。サーバーは要求されたHTMLファイルなどをHTTPレスポンスとして返し、その中にはステータスコード（200 OK＝成功、404 Not Found＝存在しない、500 Internal Server Error＝サーバーエラーなど）が含まれます。ブラウザはレスポンスとして受け取ったHTMLを解析し、その中で参照されているCSSや画像・JavaScriptに対しても追加のリクエストを送って取得します。通信を暗号化するHTTPSでは、TLSによってやり取りの内容が保護されます。

SAMPLE

GET /pages/html.html HTTP/1.1
Host: example.com
Accept: text/html

--- サーバーからの応答（例） ---

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234

<!DOCTYPE html>
<html>...</html>

処理速度改善のポイント（表示速度の最適化）

HTMLはプログラム実行速度というより「ページの表示速度」が重要な指標です。ユーザーが快適に閲覧できるよう次の点を意識しましょう。

画像にはloading="lazy"を付ける：画面外の画像・iframeの読み込みを遅延させ、初期表示を高速化できます。
不要なDOM要素・過度なネストを減らす：DOMツリーが浅くシンプルなほど、レンダーツリーの構築やレイアウト計算の負荷が下がります。
レンダリングブロックを避ける：CSSは<head>で早めに、JavaScriptはdefer/async属性を付けるか<body>末尾で読み込み、HTML解析の停止を防ぎます。
適切なmeta viewportを設定する：width=device-width, initial-scale=1.0を指定し、モバイル端末での不要な拡大縮小処理を避けます。
セマンティックタグを使う：divの多用よりheader/nav/main/articleなどを使う方がブラウザの解析効率とアクセシビリティが向上します。
画像サイズ・フォーマットを最適化する：WebPなど軽量フォーマットの使用や、表示サイズに合わせたリサイズでデータ量を削減できます。
重要なリソースはpreloadで先読みする：<link rel="preload">で重要なフォントや画像を優先的に取得し、レンダリングの待ち時間を減らせます。
HTTPレスポンスの圧縮・キャッシュを活用する：gzip/Brotli圧縮やブラウザキャッシュ・CDNを使うことで、転送量と再訪問時の読み込み時間を削減できます。

サンプルページで実践的なコードを見る →