ウェブサイトの“書き方”③~HTMLタグの使い方

June 4th,2015
HTMLタグを“書く”
HTML“タグ”とは?
“タグ(tag)”は本来は荷札やふせんといった意味をもつ単語です。
HTML“タグ”はHTML文書をマークアップするのに使用するいわゆる“目印”です。
この“目印”にはそれぞれ意味が決められていてタグ“目印”を付けることによってその部分の文書構造上の役割や機能を指定します。
<p>マンゴーが美味しい</p>
これはHTMLタグでマークアップされた文章です。
<p>~</p>”は“段落”を表すタグです。文章をこのタグで囲むことでこの部分が“段落である”ということを表すことができます。
それではHTMLタグの形について説明していきます。
まず、“<p>”を“開始タグ”、“/(スラッシュ)”が入った“</p>”を“終了タグ”と呼びます。この2つがタグです。
タグに囲まれた部分は“内容”と呼びます。
これらを全部合わせて“要素”と呼びます。
要素”の中には次の例のように“終了タグ”を持たないものもあります。
この場合“内容”は“”であるといいます。
<img src="sample.png" alt="サンプル画像">
<img>”は画像の埋め込みを表すタグで“終了タグ”を持ちません。
<img>”だけでは何の画像を埋め込むかがわかりません。
なので“属性”で画像ファイルを指定します。
属性”は役割や機能を細かく指定します。
ほとんどの場合“属性”にはその働きを定める“属性値”を指定する必要があります。
属性”は半角スペースで区切ることで複数指定することができます。
上の“<img>”の場合は“src”が“属性”で、“画像ファイルの指定”という意味があり、それに続く“属性値”、“sample.png”で画像のファイル名を指定しています。
半角スペースを挟んで、“alt”という“代替テキストの指定”という意味の“属性”、“サンプル画像”という指定される代替テキストを"属性値"で定めています。
HTMLタグにはそれぞれ指定することができる“属性”が決められていてなんでも指定できるというわけではありません。
また、必ず指定しなければならない“必須属性”とオプションで必要に応じて指定する“任意属性”があります。
<img>”では“src”は“必須属性”、“alt”は“任意属性”です。
HTMLタグは半角英数字で記述します。
大文字と小文字は区別されないので以下の書き方はすべて認められています。
全部大文字
<IMG SRC="sample.png" ALT="サンプル画像">
全部小文字
<img src="sample.png" alt="サンプル画像">
混合
<Img Src="sample.png" Alt="サンプル画像">
以前は大文字でそろえられることが多かったですが、近年では小文字でそろえるのがトレンドのようです。
HTML文書のひな形
ウェブページ、すなわちHTML文書はこのHTMLタグを組み合わせて作られています。
下は前回書いたHTML文書です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文書のタイトル</title>
</head>
<body>

文書の内容

</body>
</html>
これがHTML文書のひな形となります。
一つ一つ分解してその役割を説明していきます。
<!DOCTYPE html>
は“DOCTYPE宣言”といい、文書の一番最初に必ず記述します。
DOCTYPE宣言”で文書がHTMLであり続くHTML文書(HTMLソース)がどのバージョンに従って書かれているのかを宣言します。
この宣言にしたがってブラウザはどのようにこのHTML文書を解釈、表示するかを認識します。

上の“DOCTYPE宣言”ではこのHTML文書がHTML5で作成されたものであることを示しています。
<html lang="ja">
<head>
文書のメタデータ
</head>
<body>
文書の内容
</body>
</html>
<html>~</html>”はHTML文書の“ルート要素”、最上位に位置する要素です。“DOCTYPE宣言”以外のすべてをこの中に書きます。
上では“属性”でこのHTML文書は日本語(言語コード“ja”)で書かれていると示しています。
<html>~</html>”の中には“<head>~</head>”と“<body>~</body>”が入ります。
<head>~</head>”はHTML文書の“メタデータ”を表します。“メタデータ”は簡単に言うとブラウザに向けたこの文書についての様々な情報です。
なので、“<head>~</head>”内の内容はウェブページをブラウザで開いた時に画面には表示されません。
<body>~</body>”がウェブページの本体となる部分で実際にブラウザで開いたときに表示されます。
ウェブページのコンテンツとなる部分はここに書いていきます。
<title>文書のタイトル</title>
はこの文書のタイトルを示します。
ここで指定したタイトルはブラウザのタイトルバーに表示されたり、ブックマークに登録した時の名前や検索エンジンの検索結果として使われたりします。
<meta charset="UTF-8">
はこの文書の文字エンコーディングが“UTF-8”であることを示しています。
文字エンコーディングはその文書をファイルとして保存したときの文字エンコーディングを指定しないとブラウザでそのウェブページを開いたときに文字化けしてしまいます。
HTMLタグは100種類以上あってこれを組み合わせてHTML文書、ウェブページを作ります。
次の項ではHTMLタグを書いて実際にウェブページを作っていきます。
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク