HTMLとは何か?種類やマークアップの仕組みについて

20141015-3HTMLとは、「Hyper Text Markup Language」の略で、Webサイトの作成時に使うマークアップ言語のことです。「W3C」というインターネットで利用する技術の標準化を目指す団体によって、1997年に策定されました。

Hyper Text(ハイパーテキスト)とは、「テキストの機能を超えたテキスト」という意味で、ハイパーテキスト同士の繋がりをハイパーリンクと呼びます。世界中のWebサイトは、ハイパーリンクを通して繋がり合っているわけです。

そして、先ほどHTMLはマークアップ言語と説明しましたが、マークアップとは文章に意味を付けることを指します。テキストデータは、そのままだとコンピュータからは意味を理解することが出来ません。

ですから、マークアップすることで、見出しや段落などの見分けが付くようにするわけです。このように、コンピュータが正しく意味を読み取れるようにマークアップすることで、Webサイトとして成立することになります。

 

HTMLの種類について

一言でHTMLといっても、色々な種類があります。時代と共に常に進化し続けていますから、その時代に合ったバージョンを利用するようにしましょう。以下で、大まかな種類を紹介していきます。

HTML4.01

W3Cによって、1999年に勧告されたHTMLの標準仕様です。主な特徴としては、HTMLで構造的なマークアップを行って、CSSで見た目などを装飾することを推奨している点ですね。それ以前では、テーブルレイアウトなどで表を利用してページをデザインするのが主流でした。

しかし、それだとソースが複雑になってしまうので、ページが重くなったりするなどのデメリットがありました。そこで、デザイン面はCSSを利用することで、HTMLの記述をシンプルにすることが出来たわけです。

後述するバージョンでもHTML4.01がベースとなっているので、マークアップの基本となる大切な言語だといえます。

 

XHTML1.0

2000年に勧告された仕様で、XMLを組み込むことを前提として作られました。HTML4.01をベースとしていますから、似ている部分が多いです。ただ、決まりごとが多くなって、より厳格化したルールが定められています。

主な変更点としては、タグを小文字にすることや終了タグの必須化、属性の省略は不可などといったことがありますね。

 

HTML5

W3Cが2014年の勧告を目指して、策定している新世代のバージョンです。動画や音声、グラフィックなど、今までは複雑なソースが必要だったことが、手軽に利用できるようになります。また、マークアップがシンプルになるので、記述が簡単になるなどのメリットがあります。

かなり自由度の高い表現ができるようになりますから、個性的なWebサイトなども作りやすくなりますね。まだ、対応しているブラウザが少ない状況ですが、これから主流になっていくであろうマークアップ言語です。

 

マークアップが必要な理由とは?

Webサイト内の情報としては、テキストや画像、動画が主なものですよね。それらの情報をコンピュータに認識させるためには、要素(タグ)を使って意味を付ける必要があります。タグを使って、コンテンツに意味を与えることを「マークアップ」といいます。

たとえば、以下のハンバーグのレシピを見てください。

チーズハンバーグのレシピ

簡単にできるチーズハンバーグのレシピはこちらです。

合いびき肉:200g
玉子:1個
玉ねぎ:1/4個
パン粉:1/2cup
塩こしょう:少々
スライスチーズ:2枚
サラダ油:大さじ1/2

お好みでチーズの量を増やすことで、マイルドな仕上がりとなります。

人間の目で見れば、見出しや改行の位置がハッキリしているので、意味を正しく理解できますよね。

しかし、これをそのままWebサイトに表示すると、以下のようになります。

20141015-1

改行が無くなって、すべてが繋がった文章になってしまいました。コンピュータには、このように解釈されてしまうわけです。これだと、どこが重要な個所なのか理解できません。

そして、文章をマークアップしたものが、以下の通りです。

20141015-2

見出しや箇条書き、段落などが分かりやすく表示されていますよね。こうすることで、コンピュータにも文章の意味が正しく理解できるようになるわけです。人間だけでなく、コンピュータにも分かりやすく情報を伝えるために、HTMLは存在しています。

正しく意味付けを行って、質の高いコンテンツを作れるように努力をしましょう。

サブコンテンツ

このページの先頭へ