HTML
Web ページの構造を記述するマークアップ言語。Web を成り立たせる基礎技術
HTML とは
HTML (HyperText Markup Language) は、Web ページの構造を記述するためのマークアップ言語だ。見出し・段落・画像・リンクといった要素を「タグ」で囲んで意味づけし、ブラウザはそれを解釈してページを表示する。Web のあらゆるページの土台であり、CSS (見た目) と JavaScript (動き) と組み合わせて Web を成立させている。
仕様の本体は WHATWG が編集する HTML Living Standard で、版番号を持たず継続的に更新される。2019 年に W3C と WHATWG が交わした合意文書では、HTML と DOM は WHATWG の Living Standard の手続きで開発し、W3C はその Review Draft に意見を出して W3C 勧告へ引き上げる、という一本化が定められた。仕様の系統が分かれると実装が食い違うため、開発の流れを 1 本に絞ったという経緯だ。この体制のため、いま「HTML5」と呼ばれているのは 2010 年前後の機能拡張の世代を指す通称であり、現行仕様の版番号ではない。
マークアップという考え方
HTML はプログラミング言語ではなく、文書に意味を与える「マークアップ言語」だ。例えば <h1> は最上位の見出し、<p> は段落、<a> はリンクを表す。重要なのは見た目ではなく「これは何か」という意味を示すことで、これを意識した記述を「セマンティック (意味的) な HTML」と呼ぶ。
なぜ意味づけが大事か
| 観点 | 意味的な HTML がもたらす効果 |
|---|---|
| アクセシビリティ | スクリーンリーダーが正しく読み上げる |
| SEO | 検索エンジンが内容を理解しやすい |
| 保守性 | 構造が明確でコードを読みやすい |
見出しを「ただ大きい文字」として書くのではなく、<h1>〜<h6> で階層を正しく表すことが、機械にも人にも優しいページにつながる。
ただし、要素名を書けば意味が自動的に伝わるわけではない。読み上げソフトなどが参照するのはタグ名ではなく、そのタグに割り当てられるロール (役割) で、同じタグでも置かれた場所で結果が変わる。例えば <header> は <body> の直下にあればサイト全体の見出し (banner) という目印として扱われるが、<article> や <section> の内側に置くと目印の資格を失い、単なるまとまりに格下げされる。<section> も、見出しや aria-label で名前が付いていなければ領域 (region) の目印にはならず、名前の無い <div> と同じ扱いになる。要素を増やすことより、名前を与えているか・入れ子の位置が適切かを意識する方が、実際の伝わり方に効く。
学ぶうえでの注意点
HTML は習得が容易で「すぐ書ける」ため、構造を軽視して見た目だけ整えてしまいがちだ。しかし、意味を無視したタグの使い方は、アクセシビリティや検索評価を損なう。また、HTML 単体では動きを持たず、見た目は CSS、振る舞いは JavaScript が担う、という役割分担を理解することが、Web 開発の全体像をつかむ第一歩になる。また、意味づけは検索順位を直接押し上げる仕掛けではなく、内容の構造を機械に誤読されにくくするための土台と捉えたほうが実態に近い。シンプルな技術だからこそ、正しく使うことに価値がある。
迷ったときは、<div> で囲む前にその塊が何であるかを言葉にしてみるとよい。案内リンクの集まりなら <nav>、本文から切り出しても単独で成立する塊なら <article>、本題の補足なら <aside> が当てはまる。言葉にできないなら、意味を持たない <div> こそが正解で、無理に意味的な要素を当てる必要はない。仕様は Living Standard として更新され続けるため、細部は MDN や仕様本体で都度確かめる習慣が長く効く。
この記事は役に立ちましたか？
関連用語
フロントエンド
ユーザーが直接触れる画面側の開発領域。ブラウザ上の見た目と操作を担う
JavaScript
Web ブラウザで動作する言語として生まれ、今やサーバーやアプリ開発まで担う汎用言語
API
ソフトウェア同士が機能やデータをやり取りするための接続規約
セマンティック HTML
HTML 要素の意味 (セマンティクス) に基づいてマークアップし、支援技術や検索エンジンが文書の構造を読み取れるようにする手法
SPA
ページ遷移なしに動的にコンテンツを更新する Web アプリケーションのアーキテクチャ
SSR/SSG
サーバーサイドレンダリングと静的サイト生成 - Web ページの生成タイミングと場所を制御するレンダリング戦略
関連する記事
foo, bar, Alice, Bob はどこから来たのか - 技術書のサンプル名の由来
技術書やコード例でおなじみの foo, bar, Alice, Bob。これらの名前にはそれぞれ歴史的な由来があります。知っていると少し楽しくなる雑学を紹介します。
体系的に学ぶ 安全な Web アプリケーションの作り方 第 2 版は初版と何が違うか - 買い直し判断ガイド
通称「徳丸本」こと体系的に学ぶ 安全な Web アプリケーションの作り方 第 2 版 (2018 年) と初版 (2011 年) の違いを出版社公表の改訂内容から整理。章の削除 / 新設 / 追加点の一覧と、初版所有者が買い直すべきかの判断基準を解説します。
JavaScript / TypeScript 本ガイド - 入門から型で守る実務コードまで
JavaScript と TypeScript を 1 本の学習ルートとして捉えた技術書の選び方。JavaScript の入門書、言語の背骨を通す体系書、TypeScript の型システムを設計の武器にする本、React/Next.js の実践書まで 2026 年 8 月時点の定番で案内します。