HTML
Web制作の初心者に向けたHTMLの基礎知識について解説しています

HTMLとは – HTMLの役割を理解しよう

HTMLは「Hypertext Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」の略で、「ハイパーテキスト(Hypertext)」ドキュメントを作るための「マークアップ(Markup)」言語という意味になります。Webページの土台となるファイルを作るためのものです。HTMLの役割を理解するには、その名前の意味を知ることが近道でしょう。

ハイパーテキスト

ハイパーテキストとは、複数の文書(テキストドキュメント)を相互に結び付ける(関連付ける)仕組みのことで、テキストに埋め込まれた文書への参照情報のことをハイパーリンクと言います。ハイパーリンクは、Webページでは下線の付いたテキストなどをクリックすると、その参照先のドキュメントに移動することができる機能で、一般的には単に「リンク」と呼ばれているものです。

HTMLはハイパーリンクよってインターネット上に分散して存在するテキストドキュメントを互いに参照することで関連づけられ、リンクをたどりながら情報を得ることができる仕組みになっています。今では当たり前の機能ですが、ハイパーテキストの仕組みはWebを支える根幹技術の一つといえます。

ハイパーリンクでつながったHTML
Note

ハイパーテキストという仕組みによって、世界中のWebサイトがつながっており、Webサイトが蜘蛛の巣(web)のように見える様子から「World Wide Web(ワールド・ワイド・ウェブ)」呼ばれています。Webは大規模なハイパーテキストのつながりということになります。

マークアップ言語

マークアップとは文章に目印(マーク)をつけることで、HTMLでは、「タグ」というものを使って「文書の構造」に目印を付けていきます。言い換えると「マークアップする」ということは、タグを使ってそのテキストがどのような役割を持つかをコンピュータに示してあげること、ということになります。

HTMLはタグによって文章に目印をつけるためのものであることから「マークアップ言語」と呼ばれています。

Note

HTMLは、テキストがどのような役割を持つかを意味付けすることで、Webページの骨組み(文書構造)を定義するためのものであり、レイアウトや装飾をするためのものではないということです。レイアウトや装飾などWebページの見た目を作るのは「CSS」という別の言語でおこないます。

テキスト情報に意味を与えるマークアップ

テキストに「役割に応じた意味をあたえる」とはどのようなことでしょうか。例えば次のような文章があります。

豆腐とわかめの味噌汁
豆腐とわかめの味噌汁はシンプルでおいしい味噌汁の定番ですね。わかめにもお豆腐にもカルシウムがたっぷりです。
コツは豆腐に火を通し過ぎないことです。
2 人分
5 分
レベル 2
材 料
だし汁:400cc
味噌:大さじ3
絹ごし豆腐:1/2丁
乾燥わかめ:ひとつまみ
刻みねぎ:少々
作り方
鍋にだし汁を入れ火にかけ煮立ったら味噌を溶き入れます。
さいの目に切った豆腐と戻したわかめを入れて、煮立つ直前に火を止めます。
お椀に盛りつけて刻んだねぎをのせたらできあがり。
一覧ページに戻る

この文章を人間が読んだ場合、単語の意味、文法、改行に位置などから、どの部分が見出し(タイトル)でどの部分が箇条書き(リスト)であるのかを判断し情報の意味や文章の役割(構造)が理解できます。しかしコンピュータから見ると、文章の意味や役割、改行も理解できないため、この文章はただのひと続きのテキストの連なりでしかありません。この文章を Webブラウザで見てみると次のように見えます。

テキストの役割に応じて意味付けをし、それをコンピュータに伝えればコンピュータでこの文章を利用することができます。このテキストのこの部分がそれ以下の文章の見出しであるとわかれば、そこが文章の中身を表す重要なキーワードであると判断できるようになるのです。

この文章に構造としての役割、例えば「見出し」「段落」「箇条書き(リスト)」といったものを視覚的に表現すると次のようになります。

文章の構造としての役割

HTMLではこのような意味づけをタグを使っておこないます。タグによって意味付けられてはじめてその情報をコンピュータが利用できるようになるのです。

マークアップする意味

HTMLにはWebページをデザインするための土台となるものであるとともに、その重要な役割として文書の構造をコンピュータに適切な情報を伝えるということです。HTMLを直接読むのは人間ではなく、 Webブラウザなどのコンピュータのソフトウェアです。人間は WebブラウザがHTMLの内容を「表示」した結果を読んでいるにすぎません。そのため、HTMLを使ってどれが見出しでどれが本文でどれが重要な語句かなどの文書の構造をコンピュータにきちんと示す必要があります。

ルールに従って文書の構造を示すように書かれたHTMLは、 Webブラウザの種類やバージョンに関係なく、コンピュータに正しく情報を伝えることができます。それによって Webブラウザに正しく表示されるだけでなく、検索エンジンにも認識されやすくなり、その結果として多くの人がその情報を利用することができるようになるのです。

Note

検索エンジンの検索結果でWebサイトが上位に表示されるように対策することを「検索エンジン最適化」といい、一般的に「SEO(Search Engine Optimization)」対策などと呼ばれています。検索エンジンに理解しやすい正しいマークアップはSEOの効果が期待できるとされています。