メインコンテンツへスキップ
Hemen Dönüştür
言語を選択: ja

ファイル形式

HTMLとは？歴史、パース、DOMを解説

HTMLはWebページの構造を記述するマークアップ言語で、ほぼすべてのWebサイトの土台になっています。その歴史、ブラウザーでの処理の流れ、HTMLを文書に変換するときの注意点を解説します。

著者: Hemen Dönüştür Editör Ekibi公開日: 10 分で読めます

山かっこのアイコンとHTMLの文字が入ったファイルバッジ

Webで目にするもののほとんどは、このページも含めてHTMLで書かれています。HTML（HyperText Markup Language）はプログラミング言語ではなく、文書の構造を記述するマークアップ言語です。これは見出し、これは段落、これはリンク、これは表、というように。そしてHTMLはWebサイトだけのものではありません。メールのテンプレート、ヘルプドキュメント、書き出されたレポート、「Webページとして保存」した文書にも登場します。この記事では、HTMLの歴史、ブラウザーがHTMLを読んで画面に描く仕組み、よくあるトラブル、HTMLファイルをWordやPDFに変換するときの注意点を説明します。

HTMLとは

HTMLは、コンテンツをタグで印付けするプレーンテキストの言語です。タグは山かっこの間に書き、その多くは開始タグと終了タグで一つの要素を作ります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>サンプルページ</title>
  </head>
  <body>
    <h1>こんにちは</h1>
    <p>この段落には<a href="https://example.com">リンク</a>があります。</p>
  </body>
</html>

<head>部分はページに関する情報（文字コード、タイトル、スタイルシート）を持ち、<body>には目に見えるコンテンツが入ります。見た目はCSSで、動きはJavaScriptで加えます。この分担では、HTMLがコンテンツの意味を、CSSが見た目を、JavaScriptが振る舞いを担います。

簡単な歴史

HTMLは、ティム・バーナーズ＝リーが1989年にCERNで提案したWorld Wide Webプロジェクトの一部として生まれました。彼の最初のブラウザーは1990年にNeXTのコンピューター上で動きました。初期の言語は、正式な規格というより、CERNで文書化されたタグの一覧に近いものでした。その後の主な節目は次のとおりです。

  • 1995年11月、HTML 2.0：ティム・バーナーズ＝リーとダン・コノリーが書いたRFC 1866が、初めてHTMLを正式な規格として定義しました。
  • 1997年1月、HTML 3.2：W3Cが業界横断の仕様として正式に承認したバージョン。
  • 1999年12月24日、HTML 4.01：長年にわたりWebの中核仕様であり続け、W3Cは2018年3月27日に正式に「置き換え済み」としました。
  • 2014年10月28日、HTML5：W3CがHTML5を勧告として公開しました。動画、音声、意味を持つセクション要素、厳密に定義されたパースのアルゴリズムがこれとともに標準化されました。
  • 2019年5月28日、規格の一本化：W3Cと、ブラウザーベンダーが作ったコミュニティであるWHATWGが覚書に署名しました。これにより、HTMLとDOMは主にWHATWGで、バージョン番号のない「Living Standard」として開発されることになりました。

つまり現在の「HTML5」は事実上「今のHTML」を意味し、公式の仕様は継続的に更新されるHTML Living Standardです。

どれほど普及しているのでしょうか。W3Techsの2026年10月15日の統計によれば、マークアップ言語が判明しているWebサイトの97.8%がHTMLを使っています。同じ情報源は、文字コードが判明しているWebサイトの99.1%がUTF-8を使っているとしています。

ブラウザーはHTMLをどう処理するのか

HTMLが他の文書形式と違うのは、書き方の誤った文書でさえ、どのブラウザーでも同じように解釈される点です。HTML Living Standardは、そのための詳細なパースモデルを定めています。

  1. 文字コードの決定：ブラウザーはまず、受け取ったバイトを文字に変換しなければなりません。BOM、サーバーのHTTPヘッダーで宣言された文字コード、文書の先頭1024バイト以内にある<meta charset>宣言の順に確認し、どれも見つからなければ推測します。
  2. トークン化：状態機械がテキストを、開始タグ、終了タグ、コメント、DOCTYPE、文字などのトークンに分けます。
  3. ツリー構築：トークンは「in body」や「in table」といった挿入モードに従って処理されます。パーサーは開いている要素のスタックを持ち、入れ子の誤ったタグを定められた規則に従って修復します。
  4. DOM：結果として、Document Object Model（DOM）と呼ばれるオブジェクトのツリーができます。CSSはこのツリーに適用され、JavaScriptはこのツリーを読み書きします。

仕様は、パースエラーに対するエラー処理がきちんと定義されていることを明言しています。たとえば<div/>と書くと、HTMLは末尾のスラッシュを無視するため、後に続く要素はそのdivの中に入ってしまいます。閉じられていない<p>は、次のブロック要素が来た時点で自動的に閉じられます。この寛容さのおかげで、不完全なページが無数にあってもWebは動き続けていますが、HTMLを文書形式に変換するツールも同じ規則に従わなければならないということでもあります。

HTMLが使われる場面

  • WebサイトとWebアプリ：すべてのWebページの骨組み。
  • メール：書式付きのメールやニュースレターはHTMLで書かれています。
  • ドキュメント：ヘルプページ、ソフトウェアのドキュメント、Markdownから生成されるサイト。
  • 電子書籍：EPUB形式はコンテンツをXHTML文書としてパッケージします。
  • レポートと書き出し：多くのアプリケーションがレポートをHTMLで出力し、Wordの「Webページとして保存」の出力もHTMLです。

長所と短所

長所短所
どの端末でもブラウザーで開ける見た目が外部のCSS、フォント、画像に左右される
オープンで無料、継続的に更新される規格ページや余白など印刷の概念に弱い
画面サイズに合わせて変わる柔軟なレイアウト1つのファイルとして持ち運びにくい（画像は別ファイル）
アクセシビリティや検索エンジンに役立つ意味構造JavaScriptを含む場合は注意が必要
プレーンテキストなのでバージョン管理と相性がよい完成版を固定する用途ではPDFほど向いていない

HTMLを開けるソフト

Chrome、Firefox、Safari、Edgeなど、どのブラウザーでもHTMLを表示できます。ソースを編集するなら、Visual Studio Codeのようなコードエディターか、任意のテキストエディターで十分です。Microsoft WordとLibreOffice WriterもHTMLファイルを開いて文書として編集できますが、複雑なCSSレイアウトは簡略化されます。

よくあるトラブルと対処法

特殊文字が化ける

ページの文字コードが指定されていないか、間違っています。<head>の先頭近くに<meta charset="utf-8">を追加し、ファイルが実際にUTF-8で保存されていることを確認してください。サーバーが別の文字コードを宣言している場合は、HTTPヘッダーも直しましょう。

保存したページに画像やスタイルがない

HTMLファイルは、画像やCSSを別ファイルやインターネット上のアドレスから読み込むことがよくあります。.htmlファイルだけを移動すると、そのリンクが切れてしまいます。ブラウザーの「ウェブページ、完全」の保存オプションを使うか、画像を文書に埋め込んでください。

印刷するとページが崩れる

画面向けに設計されたレイアウトは、紙に収まらないことがあります。CSSで@media printのルールを定義し、@pageで用紙サイズと余白を指定すると、印刷結果が大きく改善します。

HTMLファイルを変換するときのコツ

当サイトの変換ツールでは、HTMLファイルは当サイトのサーバーにアップロードされ、30分以内に削除されます。ファイルを読み込むときは、BOM、<meta charset>宣言、内容そのものの順に文字コードを判別し、UTF-8でない古いページはトルコ語のWindows-1254として読み込まれます。文書の<body>の内容とページの<style>ブロックは保たれ、<body>タグのないHTMLの断片はそのまま処理されます。

  • HTMLからPDFへの変換はブラウザーエンジンで行われます。印刷用CSSが適用され、@pageで定義された用紙サイズが尊重され（指定がなければA4）、背景色も印刷されます。安全のため、JavaScriptは実行されず、インターネット上の画像、フォント、スタイルシートもダウンロードされません。使われるのは文書に埋め込まれたリソース（data: URI）だけです。出力に画像を入れたい場合は、HTMLに埋め込んでください。
  • HTMLからWordへの変換では、LibreOfficeを使って見出し、リスト、表、配置、埋め込み画像をDOCXに移します。複雑なCSSレイアウト（flex、grid）はWordに相当するものがないため簡略化されます。
  • HTMLからMarkdownへの変換は、Webページやヘルプ記事をドキュメントのリポジトリに移すのに最適です。見出し、強調、リスト、表、リンク、コードブロックが保たれ、スタイルの情報は削除されます。
  • 逆方向では、WordからHTMLへの変換で画像がファイル内に埋め込まれ、文字コードが宣言された単体のHTML文書ができるため、ブラウザーで文字が正しく表示されます。

よくある質問

HTMLはプログラミング言語ですか？

いいえ。HTMLはマークアップ言語で、コンテンツの構造を記述しますが、ループや条件分岐、計算はありません。ページに動きを加えるにはJavaScriptを使います。

HTML5とHTMLの違いは何ですか？

HTML5は、2014年にW3C勧告となったメジャーバージョンの名前です。2019年以降、HTMLはWHATWGでバージョン番号なしの「HTML Living Standard」として開発されています。実際には、今日ではHTML5とHTMLは同じものを指します。

HTMLファイルを開くには？

ダブルクリックすれば既定のブラウザーで開きます。ソースコードを見たいときは、テキストエディターで開くか、ブラウザーの「ページのソースを表示」を使ってください。

HTMLをPDFに変換すると画像が消えるのはなぜですか？

画像がインターネット上のアドレスから読み込まれている場合、当サイトの変換ツールは安全のためダウンロードしません。画像をdata: URIとしてHTMLに埋め込むか、先に文書をWordに変換してから画像を追加してください。

HTMLファイルを開いても安全ですか？

HTMLにはJavaScriptを含めることができるので、出どころの分からないファイルには注意してください。メールの添付ファイルとして届き、パスワードの入力を求めるHTMLページは、よくあるフィッシングの手口です。

出典

関連する変換ツール

関連記事

すべての記事