メインコンテンツへスキップ

HTMLとは

1.HTMLとは

HTMLは、
主にWebページを作る時に使う
文字やリンクなどを書ける
コンピュータの言葉(言語)です。

HTML (エイチ ティー エム エル)は、Hypertext Markup Language (ハイパー テキスト マークアップ ランゲージ)を略した名称で、 World Wide Web ( ワールド・ワイド・ウェブ ) というインターネットの仕組みで使われる、ハイパーテキストシステムの中核となるマークアップ言語です。

ハイパーテキストとは、 ハイパーリンクという文書を結び付ける機能のあるテキストです。 マークアップ言語とは、 文章をタグや記号で構造化することで、 コンピューターに文書の構造を認識させる言語で、コンピューター言語の一種です。 結文書 ( ハイパーテキスト ) 組版 ( マークアップ ) 言語 ( ランゲージ ) が造語的には合うのかなと思います。

HTML は、World Wide Web のコア マークアップ言語です。元々、HTML は主に科学文書を意味的に記述する為の言語として設計されました。しかし、その一般的な設計により、その後数年間で、他の多くの種類の文書やアプリケーションを記述できるように適応できるようになりました。
(Google翻訳で、英語から日本語に翻訳して引用しています。)
「HTML Standard - 1.3 Background」
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>HTMLのサンプル</title>
  6. </head>
  7. <body>
  8. <h1>html文書の例</h1>
  9. <p>HTMLを用いると、テキストデータの表示等ができます。</p>
  10. <a href="./what.htm">ハイパーリンクの記述例</a>
  11. </body>
  12. </html>

簡単な例を提示すると、HTMLとはこの様なものです。 この詳細を、この後メモっていきたいと思っています。

2.HTMLで出来る事

HTMLでは、
リンクの設定,
画像や音声の埋め込み,
文書構造や見た目の調整
などが可能です。

HTMLは、主にWebページの内容や構造を記述する為に使われる言語です。 「テキストの表示」をはじめとして、「文書同士を結び付けるハイパーリンクの設定」、「画像や音声などの埋め込み, マルチメディアの統合」、「文書の意味的な構造表現や表示の調整」などが可能です。 HTMLファイルはテキストエディタなどで作成でき、Webブラウザで閲覧する事が出来ます。

HTMLは文書の表示(装飾)に関しては、スタイルシート言語にて記述して表示します。個々のHTMLの要素でもスタイルシートの既定値があります。スクリプト言語を用いて、動的に表現する事もできます。 ユーザーからの情報をサーバー側で受け取る事が可能な為、意図しないデータの送信には注意が必要です。

HTMLが何かを理解することで、「どのように記述すれば意図した表現になるか」や「どんな場面で使うべきか」が分かります。 また、データの送信など、注意が必要な機能についても意識できるようになります。

より詳細な説明, 例示については、「HTMLで出来る事」のページで、改めて記述しています。

テキストの表示
Top page

大見出し
小見出し
小見出し

イメージを別の要素を用いて描画しています。

実際には、section要素やh1, h2 などの見出し要素で、構造を表します。

表示の仕方

表
(テーブル)		 表示の
仕方
CSSで装飾

HTML要素にCSSが組み込まれて「装飾が可能」です。

補助技術との連携, 読み上げ対応など
スクリプトで
罫線を
動的に変更

HTML要素にJavaScriptが組み込まれて「動的な変化が可能」です。


受信用の
ページへ

受信用の
ページへ


受信用の
ページへ

ローカルファイルの選択と送信が可能。一応は制限もあります。

検索やSNS向けの情報付加, SEO対応など

3.HTML言語

HTML言語は、
Webページに使われる
ハイパーテキストを
記述する為の、
マークアップ言語です。

HTMLを言語という視点でみると、 HTML言語はWebページの内容や構造を記述する為のマークアップ言語です。 それで何が出来るかは、「HTMLで出来る事」のページで、改めて記述しています。

マークアップ言語はデータの構造や意味を記述する言語(データ記述言語)であり、手続き的な命令を記述するプログラミング言語とは異なります。一般的な会話では「HTMLはプログラミング言語の一種」と捉えられる事もありますが、文脈に応じた適切な使い分けが望ましいでしょう。

HTMLは、SGMLを元に開発され、 タグの配置を制限してデータを文書全体が階層構造(木構造)として表現され、それがHTMLの基本的なデータモデルとなっています。例えば、<html>要素の中に<head>要素や<body>要素が入り、その中にさらに<title>要素や<p>要素が入るという構造です。

ここでは、タグと要素の違いを厳密には扱わず、「<〇〇>要素」という表現で説明します。

ここでは意図的に「HTML言語」という表現を用いています。 それは単にHTMLとすると、HTMLファイル, HTML文書, HTML言語, htmlという名称の要素などいろいろあるからです。 そしてここでは、HTMLの言語という点について記述したいので、意図的にHTML言語と記しています。 HTMLは Hypertext Markup Language(ハイパー テキスト マークアップ ランゲージ)の略で、 意訳すると 結文書 ( ハイパーテキスト ) 組版 ( マークアップ ) 言語 ( ランゲージ ) となり、これに〇〇言語と付けると変ですが、HTMLを名称と捉えてHTML言語と記したいと思います。

より詳細な説明, 例示については、「HTML言語とは」のページで、改めて記述しています。

言語
人工言語
形式言語
コンピュータ言語
データ記述言語
マークアップ言語HTML

4.HTMLはテキスト

HTMLは、
文字コードで記述された
プレーンテキストのデータです。

HTMLはテキストデータであり、文字コードを使って構成されています。HTMLを「データ」として見ると、その正体はテキストである事が分かります。 HTMLをプレーンテキストとして表示すると、タグもそのまま表示されます。 一方、プレーンテキストをHTMLとして扱うと、ブラウザがHTMLとして解釈しようとする為、タグが省略されているものとして補足されて表示されます。 つまりHTMLは、HTMLとして扱う必要があり、HTMLと解るようにする必要があります。ファイルとして保存する時に拡張子を「.htm」とするなどです。

文章はもちろんの事ですが、同一ファイル内に記述される装飾などのスタイルシートも、動的な変化を記すスクリプトも、文字コードで記されたテキストデータです。

埋め込みや送信に関する記述も、文字コードで記されたテキストデータです。それを解して、別ファイルのデータを埋め込んだりデータを処理したりします。

テキストについてのより詳細な説明, 例示については、「テキストとは」のページで、改めて記述しています。

以下の例では、HTMLが「テキスト」として扱われた時と、「HTML文書」として解釈された時の違いが分かります。

テキストファイル
HTMLファイル
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>テキストファイル - HTML言語を記述したテキストファイル。 - [離珠のHTMLでしぃ！]</title>
  6. </head>
  7. <body>
  8. HTMLを
  9. テキスト文書として
  10. 扱ってみる。
  11. </body>
  12. </html>

主に拡張子は txt です。テキストファイルに保存されていると、中にHTML言語で書かれた文があっても、HTML文書とは扱われません。

この例では、上は<embed src="./htmltext.txt" type="text/plain"> 下は、<embed src="./htmltext.htm" type="text/html"> とテキストファイル, HTMLファイルを埋め込んで提示しています。このファイルの内容は、HTMLです。しかしテキスト文書として扱われて、タグはそのまま表示されています。 また、改行コードもそのまま改行として扱われています。

./htmltext.txt へのリンクはこちらです。テキストファイルなので先にはリンク等がありません。ツールの「戻る」などの機能を使う必要があるので、ご注意下さい。 また、./htmltext.htmは、./htmltext.txtと拡張子が違うだけで中身は一緒です。

  1. <span id="XHSAMPLE10421"></span>
  2. <script>
  3. document.getElementById("XHSAMPLE10421").textContent = "¥u{4F1D}";
  4. </script>

「伝」という文字を例にしますが、シフトJISコードでの文字コードは 9360 で、 UTF16での文字コードは 4F1D で、 UTF8での文字コードは E4BC9D です。(共に16進表記) 4F1D(16進表記)を２進数にしてみると、0100 1111 0001 1101 となり、 E4BC9D(16進表記)を２進数にしてみると、1110 0100 1011 1100 1001 1101 となります。 ビットはこの様にオン・オフで連なったデータが保存されている訳です。

0100
1111
0001
1101
(4F1D)
1110
0100
1011
1100
1001
1101
(E4BC9D)

２進数表記を、オン・オフの図で CSSを用いてイメージしてみました。 UTF16, UTF8 で符号化されていますというお約束事で、 それぞれ「伝」と解釈して処理される訳です。

コンピュータはすべての文字を、最終的には0と1の組み合わせ (ビット) で扱います。例えば「伝」という1文字も、保存される時は数値、さらに2進数で保存されています。

5.HTML文書

HTML文書は、
HTML言語で書かれた
意味と構造を持つ
情報のまとまりです。

HTML文書 とは、HTML言語で書かれていて、意味的・構造的な1つの“まとまり”をいいます。HTML文書は、通常は1つのファイルで保存されますが、文書とファイルは同義ではありません。

では、何故に混同してしまうのか。コンピュータの文書は、ファイルによって扱われている事が多いです。そして、HTML言語はコンピュータ言語です。故にHTML文書はHTMLファイルに保存されているものです。 プログラムがデータを、HTML形式に加工して送信するという方法などもあるので、全てが保存されている訳ではありませんが、それは例外的なものです。 ただしそれは保存状態の話で、HTML文書はHTMLファイルを表す言葉ではなく、構造を表す言葉だと意識しておくと良いでしょう。

尚 HTML言語のタグは省略が可能なものもあるので、ファイル内にタグがなくてもHTML言語としては間違いではありません。 その点は、注意が必要です。

HTML文書のより詳細な説明, 例示については、「HTML文書」のページで、改めて記述しています。

document
html
head
body
meta
title
p
テキスト
テキスト
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>HTMLのサンプル</title>
  6. </head>
  7. <body>
  8. <p>省略のないHTML文書です。</p>
  9. </body>
  10. </html>

省略のないHTML文書の最小構造です。これが 1 つのHTML文書です。

図は、ドキュメントツリーという文書構造図です。

6.関連用語

Webページ

Webページは、
HTTPなどを通じて
提供される
HTML文書です。

Webページ とは、HTML言語で記述された文書であり、通常はインターネット上で公開され、Webブラウザを通じて閲覧される 1 つの情報単位です。HTMLファイルという形で保存されています。 ローカル環境に保存されたHTMLファイルも、Webブラウザで閲覧され、ハイパーテキストとして動作する為、実際にはWebページと同様に扱われる事がありますが、厳密にはインターネット上で提供される文書だけがWebページに含まれます。

複数のWebページが集まったものをWebサイトと呼び、その中でも特に最初に表示される入り口のページをホームページ呼ぶことがあります。ただし日本では、「ホームページ」という語がWebサイト全体を指して使われることも多く、文脈により意味が異なる場合があります。 また、PDFやテキストファイルはWebコンテンツと言います。

Webとは、World Wide Web (ワールド ワイド ウェブ) の略で、インターネット上で提供されているハイパーテキストシステムです。そこから、一般的にインターネットそのものをWebと呼ぶことがあります。

Webページは、HTMLで構成されており、HTMLは国際的な利用を想定した言語です。その為、右から左へ書かれる言語 (アラビア語・ヘブライ語) や、縦書きを使用する日本語など、さまざまな文字方向や言語仕様を考慮した設計になっています。本サイトでは、日本語の横書きを前提に説明しています。

インターネット

インターネットは、
複数のコンピュータ
ネットワークを
相互接続した、
地球規模の
情報通信網の事です。

インターネット は、「インターネットワーク(Internetwork)」が源で、「コンピュータネットワーク間のネットワーク」という意味です。 ネットワーク間のネットワークという、ちょっとごちゃごちゃした感じがしますがそういう意味です。

特に現在では、ARPANETを起源とするTCP/IPネットワーク群を指してインターネットと呼ぶのが一般的です。

そして、そのインターネット上で提供されているハイパーテキストシステムがWebです。

インターネットは開かれた通信網として設計されている為、利用時には安全性への配慮が求められます。 「インターネットの基本設計には、セキュリティ機能は含まれていませんでした。その為、通信内容の暗号化や認証は追加の技術 (HTTPSやVPN) で補っています。」 「インターネット全体を中央集権的に管理する組織は存在しませんが、IPアドレスやドメイン名といった基盤は、ICANNなどの団体によって調整されています。」 と、このように対策は講じられていますが、最も重要なのは、利用者自身が仕組みを理解し、意識的に使う事です。

尚 一般家庭に於いては、通信設備を提供してもらう「回線事業者」と、インターネットへの接続をしてもらう「インターネットサービスプロバイダ(ISP)」との契約によって、利用が可能になります。

HTTPS
「Hypertext Transfer Protocol Secure (ハイパーテキスト・トランスファー・プロトコル・セキュア)」の略で、 より安全(セキュア)に行う為にSSL(暗号化通信)によってセキュリティを高めたHTTP通信の事です。
VPN
「Virtual Private Network (バーチャル・プライベート・ネットワーク)」の略で、 インターネットなどの共用ネットワーク上に、仮想的な専用回線や閉域網を構築し、安全な通信を行う為の技術です。
ICANN
ドメイン名, IPアドレス, プロトコルポート番号およびパラメータ番号 などのインターネット資源 およびDNSルートネームサーバシステムを民間主導でグローバルに調整する目的で設立された民間の非営利法人です。

ユーザーエージェント

ユーザーエージェントは、
利用者が
あるプロトコルに基づいて
データを利用する際に用いる
ソフトウェア
またはハードウェアのこと。

ユーザーエージェント (UA: user agent.)とは、ここでは簡単に言ってブラウザの事です。利用者(user.)の代理(agent.)として、あるプロトコルに基づいてデータを扱うソフトウェアまたはハードウェアを、ユーザーエージェントと言います。

ここでは、HTMLに関して扱っているので、ここでのユーザーエージェントは主にウェブブラウザを指すものとします。ウェブクローラなども該当しますが、それも意識するにはHTMLをそれなりに理解した上での事と考えて想定外としています。 あくまでここでの扱いという事であり、知識としてユーザーエージェントの意味を学ぶのなら、改めて調べて頂く事をお薦めします。

重要なのは、利用者がHTMLデータを直接見るのではなく、代理としてユーザーエージェント(ウェブブラウザ) を通じてその内容に触れる(データを見る)という点です。 つまり閲覧者にどう見せるかと著者が考える場合、代理のユーザーエージェントがどう解釈してどう表現するかを意識する必要があるという事です。