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

HTML言語とは

1.かんたんな説明

HTML（エイチ ティー エム エル）は、
ことばのルール（言語）のひとつです。

HTML （エイチ ティー エム エル）は、 「ことばのルール（言語）」のひとつです。 でも、この「言語」は、人と人とが話すための言葉ではなく、コンピューターに「ここは見出しだよ」「ここに画像を出してね」と伝えるためのことばです。

この章では、「HTMLって、どうして“言語”ってよばれているんだろう？」ということについて、お話しします。 たとえば、

  • 「コンピューターが読めるように、ルールにそって書かれている」
  • 「何かの命令ではなくて、情報をわかりやすく書き表すためのもの」
  • 「人が読みやすく、コンピューターも理解できるようになっている」

というようなところが、「言語」とよばれる理由です。

そしてこの「HTML言語」は、ほかの“コンピューターの言語”たちと、すこしずつちがっています。プログラムを書くための言語でもないし、計算をすることもできません。けれど、ページの中身をつたえるための、たいせつな役わりをもっています。

ここでは、そんな「HTMLをことばとして見るとどうなるか？」という視点で、いろいろな言語とのちがいや共通点を、やさしく見ていきます。

2.HTML言語

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

HTMLを言語という視点でみると、 HTML言語はWebページの内容や構造を記述する為のマークアップ言語の１つです。

HTMLは、SGML（ Standard Generalized Markup Language ） という文書記述のための上位言語を基に設計され、科学論文などの構造記述を目的とした思想を継いでいます。タグの配置に制約があり、データを木構造として扱うモデルになっている点もその設計の特徴です。現在の標準仕様は、W3C勧告のHTML5を経て、WHATWG（Web Hypertext Application Technology Working Group）によるHTML Living Standardが主流となっています。

SGML (エス ジー エム エル)とは、Standard Generalized Markup Language(スタンダード ジェネラライズド マークアップ ランゲージ) の略で、マニュアルなどの文書の為のマークアップ言語の１つです。文書の構造やデータの意味などを記述等ができる言語の名称です。標準一般化されたマークアップ言語と訳せます。文書の表示に関しては、スタイルシート言語にて記述して表示します。ISOで標準化しています。( ISO : アイ エス オー / International Organization for Standardization : インターナショナル オーガニゼーション フォー スタンダーディゼーション は、工業や科学技術に関する国際規格を策定する非政府機関です。)

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

HTML全般については、「HTMLとは」で記述しています。「HTMLで出来る事」というページもあります。

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

JSON

スタイルシート言語

CSS

プログラミング言語
汎用プログラミング言語
スクリプト言語

JavaScript

ドメイン固有言語
テンプレートエンジン

Pug

Sass

ハードウェア記述言語

VHDL

手話

日本手話

日本語対応手話

自然言語

日本語

英語

手話は自然言語に近いとされる場合もありますが、ここでは人工言語として扱います。

3.マークアップ言語

マークアップ言語は、
データ中に
特定の記法を用いて
何らかの情報を
埋め込む為の言語です。

マークアップ言語 (Markup Language)は、文書内の構造や意味を示すための記法（＝マークアップ）を持つ言語で、データ記述言語の１つです。意訳すると「 組版 ( マークアップ ) 」指定の為の「 言語 ( ランゲージ ) 」となると思います。

HTMLでは、タグを用いて、文の見出し, 段落, リスト, リンクなどを明示的に区切ることで、文書の意味と構造を機械的に認識できるようにしています。

HTMLの「要素」に関しては、「HTMLの要素」で記述しています。

  1. <h1>マークアップ言語</h1><p><dfn title="Markup Language">マークアップ言語</dfn>とは、データ中に特定の記法を用いて何らかの情報を埋め込む為の言語です。</p>

<h1>は、h1要素開始タグで<h1>要素の開始を表します。</h1>は、h1要素終了タグで<h1>要素の終了を表します。<p>は、p要素開始タグで<p>要素の開始を表します。</p>は、p要素終了タグで<p>要素の終了を表します。<dfn>は、dfn要素開始タグで<dfn>要素の開始を表します。</dfn>は、dfn要素終了タグで<dfn>要素の終了を表します。

4.データ記述言語

データ記述言語は、
コンピュータにおいて
扱うデータを
記述する為の言語です。

データ記述言語 (Data description language)は、コンピュータ言語の１つです。コンピュータにおいて扱うデータを記述する為の言語です。意訳すると「 情報 ( データ ) 」記述の為の「 言語 ( ランゲージ ) 」となると思います。

HTMLのマークアップは、「表示の命令」ではなく、構造化されたデータの記述を行うものです。この点でHTMLは、データ記述言語（Data Description Language, DDL）にも位置づけられます。 HTMLの構文は、機械処理に適した形式で文書情報を記述するため、データの意味論的構造を担保する役割を持っています。

HTMLを構成する元である「要素」に関しては、「HTMLの要素」で記述しています。

見出し データ記述言語
段落 用語 データ記述言語
テキスト とは、コンピュータにおいて扱うデータを記述する為の言語です。
  1. <h3>データ記述言語</h3>
  2. <p><dfn>データ記述言語</dfn>とは、コンピュータにおいて扱うデータを記述する為の言語です。</p>

<h3>で<h3>要素の開始を表して、</h3>で<h3>要素の終了を表し、<h3>要素で「データ記述言語」というデータが見出しである事を表します。

<p>で<p>要素の開始を表して、</p>で<p>要素の終了を表し、<p>要素で「データ記述言語とは、コンピュータにおいて扱うデータを記述する為の言語です。」というデータが段落である事を表します。

<dfn>で<dfn>要素の開始を表して、</dfn>で<dfn>要素の終了を表し、<dfn>要素で「データ記述言語」というデータが用語である事を表します。そして親要素である<p>要素のデータは用語の定義である事を表します。

データ記述言語

データ記述言語 とは、コンピュータにおいて扱うデータを記述する為の言語です。

5.コンピュータ言語

コンピュータ言語は、
コンピュータにおいて
用いられる
言語の総称です。

コンピュータ言語は、プログラミング言語と同じ意味で使われる事があります。 一般的に使うにはどちらでもそれほど問題にならないでしょうが、一応知識としては、プログラミング言語はコンピュータ言語の内の 1つの種類という事は忘れない様に。データ記述言語やスタイルシート言語などの種類もあります。

コンピュータ言語（コンピュータげんご）とは、コンピュータにおいて用いられる言語の総称である。一般に人工言語で、もっぱら形式言語である（親しみやすさなどの目的で、自然言語風にデザインされることもある）。
コンピュータ言語 - Wikipedia 
=====
コンピュータ言語
=====
コンピュータ言語とは、
コンピュータにおいて
用いられる
言語の総称です。

一般に人工言語で、
もっぱら形式言語です。

人はこの様に記述してあると、「コンピュータ言語」が見出しだと見当を付けます。しかしコンピュータには判りません。人はこの様に文章の間が空いていると、段落が分かれているとも判断できますがコンピュータには判りません。
HTML言語では、タグ(tag)と呼ばれる表記を用いて、どのデータが見出しで、どのデータが段落としてまとまっているかコンピュータに判る様に表します。

  1. <h3>コンピュータ言語</h3>
  2. <p>コンピュータ言語とは、
  3. コンピュータにおいて
  4. 用いられる
  5. 言語の総称です。</p>
  6. <p>一般に人工言語で、
  7. もっぱら形式言語です。</p>

上記のプレーンテキストを、HTMLで書き換えた物です。

人が見るだけならプレーンテキストで充分な訳ですが、コンピュータによるデータの扱いを意識するとコンピュータが解る言語が必要になる訳です。ただこのままだと、逆に人が見ても分かりにくいだけですが。

コンピュータ言語

コンピュータ言語とは、 コンピュータにおいて 用いられる 言語の総称です。

一般に人工言語で、 もっぱら形式言語です。

コンピュータ言語

コンピュータ言語とは、 コンピュータにおいて 用いられる 言語の総称です。

一般に人工言語で、 もっぱら形式言語です。

  1. h3, p {
  2. font-size: 1.0em;
  3. font-weight: normal;
  4. font-family: monospace, monospace;
  5. white-space: pre;
  6. }
  7. h3 {
  8. margin: 0;
  9. padding-left: 0.5em;
  10. text-indent: -0.5em;
  11. }
  12. p {
  13. margin: 0 0 1em 0;
  14. }
  15. h3::before, h3::after {
  16. content: '=====';
  17. display: block;
  18. }

上記のHTMLを、CSSを用いて意図的にプレーンテキスト風に装飾した物です。

コンピュータ言語

コンピュータ言語とは、 コンピュータにおいて 用いられる 言語の総称です。

一般に人工言語で、 もっぱら形式言語です。

  1. * {
  2. display: inline;
  3. margin: 0;
  4. padding: 0;
  5. font-size: 1.0em;
  6. font-weight: normal;
  7. font-family: monospace, monospace;
  8. white-space: pre;
  9. }

おまけで上記のHTMLを、CSSを用いて意図的に要素の既定値を省くように指定したものです。要素でデータの意味だけ表し、装飾の既定値はなしとして処理すると、こんな感じになります。

6.プログラミング言語

プログラミング言語は、
コンピュータプログラムという、
コンピュータに対する命令
(CPUが処理する操作)を
記述するための形式言語です。

プログラミング言語 (Programming language.)は、コンピュータに命令を与え、演算・制御・繰り返しといった手続き的処理を記述するための言語で、コンピュータ言語の１つです。コンピュータプログラムという、コンピュータに対する命令(CPUが処理する操作)を記述する為の形式言語です。

HTMLにはそうした機能はなく、文書の記述のみを目的としています。 つまり、HTMLはプログラミング言語ではありません。
ただし、現代のWebページでは、HTMLと組み合わせてCSS（スタイルシート言語）やJavaScript（スクリプト言語）を用いることで、動的で対話的な表現が可能になります。 こうした構成が、「HTML＝Webの言語」という印象を強めています。

「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」を直訳すれば「結びつけられた文書構造のための記述言語」とも言えます。 このように、HTMLは構造を記述するための言語であり、命令や処理を記述する言語ではないということが、その名称からもわかります。

一般の方にはコンピュータ言語もプログラミング言語も同じでしょうから、「HTMLはプログラミング言語の１つ」と理解して頂いても差し支えないでしょう。

7.スタイルシート言語

スタイルシート言語は、
マークアップ言語で
書かれた文書の
スタイルを指定する
為の言語です。

スタイルシート言語 (Style sheet language.)は、コンピュータ言語の１つです。マークアップ言語で書かれた文書のスタイルを指定する為の言語です。

HTMLに関わるスタイルシート言語には、CSSがあります。
CSSに関しては、「離珠のCSSでしぃ！」で記述しています。