HTMLとは
HTML とは HyperText Markup Language の略で、 Web ページを作成する時に使われる言語です。言語というと難しく感じてしまうかもしれませんが Web ページを作成する時に見出しを付けるときはこのように書き、画像を表示するときはこのように書くといった決まりごとと考えてください。ここでは HTML がどのようなものなのかについて解説します。
目次
HTMLとは
HTML とは HyperText Markup Language の略で、 Web ページを作成する時に使われる言語です。 HTML も過去に何度も改訂が行われてきており、2019年6月現在では HTML 5.2 が最新版となっています。
HTML ではタグと呼ばれるものを使ってどこからどこまでが 1 つの段落なのかを示したり、どの部分がクリックされたらリンク先に移動するのかなどを定義していきます。
例として HTML で作成された文書ではなく通常のテキストファイルで次のような文書を作成しました。
USJへ行ってきました。
6月に入りそろそろ梅雨入りしそうな時期。幸いにも天気のいい日曜日に大阪のユニバーサルスタジオへ遊びに行ってきました。
入場後すぐにミニオンのショーを見ることができました。その後、写真撮影も一緒にすることができて子供も喜んでいました。
テキストファイルでは文書の構造を定義したり、画像を挿入することができません。ブラウザではテキストファイル表示することができるので、このテキストファイルをブラウザで表示してみると次のようにテキストファイルに記述したテキストがそのまま表示されます。
HTML を使って作成してみる
それでは同じ内容のものを HTML を使って記述してみましょう。ここでは細かい点はあまり気にされずにこんな風に HTML は使われるということだけ見てください。使用するのは同じテキストエディタですが、作成するファイルの拡張子を .html にしておいてください。今回は report.html というファイル名で作成した文書を保存します。
まず最初に文書が HTML5 を使って作成されたことを宣言するため次の 1 行を先頭に記述します。
<!DOCTYPE html>
USJへ行ってきました。
6月に入りそろそろ梅雨入りしそうな時期。幸いにも天気のいい日曜日に大阪のユニバーサルスタジオへ遊びに行ってきました。
入場後すぐにミニオンのショーを見ることができました。その後、写真撮影も一緒にすることができて子供も喜んでいました。
次に全体を <html> タグと </html> タグで囲います。タグはこのように開始タグと終了タグのようにペアで使用されます(ただし画像を表すタグのように単独で使われるものもあります)。<html> タグから </html> タグの間に記述された文書が HTML の文書となります。
<!DOCTYPE html>
<html>
USJへ行ってきました。
6月に入りそろそろ梅雨入りしそうな時期。幸いにも天気のいい日曜日に大阪のユニバーサルスタジオへ遊びに行ってきました。
入場後すぐにミニオンのショーを見ることができました。その後、写真撮影も一緒にすることができて子供も喜んでいました。
</html>
HTML 文書では大きく分けてヘッダーと本文に分かれます。ヘッダー部分を <head> タグと </head> タグで囲い、文書の本文を <body> タグと </body> タグで囲います。今回ヘッダー部分はないのでタグだけとなります。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
USJへ行ってきました。
6月に入りそろそろ梅雨入りしそうな時期。幸いにも天気のいい日曜日に大阪のユニバーサルスタジオへ遊びに行ってきました。
入場後すぐにミニオンのショーを見ることができました。その後、写真撮影も一緒にすることができて子供も喜んでいました。
</body>
</html>
続いて本文の中の見出しの部分を <h1> タグと </h1> タグで囲います。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>USJへ行ってきました。</h1>
6月に入りそろそろ梅雨入りしそうな時期。幸いにも天気のいい日曜日に大阪のユニバーサルスタジオへ遊びに行ってきました。
入場後すぐにミニオンのショーを見ることができました。その後、写真撮影も一緒にすることができて子供も喜んでいました。
</body>
</html>
最後に本文の中の段落ごとに <p> タグと </p> タグで囲います。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>USJへ行ってきました。</h1>
<p>
6月に入りそろそろ梅雨入りしそうな時期。幸いにも天気のいい日曜日に大阪のユニバーサルスタジオへ遊びに行ってきました。
</p>
<p>
入場後すぐにミニオンのショーを見ることができました。その後、写真撮影も一緒にすることができて子供も喜んでいました。
</p>
</body>
</html>
これで HTML を使って文書を作成することができました。書かれている内容はテキストで書いたものと同じですが、タグを使用することで文書の構造などを明確に定義されています。では作成した HTML 文書をブラウザを使って表示してみます。
見出しとして設定された部分は文字のサイズが少し大きく太字で表示されており、通常の段落とは区別がつくように表示されています。ここでは行いませんが、スタイルシートを設定することで見出しや段落毎にフォントのサイズや色などを設定することができます。
リンクを張ってみる
HTML で作成された文書の場合、本文に記述されたテキストの一部分に対して他の Web ページへのリンクを設定することができます。例として「ユニバーサルスタジオ」の部分に外部のサイトへのリンクを張ってみます。リンクを張る部分を<a> タグと </a> タグで囲います。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>USJへ行ってきました。</h1>
<p>
6月に入りそろそろ梅雨入りしそうな時期。幸いにも天気のいい日曜日に大阪の<a href="https://www.usj.co.jp/">ユニバーサルスタジオ</a>へ遊びに行ってきました。
</p>
<p>
入場後すぐにミニオンのショーを見ることができました。その後、写真撮影も一緒にすることができて子供も喜んでいました。
</p>
</body>
</html>
ではあらためて作成した HTML 文書をブラウザを使って表示してみます。
リンクを設定した部分に下線が表示されました。ではリンクが設定した部分をマウスでクリックしてみます。
リンク先として設定されたユニバーサルスタジオの Web サイトが表示されました。
画像を表示してみる
HTML で作成された文書の場合、簡単に画像を表示することができます。あらかじめ HTML で作成したファイルと同じフォルダに画像を保存しておき、 HTML 文書の中の画像を表示したいところに <img> タグを記述します。(このタグは終了タグがありません)。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>USJへ行ってきました。</h1>
<p>
6月に入りそろそろ梅雨入りしそうな時期。幸いにも天気のいい日曜日に大阪の<a href="https://www.usj.co.jp/">ユニバーサルスタジオ</a>へ遊びに行ってきました。
</p>
<p>
入場後すぐにミニオンのショーを見ることができました。その後、写真撮影も一緒にすることができて子供も喜んでいました。
</p>
<p>
<img src="usj.png">
</p>
</body>
</html>
ではあらためて作成した HTML 文書をブラウザを使って表示してみます。
画像が指定した位置に表示されました。
このように HTML を使って Web ページを記述することで、文書の構造を明確に定義できると同時に Web ページの特徴である他の Web ページへのリンクや画像などを使った表現豊かなページを作成することができるようになります。
-- --
HTML とは何かについて解説しました。
( Written by Tatsuo Ikura )
著者 / TATSUO IKURA
初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。