HTMLとは

広告

HTMLはHyperText Markup Languageの略で、Webページを作成する時に使用される言語の一つです。HTMLを使用して文書を作成することで、文書の構造を明確にしたり文書の中に画像や動画などを配置することができます。

HTMLの詳しい説明は別のページで詳しく行います。まずここでは文書の構造を明確にするとはどういうことかだけを確認します。下記はHTML文の本文(本文とはブラウザで実際に表示される部分で<body>から</body>の中に記述されています)をテキストと改行だけを使って記述したものです。

構造が不明な文章 

<html>
<head>
<title>サンプル</title>
</head>
<body>

年末年始の営業について<br>
<br>
日頃は格別のお引き立てをいただき厚くお礼申
し上げます。年末年始の営業についてご案内を
させて頂きます。<br>
<br>
本年度の営業は12月26日を持って終了とさせて
頂きます。来年の営業開始は1月5日を予定して
います。<br>

</body>
</html>

実際に上記の文書をブラウザで閲覧すると次のようになります。

p3-1

改行を使って行を分けているため、表示されたものを見ればどの部分が見出しで段落はどこで別れているのかは何となく判断がつきます。

ただこの文書をプログラムなどで読み込み、見出しだけを抜粋しようとしてもうまくいきません。文書のどの部分が見出しなのか書かれている内容だけでは分からないためです。

構造が明確な文書

HTMLでは文書のどの部分がどういった構造なのか明確にする仕組みが用意されています。具体的にはHTMLで定義されているタグと呼ばれるものを使って文書の構造を定義していきます。

構造が明確な文章 

<html>
<head>
<title>サンプル</title>
</head>
<body>

<h1>年末年始の営業について</h1>

<p>
日頃は格別のお引き立てをいただき厚くお礼申
し上げます。年末年始の営業についてご案内を
させて頂きます。
</p>

<p>
本年度の営業は12月26日を持って終了とさせて
頂きます。来年の営業開始は1月5日を予定して
います。
</p>

</body>
</html>

上記では<h1>から</h1>で囲まれた部分がこの文書の大見出しを表し、<p>から</p>で囲まれた部分が一つの段落であることを表しています。この時<h1>や<p>がHTMLで使用するタグです。

HTMLで記述された文書をブラウザが読み込むと、文書内の記述されたタグに従って表示を行います。例えば見出しに設定されたテキストは大きな文字で表示し見出しであることを分かりやすく表示します。

実際に上記の文書をブラウザで閲覧すると次のようになります。

p3-2

構造が明確になっている文書では、ブラウザ側でそれに合わせて表示を行うため見た目上も分かりやすく表示されています。またプログラムなどで文書を読み込んで見出しだけを抽出するということも可能になります。

リンクや画像

HTMLを使うことで文書の任意の箇所に画像を挿入することが可能になります。

画像のデータそのものはバイナリ形式と呼ばれるものなので文書の中に直接画像のデータを記述することはできません。その為、画像を別の場所にファイルとして保存しておき、文書の中で画像を表示したい位置に画像を読み込んで表示するように<img>タグを使って記述します。 

<html>
<head>
<title>サンプル</title>
</head>
<body>

<h1>北海道旅行</h1>

<p>
今年の夏は北海道旅行に行ってきました。次の写真はその時のものです。
</p>

<p>
<img src="./photo.png">
</p>

</body>
</html>

実際にブラウザで見てみると次のように表示されます。

p3-3

このように文書内の任意の位置に外部に用意した画像をファイルを読み込んで表示することができます。

次はリンクについてです。HTMLを使うことで他のWebページへの移動するための目印であるリンクを設定することが可能となります。

文書の内の一部分のテキストや画像などに他のページへのリンクを設定しておくと、Webページを見ている利用者がリンクが設定されたテキストなどをクリックすると設定された他のWebページへ移動することができます。 

<html>
<head>
<title>サンプル</title>
</head>
<body>

<h1>検索サイト</h1>

<p>
よく利用される検索サイトには<a href="http://www.google.co.jp/">Google</a>など
があります。
</p>

</body>
</html>

実際にブラウザで見てみると次のように表示されます。

p3-4

リンクが設定された文字(今回の場合はGoogle)をマウスでクリックすると、リンク先のWebページへ移動します。

p3-5

このようにHTMLを使うことで、テキストを表示するだけではなく画像や動画を一緒に表示したり、他のWebページとリンクを設定することで関連する他のWebページへ簡単にアクセスできるように設定できます。

デザインとスタイルシート

本来のHTMLは文書の構造を明確にすることが主な目的でしたが、Webページの見た目が重視されるに従って見た目を設定するためのタグが多く使われるようになってきました。例えば文書の色であったりフォントの指定も全てHTMLを使って定義していました。

文書の構造に加えて見た目などデザインに関する記述が含まれるようになると、文書のサイズも大きくなりますし可読性も悪くなります。また後からデザインを変更した時、全ての文書に記述された1つ1つの設定を全て書き換えなければならないなどメンテナンス面でも問題がありました。

そこでHTML文書では構造に関する記述だけを行い、デザインに関してはスタイルシートと呼ばれるもので別に管理するようになっています。詳しくは「スタイルシート(CSS)とは」を参照して下さい。

( Written by Tatsuo Ikura )