＃

HTML“タグ”とは？

“タグ(tag)”は本来は荷札やふせんといった意味をもつ単語です。HTML“タグ”はHTML文書をマークアップするのに使用するいわゆる“目印”で、この“目印”をつけていくことでコンピューターにHTML文書のその部分がどのような役割や機能を持つのかを示すことができます。

以下のようなテキストがあるとします。



バナナの果実

バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。



バナナの保存方法

果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。



バナナの栄養素

ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。

人間のユーザーはなんとなくこの文章のどの部分が見出しで、どの部分が段落なのかを知ることができますが、このままではコンピューターはそれを認識することができないので、ブラウザに表示すると単なるテキストの羅列になってしまいます。



バナナの果実

バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。



バナナの保存方法

果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。



バナナの栄養素

ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。

バナナの果実バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。バナナの保存方法果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。バナナの栄養素ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。

そこで、タグを使ってコンピューターにもわかるように“目印”をつけていきます。

そうするとコンピューターもどの部分が見出しで、どの部分が段落なのかを理解できるようになります。また、ブラウザで表示すると見出しは見出し、段落は段落としてブラウザの既定の方法で表示されるようになります。



<h1>バナナの果実</h1>

<p>バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。</p>

<h1>バナナの保存方法</h1>

<p>果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。</p>

<h1>バナナの栄養素</h1>

<p>ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。</p>

バナナの果実

バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。

バナナの保存方法

果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。

バナナの栄養素

ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。

次にHTMLタグの形について説明します。

タグには“開始タグ”と“終了タグ”があり、合わせて“要素”になります。また、これらに囲まれた部分は要素の“内容”と呼ばれます。

“<p>”は段落を表すと定義された要素なので、“<p>”と“</p>”で囲むことでその部分が段落であるということを示すことができます。

また、要素には“属性”があり、その要素の役割を細かく設定することができます。

“<a>”はリンクを表す要素ですが、そのタグの中に“href”という属性を埋め込むことでリンク先を示すことができます。リンク先は属性の“値”によって示します。



<a href="sample.html">リンク</a>

なお、以下の例のように一部の要素は終了タグがなく、内容がありません。



<img src="sample.png" alt="サンプル画像">

“<img>”は画像を表しますが、何かテキストなどを囲むのではなく、タグだけでそこに画像が埋め込まれる場所であることを示します。

要素によって使うことができる属性が決められています。属性は多くの場合任意ですが、要素によっては必ず埋め込まなければならない属性もあります。

また、属性の値はあらかじめ決められたキーワードであったり、URLだったり、文章だったりと属性によってどのような値を持つことができるか決められています。

＃

HTMLの“書き方”

HTMLタグは半角の英字で記述しなければなりません。ただし、属性の値は日本語を含むことができる場合があります。

HTMLタグはほとんどの場合、英字の大文字と小文字が区別されません。なので、以下の3通りの“書き方”はすべて同じものとして扱われます。



大文字

<IMG SRC="sample.png" ALT="サンプル画像">





小文字

<img src="sample.png" alt="サンプル画像">





混合

<Img Src="sample.png" Alt="サンプル画像">

要素は内容として何を含んで良いかが“コンテンツ・モデル”によって決められていて、それ以外のものを中に入れることはできません。例えば、“p”要素はコンテンツ・モデルで“フレージング・コンテンツ”を中に入れて良いとされているので、“フレージング・コンテンツ”である“a”要素は中に入れることができますが、そうでない“h1”要素は入れることができません。

テキストを入力しても良い場所については基本的にどのような文字でも含むことができますが、“<”や“>”などのHTMLで何らかの意味を持っている記号は不用意に含めるとタグと誤認されて正しく表示されない可能性があります。

また、最初の例を見るとわかる通り、HTMLのコードで改行を入れた箇所でも実際にブラウザで表示すると改行が取り除かれた状態で表示されます。

これは、HTML文書を表示する際の“空白文字”の扱いが関係しています。改行やタブ文字、半角スペースは空白文字と呼ばれ、これらの文字はHTMLのコード自体の見た目を整えるために使用されるので、実際にHTML文書をブラウザで表示した時にこれらの文字がレイアウトを乱さないように改行や連続する空白文字は1個の半角スペースに置き換えられます。

＃

HTML文書のひな形

ウェブページはHTMLタグを組み合わせて形づくられています。

以下は前の記事で書いたHTMLのコードです。



<!DOCTYPE html>

<html lang="ja">


<head>


<meta charset="UTF-8">

<title>文書のタイトル</title>


</head>

<body>




文書の内容




</body>


</html>

一つ一つ分解してその役割を説明していきます。

以下のコードは“DOCTYPE宣言”です。



<!DOCTYPE html>

DOCTYPE宣言はその文書がHTML5で作成されたものであることをブラウザに示すために文書の先頭に記述する宣言です。

HTML文書を書く時にはまず冒頭にこのDOCTYPE宣言を書きます。

次に、“<html>”は“ルート要素”で、例えるならHTML文書の“土台”となる要素です。



<html lang="ja">





</html>

DOCTYPE宣言以外は“<html>”と“</html>”の間に入れます。

なお、必須ではありませんが、“<html lang="ja">”と属性を使って記述されている言語を示すことが推奨されます。“lang”は文書が書かれている言語を示す属性で、“ja”はそれが日本語であるということを示す言語コードです。

“<html>”と“</html>”の間には“<head>”~“</head>”と“<body>”~“</body>”が順番に入ります。

“<head>”は“ヘッダー要素”と呼ばれるもので、ブラウザが見るためのメタデータが入ります。



<head>





</head>

“<head>”~“</head>”の間に最低限入れるべきものは以下の2つのコードです。

一つ目は文書の文字エンコーディングを示す以下のコードです。“<meta>”はメタデータを表す要素です。



<meta charset="UTF-8">

このコードはこのHTML文書の文字エンコーディングが“UTF-8”であるということをブラウザに示します。前の記事でHTMLファイルを保存するときの文字エンコーディングに“UTF-8”を選択しましたが、この時正しく選択できていなかった場合はブラウザで表示したときに文字化けします。

2つ目はウェブページのタイトルを表す以下のコードです。



<title>文書のタイトル</title>

“<title>”は文書のタイトルを示す要素で、“<title>”と“</title>”の間のテキストが文書のタイトルとして使用されます。文書のタイトルはブラウザのタブに表示されたり、検索エンジンの検索結果にウェブページが表示されたときにウェブページのタイトルとして表示されます。

最後に、“<body>”~“</body>”の間には実際にウェブページの内容としてユーザーに表示される内容が入ります。



<body>




文書の内容




</body>

HTMLタグは100種類以上あり、HTMLの仕様書を見ると細かくて理解が難しい定義がたくさん書かれています。しかし、仕様書はブラウザがどのようにHTMLを解釈するべきか決めたものであるので、簡単なウェブページを作るだけであればそこまで深く理解していなくてもタグを調べながら書き並べていくことでウェブページを作ることが可能です。