HTMLとは？Webページの構造や意味を定義するHTMLについて解説します
Web ページでは、単にテキストを表示するだけでなく、表やリスト形式で内容を整理して表示したり、画像や動画を埋め込んだりすることができます。また、テキストの一部にリンクを設定し、別の Web ページに移動できるようにすることも可能です。これらの機能を実現するために、 Web ページの構造や内容を記述する方法を定義しているのが HTML と呼ばれる言語です。この記事では HTML について解説します。
(Last modified: )
HTMLとは
HTML は HyperText Markup Language の略で、 Web ページの構造や内容を記述するためのマークアップ言語です。 HTML ではタグと呼ばれるものを使って実現しています。タグは < と > で特定のキーワードを囲んで記述します。
例えば見出しを表す場合は <h1> タグを使用し、段落を表す場合は <p> タグを使用します。また画像を表示する場合は <img> タグ、別の Web ページへのリンクを設定する場合は <a> タグを使用します。
HTML の仕様について、 HTML5 の策定では、 W3C と WHATWG が共同で作業を行っていましたが、現在は主要なブラウザベンダーが中心メンバーとなっている WHATWG によって主導されています。 WHATWG では、従来の HTML4 や HTML5 のように特定のバージョン番号を付与せず、仕様を継続的に更新する形で HTML Living Standard として公開しています。より詳しくは「HTMLの仕様について」を参照されてください。
HTML文書の作成とファイルの拡張子
HTML を使って作成した文書はテキスト文書として保存します。通常のテキストファイルと同じです。よって Web ページを作成するには、テキスト文書を編集できるエディタさえあれば作成することができます。（高機能なアプリケーションを使用することももちろんできます）。
作成した HTML 文書をファイルに保存するとき、拡張子として .html を使用してください。ブラウザが HTML 文書を開くとき、ファイルの拡張子を見てどんな言語で記述されたものなのかを判断します。例えば sample というファイル名で HTML 文書を保存する場合は sample.html というファイル名となります。
もし HTML 文書を保存するときに、拡張子として .txt のようなテキストファイルの拡張子を付けた場合、ファイルの中に記述されているタグが特別な意味を持たなくなるので、記述されたテキストがそのまま表示されてしまいます。
簡単なテストとして次のような HTML 文書を作成しました。今回は Windows のメモ帳で記述しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル文書</title>
</head>
<body>
<p>こんにちは</p>
</body>
</html>
この文書を sample.txt という名前で保存してみます。保存が終わったらブラウザから sample.txt をブラウザで開いてみてください。
拡張子として .txt を使用してファイルを保存したので、このファイルは HTML 文書ではなくテキスト文書として扱われています。そのため、文書の中に記述したタグが特別な意味を持たず、記述したそのままテキストとして表示されています。
次に同じファイルをまず sample.html という名前で保存してみます。保存が終わったらブラウザから sample.html をブラウザで開いてみてください。
拡張子として .html を使用してファイルを保存したので、このファイルは HTML 文書として扱われています。そのため、文書の中に記述したタグがそれぞれの意味を持つようになっています。（例えばブラウザのタブのところに、 <title> タグを使って設定したタイトル名が表示されています）。
なおファイル名として使用できる文字については「記事や画像のファイル名に関するルール」で解説しています。
HTMLの基本構造
HTML を使って Web ページを作成するときの HTML 文書の基本構造について簡単にご紹介します。以下のサンプルが最小の構成となります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル文書</title>
</head>
<body>
<p>こんにちは</p>
</body>
</html>
一行目にある <!DOCTYPE html> は HTML 文書の種類をブラウザに伝えるための宣言文です。この部分はタグではなく、HTML文書の構造を定義するためのメタ情報です。 HTML 文の先頭にこの行が記述されているとブラウザは「標準モード」で文書をレンダリングし、現在の HTML 仕様に基づく動作をします。それに対してこの行が記述されていないと「互換モード」となり、古いブラウザと互換性を持つような動作をします。
現在の仕様である HTML Living Standard でも宣言文は必要です。何か特別な理由がない限り、必ず HTML 文書の先頭行に <!DOCTYPE html> を記述してください。
2 行目にある <html> 要素はルート要素と呼ばれるもので、HTML 文書全体の範囲を定義するために使用されます。この要素は <html> タグと </html> タグで文書全体を囲みます。
<html> 要素の中には <head> 要素と <body> 要素が含まれます。 <head> 要素には HTML 文書のメタ情報を記述します。文書で使っている文字コードや、文書のタイトルなどを設定します。 <body> 要素には実際にブラウザに表示される文書の内容を記述します。
今回は最小限の要素だけを使って HTML 文書の基本構造について説明しました。今後は、スタイルシートやスクリプトの設定、さらに詳細なメタ情報などを <head> 要素や <body> 要素に追加していくことになります。
-- --
HTML とはどういったものなのかについて解説しました。
( Written by Tatsuo Ikura )
著者 / TATSUO IKURA
これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。