HTMLとは?

Updated
2021/8/8 9:41
Author
Jumpei IkegamiJumpei Ikegami
order
1
「HTML」と一言でいっても、主に2通りの使われ方があります。マークアップ言語としてのHTMLを指す場合と、HTMLで書かれたコンテンツを指す場合です。

マークアップ言語とは?

HTMLは、Webページの構造を決めるときに使われる言語です。「言語」というと堅苦しい感じがしますが、「何かの意味を文字で記述するときのルール」くらいに捉えておけばOKです。
エンジニアリング領域で「言語」というと、プログラミング言語が最もポピュラーです。プログラミング言語とは何かについては、次のリファレンスで説明しました。
JavaScriptとは?2021/6/20 6:052021/6/20 6:14
 
しかしHTMLはプログラミング言語ではなく、マークアップ言語と呼ばれる言語に分類されます。マークアップ言語にもいくつか種類がありますが、ほとんどの場合はHTMLだけ知っていれば問題ありません。(たまーにXMLやXHTMLの話題が出ることもありますが。M)重要なのは、JavaScriptなどのプログラミング言語とHTMLとでは役割が異なるということです。
"markup"とは、「値上げ」という意味以外に、「テキスト中に書体などの標識情報を埋め込む」という意味があります。Webサイト上の記事を見てもわかるように、単純な文字の羅列以上の情報を持っています。たとえばページ全体のレイアウトがあり、段落があり、文字の強調や色分けがされています。単純なテキストデータに対して、より複雑な構造や意味を与えていくような行為のことをマークアップと呼びます。特にHTMLは、Webページのようなリッチなドキュメントを記述するために作られました。
逆に、HTMLはプログラミング言語ではないので、「コンピュータが読む作業手順書」のようなものを記述することはできません。1+1を計算したり、文字列を加工したり、データベースに処理の結果を保存したりといった処理をHTMLで記述することは、基本的にはできません。これが、HTMLがプログラミング言語ではない理由です。

コンテンツとしてのHTMLとは?

マークアップ言語であるHTMLは、主にWebページのコンテンツやレイアウトを定義するために使われます。
逆に、あるWebページのコンテンツやレイアウトを定義するためにHTMLという言語で記述されたモノを指して「HTML」と呼ばれることもあります。たとえば次のような記述は、とあるページのHTMLです。
HTML
不等号マークで囲まれた「HTMLタグ」と呼ばれる単位で、Webページのコンテンツやその構成、それぞれのタグに付随する情報を記述していきます。
タグによって作られるHTML上の個々の部品のことを、「要素」と呼んだりします。タグと要素の違いが紛らわしいですが、「タグ」というのはHTMLの書き方の話で、タグを書いたことで生成され実際に表示に使われるものを「要素」と呼びます。たとえば、pタグという記述方法を使うと、文章の段落を意味するp要素を生成することができます。HTMLがChromeなどのWebブラウザに読み込まれると、そのp要素は段落らしく前後に余白をあけた状態で表示されます。

HTMLとCSS/JavaScriptとの関係

現代において、WebページにおけるHTMLはCSS/JavaScriptと一緒に使われることがとても多いです。CSSやJavaScriptの詳しい説明はそれぞれのリファレンスに譲りますが、HTMLがページのコンテンツやレイアウトを決めるのに対し、CSSはページのスタイルを決め、JavaScriptはページ上の動きやデータのやりとりなどページ上にまつわるプログラムを実行します。1つのWebページ上での体験が実現される裏側では、HTML/CSS/JavaScriptがそれぞれの得意分野を活かして協力しているわけです。
もう少し技術的に踏み込んで話すと、HTMLには「CSSやJavaScriptをページ上に呼び出す」という重要な役割があります。どんなWebサイトであっても、最初にWebブラウザに読み込まれるのはHTMLであり、そのページに紐付くCSSやJavaScriptはHTMLから間接的に呼び出されます。たとえば次のようにlinkタグやscriptタグを記述すると、ページ上に外部のCSSファイルやJavaScriptファイルを読み込んで適用させることができます。
HTML
逆に、CSSはすでにあるHTML要素に対して、後からスタイルを適用します。あるページのHTML全体からどの部分にスタイルを当てるのかを、CSSセレクタと呼ばれる要素指定の方法で記述していきます。またJavaScriptから既存のHTML要素を削除したり、新たにHTML要素を生成してある場所に挿入したりすることができます。
HTMLは、WebブラウザがあるWebページの表示方法を知るための最初の手がかりであり、CSSやJavaScriptが動作するための土台のような役割をしています。

HTML5とは?

HTMLについて調べていると、頻繁に「HTML5」という言葉が出てきます。HTML5とは、簡単にいうとマークアップ言語としてのHTMLの中でも「5代目のHTML」を指しています。第5世代移動通信システムを「5G」と呼ぶのと同じですね。
そうはいっても、HTMLに世代があるのかよ、という気持ちになるかと思います。実はHTMLという仕様は、使われ方の変化やセキュリティ上の問題に対応する形で、何度も大きな改善がされてきました。たとえば、HTML5になってから新しく使えるようになったタグがあったり、書き方のルールが若干変わったりしています。
基本的にこのようなHTML自体の仕様変更は、後方互換性に対してとても配慮しながら実施されています。つまり、これまで普通に見ることができていたWebページが突然見られなくなる、という事態が極力起きないようになっています。そのため、利用者である私たちは、あまりHTMLの世代を意識せずに使うことができます。ただし、IEなどの古いWebブラウザでは、一般的によく使われるHTML5の記述であっても意図した通りに表示されないケースがあります。現在はそこまで意識する必要が無いケースも多いですが、ブラウザ間で挙動が異なるケースは稀にあるので注意しましょう。ちなみにCSSやJavaScriptについても、HTMLと同様に、それぞれ世代があり、仕様変更が積み重なっており、ブラウザにおける解釈の違いなどがあります。