HTML（.html/.htm）の完全ガイド — DOCTYPE・要素・HTML Living Standard・XHTML との違い

▶

この記事の要点

HTML は HyperText Markup Language の略で、Web ページの構造を記述するためのマークアップ言語。1993 年 Tim Berners-Lee が考案、現在の標準は WHATWG が策定する HTML Living Standard
拡張子は .html が基本、Windows 8.3 制約時代の名残で .htm も同義。MIME タイプは text/html
ファイル先頭の <!DOCTYPE html> で HTML5 として解釈され、<html> 要素の下に <head>（メタ情報）と <body>（本文）を置く
セマンティック要素（<header> / <nav> / <article> / <section> / <footer>）が HTML5 で導入され、SEO とアクセシビリティの基盤に
文字コードは UTF-8 が事実上の標準。<meta charset="UTF-8"> を <head> の先頭に書くのが必須に近い慣習
XHTML（XML 構文の HTML）は 2000 年代に普及したが、HTML5 の登場で主流は再び寛容な HTML 構文に戻った。XHTML を選ぶ必然性は現在ほぼ無し
パーサはブラウザ（Chromium/Gecko/WebKit）に内蔵、加えて Node.js では jsdom / cheerio、Python では BeautifulSoup / lxml が代表

概要

HTML (HyperText Markup Language) は、Web ページの構造を記述するためのマークアップ言語である。文書を「タイトル」「見出し」「段落」「リンク」「画像」といった意味のあるパーツに分解して記述し、それを Web ブラウザがレンダリングして人間が読める形にする。1993 年に CERN の Tim Berners-Lee が World Wide Web の基盤技術として考案し、以後 IETF → W3C を経て、現在は WHATWG (Web Hypertext Application Technology Working Group) が HTML Living Standard として継続的に更新している。バージョン番号（HTML4 / HTML5 など）は便宜的な目印であり、正式な仕様は常に「最新の Living Standard」であるという点が他のフォーマットと大きく異なる。

拡張子は .html が基本で、MIME タイプは text/html。歴史的に MS-DOS の 8.3 形式（拡張子 3 文字制限）への対応として .htm も使われ、現在も両方有効である。ファイルは UTF-8 でエンコードされた純粋なテキストであり、メモ帳でも開ける反面、複雑な構造を持つ実装ではエディタの構文支援なしには破綻しやすい。

内部構造・構文

HTML 文書は冒頭の <!DOCTYPE html> によって「これは HTML5 (Living Standard) として処理してほしい」とブラウザに伝える。続いて <html> がルート要素となり、その直下に <head>（メタ情報・スタイル・スクリプト読み込み）と <body>（実際に画面に表示される本文）を 1 つずつ置く、というのが基本骨格である。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>サンプルページ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header><h1>見出し</h1></header>
  <main>
    <article>
      <p>本文を書く段落。<a href="/about">リンク</a> を含む。</p>
    </article>
  </main>
  <footer><p>© 2026</p></footer>
</body>
</html>

要素 (element) は <tag>...</tag> の対で構成され、内部にテキストや別の要素を入れ子にできる。タグには属性 (attribute) を key="value" 形式で書き込め、リンク先 (href)、画像パス (src)、識別子 (id) などを指定する。<img> や <br> のように終了タグを持たない空要素 (void element) も存在する。

HTML5 で重要視されるようになったのがセマンティック要素で、<header> / <nav> / <main> / <article> / <section> / <aside> / <footer> といった「役割を持った箱」が定義された。これらは検索エンジンが文書構造を理解する助けになり、スクリーンリーダーがランドマーク移動する根拠にもなる。div 連打で組むより読みやすく保守しやすい。

主な用途

Web ページの本体 — すべての Web サイトはこれをルートに持つ
メール HTML — HTML メール (multipart/alternative の HTML パート) で利用、ただし対応はメールクライアントによって不揃い
SSG (静的サイトジェネレーター) — Hugo / Jekyll / Astro などはテンプレートから .html を吐く
Electron 等のデスクトップアプリ — UI レイヤーが HTML/CSS/JS で動くため、ローカル .html が読み込まれる
ドキュメント配布 — Javadoc, Doxygen, Sphinx などは HTML 出力をデフォルトとする

編集・パーサ・ツール

エディタ — VS Code（Emmet 標準搭載で html:5 + Tab で骨格生成）、JetBrains 系、Sublime Text、Vim/Neovim
ブラウザの DevTools — Chrome/Edge/Firefox/Safari いずれも HTML ツリー (DOM) をリアルタイム編集可能
サーバサイドパーサ — Node.js: jsdom / cheerio、Python: BeautifulSoup / lxml、PHP: DOMDocument
検証ツール — W3C Markup Validation Service、HTMLHint、html-validate
テンプレートエンジン — Blade (Laravel) / Twig / EJS / Handlebars / JSX (React) など、HTML を生成する側のツールが豊富

注意点・落とし穴

文字コードの宣言忘れ — <meta charset="UTF-8"> がないと環境依存で文字化けする。<head> 内の極力先頭（タイトルより前）に置く
属性値のクオート省略 — HTML5 は許容するが、属性値に空白や特殊文字を含む場合は必ずダブルクオートで囲む
XSS の危険 — ユーザー入力を < や > をエスケープせずに HTML に流し込むと、スクリプトが実行される。テンプレートエンジンの自動エスケープを必ず有効に
ブロックとインラインの混在 — <p> の中に <div> を書くと自動的に <p> が閉じられる、といった暗黙の振る舞いがある
HTML メールの制約 — 多くのメールクライアントが古い HTML/CSS しかサポートしておらず、Web ページと同じ感覚で書くと崩れる
セマンティクスを無視した div スープ — <div> ばかりで組むと SEO・アクセシビリティが低下する。役割が決まっているなら適切な要素を使う

形式	構文の厳密さ	主目的	備考
HTML5 / Living Standard	寛容（タグ閉じ忘れも復旧）	Web ページ表示	現在の主流
XHTML	厳密（XML 構文）	HTML を XML として処理	2000 年代に流行、現在ほぼ衰退
XML	厳密（well-formed 必須）	汎用データ記述	HTML より構造データ向け
Markdown	軽量・寛容	執筆向け、HTML へ変換される	README や記事執筆で主流
MHTML (.mht)	HTML+リソース同梱	1 ファイルで保存	IE 時代の遺物、現在は限定的

ページ一覧

その他

HTML（.html/.htm）の完全ガイド — DOCTYPE・要素・HTML Living Standard・XHTML との違い

概要

内部構造・構文

主な用途

関連形式との比較

編集・パーサ・ツール

注意点・落とし穴

関連リンク

人気ページ

最近更新/作成されたページ