HTMLとは？：あらゆるウェブページのデジタルな骨格、徹底解説

一言で言うと

HTML（HyperText Markup Language）とは、ワールド・ワイド・ウェブ上で表示されるドキュメントの構造とコンテンツを作成するための標準言語です。

それが解決する問題

私たちが知っているウェブが登場する前のインターネットを想像してみてください。そこは、互いに繋がっていないドキュメントが散らばる、オタクたちのワイルド・ウェスト（無法地帯）でした。CERNの研究者があるフォーマットで研究論文をローカルシステムに保存している一方で、別の国の大学では関連する研究が全く異なる、互換性のないフォーマットで存在していました。これらの情報を共有し、さらに重要なことに、繋ぎ合わせることは、まさにデジタルな悪夢でした。

そこに登場したのがティム・バーナーズ＝リーです。80年代後半から90年代初頭にかけて、彼が作ろうとしていたのは、猫の動画を投稿するプラットフォームではありませんでした。彼が解決しようとしていたのは、科学者たちが抱える非常に現実的な問題でした。どうすれば、異なるコンピュータやネットワークを越えて、シンプルかつ普遍的な方法でドキュメントを共有し、リンクできるのか？

その解決策が、三種の神器でした。HTTP（ドキュメントをリクエストし送信するためのプロトコル）、URL（各ドキュメントのアドレス）、そしてHTML（ドキュメントを記述するための言語）です。

HTMLの天才的な点は、そのシンプルさにありました。誰でも学べる「タグ」のセットを提供し、それを使ってプレーンなテキスト文書をマークアップできるようにしたのです。このタグはブラウザに「この部分は見出しです」「これは段落です」、そして決定的に重要な「ここのテキストは、あそこにある別のドキュメントへのハイパーリンクです」と伝えます。このハイパーリンク機能こそがHTMLの「HT」であり、バラバラのファイルの集まりを、相互に接続された情報の真の「ウェブ（蜘蛛の巣）」へと変えたのです。HTMLはブラウザの共通言語、ウェブページの普遍的な設計図となりました。

内部の仕組み

一見すると、HTMLはただのテキストに奇妙な山括弧がついたものに見えます。しかしその裏では、ブラウザが高度なパース処理を行い、そのテキストを私たちが操作する生き生きとしたウェブページに変えています。

タグ、要素、属性：三位一体の基本要素

HTMLの構文は、3つの核となる概念で成り立っています。これらを理解すれば、HTMLの80%はマスターしたようなものです。

タグ: <p>や<img>のように、山括弧で囲まれた命令。ほとんどのタグは開始タグ（<p>）と終了タグ（</p>）のペアで使われます。終了タグにはスラッシュが付きます。
要素: 開始タグ、中のコンテンツ、終了タグを全部ひっくるめたもの。つまり、その全体です。
属性: 要素に関する追加情報や設定で、開始タグの中に置かれます。name="value"のペアで記述します。

簡単な例を分解してみましょう。

<a href="https://flowing.dev" class="main-link">Visit FlowingDev</a>

タグは<a>と</a>です。aは「anchor（アンカー）」の略で、ハイパーリンクに使われます。
要素はこの行全体、<a...から...</a>までです。
コンテンツは「Visit FlowingDev」というテキストです。
これには2つの属性があります。
- href="https://flowing.dev": 「hypertext reference」属性。リンクがクリックされたときにブラウザがどこに移動すべきかを指示します。<a>タグにとって最も重要な属性です。
- class="main-link": 「class」属性。CSSが要素にスタイルを適用したり、JavaScriptが要素を見つけたりするためのフック（目印）になります。

ドキュメントオブジェクトモデル（DOM）

ブラウザはHTMLファイルを受け取ると、それを本のように一行ずつ読むわけではありません。テキストをパース（解析）し、メモリ内に**ドキュメントオブジェクトモデル（DOM）**と呼ばれる論理的なツリー構造を構築します。

あなたのHTMLソースコードを、家の設計図だと考えてみてください。DOMは、その設計図に基づいて実際に組み上げられた家の骨組みです。つまり、調査したり変更したりできる具体的な構造体なのです。

この基本的なHTMLページを見てみましょう。

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>A Heading</h1>
    <p>Some text.</p>
  </body>
</html>

ブラウザはタグの入れ子構造を見て、次のようなDOMツリーを構築します。

html
- head
  - title
    - (text) "My Page"
- body
  - h1
    - (text) "A Heading"
  - p
    - (text) "Some text."

このツリー構造が全てです。CSSはこのツリーのノードにスタイルを適用します。JavaScriptはこのツリーを操作できます。新しいノード（要素）を追加したり、古いものを削除したり、属性を変更したりすることで、現代のウェブページはリロードすることなく動的でインタラクティブになるのです。DOMは、静的なHTMLと動的なアプリとを繋ぐ架け橋なのです。

ブロックレベル要素 vs インライン要素

すべての要素が同じように作られているわけではありません。レイアウトの観点から、これらは主に2つの系統に分類されます。

ブロックレベル要素: こいつらは大物です。構造的な役割を担います。通常、新しい行から始まり、利用可能な幅をいっぱいに使います。ちょうど本の中の段落のようなものです。
- 例: <div>, <p>, <h1>-<h6>, <ul>, <li>, <form>, <article>
インライン要素: こちらはもっと控えめな存在です。新しい行を開始せず、コンテンツが必要とする幅だけを取ります。周りのテキストの流れに沿って配置されます。
- 例: <a>, <span>, <strong>, <em>, <img>, <input>

この違いを理解することは、CSSのレイアウトにおいて非常に重要です。インライン要素に幅を設定しようとしても期待通りに動かなかったり、要素を縦に並べたいのに横に並んでしまう理由は何かと悩んだりするのは、ブロック vs インラインの典型的な悩みの種です。

<div style="background-color: #eee;">
  このdivはブロックレベル要素です。幅いっぱいに広がります。
</div>
<div style="background-color: #ddd;">
  これは2番目のdivです。新しい行から始まります。
</div>
<p>
  ここには、<a href="#">インラインのリンク</a>や
  <strong>インラインの太字テキスト</strong>を含む段落があります。
  これらがすべてテキストの流れの中に収まっていることに注目してください。
</p>

実話から学ぶ

ズレてしまった「今すぐ購入」ボタン

あるジュニア開発者が、商品説明と「今すぐ購入」ボタンを追加するタスクを任されました。彼は論理的だと思われるコードを書きました: <p>最高の製品！たったの$9.99！ <button>今すぐ購入</button></p>。彼の大きなデスクトップモニターでは、完璧に見えました。ボタンは文の末尾にきれいに収まっています。そしてコードはプッシュされました。

数日後、分析データからモバイルでのコンバージョン率が低下していることが判明しました。シニア開発者が調査のためにスマートフォンでページを開くと、「最高の製品！たったの$9.99！」というテキストが2行に折り返され、「今すぐ購入」ボタンもそれに追従して折り返され、文頭の下に不格好にインデントされていました。まるで壊れているように見えたのです。ジュニア開発者は、ブロックレベル要素のように振る舞うことが多いbuttonを段落内に入れてしまったため、予測不可能な折り返し挙動を引き起こしてしまったのです。

修正は簡単でした。構造とコンテンツを分離すること。テキストはそれ自身の<p>タグに入れ、ボタンはそれ自身の<div>に入れました。これで、段落がいくら折り返しても、ボタンは独立したブロックとして、画面サイズに関係なく常にその下にきれいに表示されるようになりました。

教訓: HTMLのボックスモデルとブロック/インラインの区別を理解することは、予測可能で、さまざまなデバイスで壊れないレイアウトを作成するために、絶対に必要です。

クローラーが巡回できないブログ

あるスタートアップが、最先端のJavaScriptフレームワークで構築された洗練された新しいブログを立ち上げました。高速で、アニメーションもリッチ、まるでネイティブアプリのような使い心地でした。サイト全体のHTMLソースは、実質的に<div id="app"></div>と、ユーザーのブラウザでページを構築する巨大な<script>タグだけでした。彼らはその技術を誇りに思っていました。

6ヶ月後、彼らは問題に直面しました。Googleからのオーガニックトラフィックがゼロだったのです。彼らは検索結果に表示されませんでした。検索エンジンのクローラーが彼らのサイトを訪れたとき、美しい記事や見出しではなく、空の<div>しか見えませんでした。GoogleのクローラーはJavaScriptを実行する能力が向上してはいますが、それは追加の、コストのかかるステップであり、完璧ではありません。そのブログは、クローラーの母国語、つまりプレーンでセマンティックなHTMLで、その構造やコンテンツを伝えていなかったのです。

チームはサイトを再設計し、サーバーサイドレンダリング（SSR）を使用するようにアーキテクチャを変更する必要がありました。SSRでは、サーバーが各ページの完全なHTMLを生成してからブラウザに送信します。この変更をデプロイした途端、彼らのページは適切にインデックスされ始めました。

教訓: セマンティックなHTML（<article>, <h1>, <p>）は単なる推奨事項ではありません。それは、検索エンジンや他の自動化ツールにコンテンツの意味と階層を伝える方法なのです。

アクセシビリティの悪夢

ある企業が新しい社内ダッシュボードを公開しました。デザイナーが望んだピクセルパーフェクトな見た目を実現するため、開発者たちはあらゆるものに<div>要素を使いました。border-radiusとJavaScriptのonClickイベントを持つ<div>がボタンになり、別のonClickイベントを持つ<div>がリンクになりました。

このダッシュボードは、スクリーンリーダーに頼る従業員にとって全く使えないものでした。スクリーンリーダーは、インタラクティブな要素すべてを「グループ」と読み上げるだけで、それがボタンなのか、リンクなのか、それとも他の何かなのか、全く手がかりを与えませんでした。さらに、<div>はデフォルトでフォーカス可能ではないため、Tabキーでのナビゲーションも不可能でした。

アクセシビリティのコンサルタントが呼ばれ、その惨状に愕然としました。修正には、退屈だけど不可欠なリファクタリングが含まれていました。<div onClick="...">を<button>や<a>など、適切でセマンティックな要素に置き換える作業です。これらのネイティブなタグには、キーボードフォーカス、適切な役割の読み上げなど、膨大な量のアクセシビリティ機能が無料で組み込まれています。

教訓: 仕事に適したHTMLタグを使いましょう。あなたはブラウザに何かを描画する方法を伝えているだけではなく、支援技術にそれが何であるかを伝えているのです。

よくある間違いと落とし穴

「div病」。 <nav>, <main>, <article>, <aside>, <button>のような、より具体的でセマンティックなタグがコンテンツの目的をより良く表現できる場面で、<div>と<span>をむやみやたらに乱用すること。
アクセシビリティの基本を忘れること。 <img>タグのalt属性のつけ忘れは典型例です。これにより、視覚障害を持つユーザーは画像に関する情報を全く得られなくなります。同様に、太字にするために<strong>（重要性を示す）の代わりに<b>を使うことも、セマンティックな意味合いを逃す機会損失になり得ます。
不適切なタグの入れ子。 どんなタグでも他のタグの中に入れられるわけではありません。よくある間違いは、ブロックレベル要素（<div>など）をインライン要素（<a>など）で囲むことです。ブラウザは最善を尽くしてレンダリングしようとしますが、結果として得られるDOMはぐちゃぐちゃになり、奇妙な挙動を引き起こす可能性があります。
<head>を無視すること。 <head>セクションは非常に重要です。文字エンコーディング（<meta charset="UTF-8">）の設定を忘れると、文字化けを引き起こすことがあります。ビューポートのメタタグ（<meta name="viewport" content="width=device-width, initial-scale=1.0">）を忘れることは、モバイルサイトが縮小表示されて文字が米粒みたいに見える一番の原因です。
語彙が固定されていると決めつけること。 HTMLは生きた言語です。新しいタグや属性は時間とともに追加されます（例: <main>, <picture>）。2010年頃の古いパターンに頼っていると、より堅牢でセマンティックな文書構造化の方法を見逃すことになります。

なぜ注目すべきなのか

もしあなたが何らかのプロとしてウェブに携わるなら、HTMLは選択肢ではなく必須です。

フロントエンド開発者にとって、それはまさに土台です。React、Vue、Svelteのようなフレームワークは強力ですが、それらはすべて最終的にHTMLを吐き出します。その出力ターゲットを理解することで、あなたははるかに有能な開発者になれます。
バックエンド開発者にとって、あなたはしばしばHTMLのスニペットを生成したり、HTMLフロントエンドで消費されるAPIを構築したり、HTMLを生成するテンプレートエンジンを扱ったりします。そのルールを知ることで、壊れたりセマンティックでなかったりするマークアップを出荷してしまうのを防げます。
UI/UXデザイナーにとって、HTMLの基本的な構成要素（div, span, p, h1）を理解することは、構築しやすく、ウェブのネイティブコンポーネントにうまく落とし込めるデザインを作成するのに役立ちます。
SEOスペシャリストやコンテンツマネージャーにとって、HTML（特に見出し、titleタグ、meta description）をしっかり理解することは、あなたの専門技術の基本です。

HTMLは、デジタル時代において最も耐久性があり、後方互換性があり、普遍的な言語です。1995年に書かれたウェブページは、今日でも表示されます。それは、あらゆる技術の流行り廃りやフレームワーク戦争を乗り越えて、不可欠であり続けた唯一のスキルであり、これからもなくなることはないでしょう。

さらに深く知る

MDN Web Docs: HTML — 日々の開発における究極のリファレンス。網羅的で、優れたサンプルが豊富です。
WHATWG HTML Living Standard — HTMLの公式かつ継続的に更新される仕様書。これこそが真実のソースです。
Wikipedia: HTMLの歴史 — HTMLがどのように、そしてなぜ生まれたのか、その背景を知るために。
Google SEO スターターガイド — 優れたHTMLが検索エンジンの可視性に与える実際的な影響を示しています。
The A11Y Project — ウェブアクセシビリティをより簡単にするためのコミュニティ主導のプロジェクト。適切なHTMLを書くことに根ざした無数のヒントが得られます。