HTMLタグの書き方
Updated
2021/8/8 9:42
Author
Jumpei Ikegamiorder
2
1つのHTMLドキュメント全体は、次の例のように、様々なHTMLタグを入れ子にしていくことで表現されます。
HTML
個々のタグは、基本的には次のように記述します。
HTML
ちなみに、
<div></div>などのHTMLタグの組があるとき、<div>を開始タグ、</div>を閉じタグと呼びます。
HTMLタグの中身のパターン
例にあるように、それぞれのHTMLタグは内に何かを含めることができます。HTMLタグに含まれる中身のパターンは次の通りです。
- HTMLタグ
- テキスト
- 無し
HTMLタグの種類によって、どんな中身を入れることが多いかは異なります。
HTMLタグを内に含むパターン
たとえば
divタグを見てみると、HTMLタグの1つであるpタグを内に含んでいます。HTML
テキストを内に含むパターン
HTMLは本来ドキュメントを書くためのものです。最終的にはテキストを表示しなければいけません。当然、表示したい生のテキストをHTMLタグに含めることもできます。
HTML
ちなみに、次のようにテキストとHTMLタグが混ざったコンテンツをHTMLタグが含むケースもあります。なお、テキスト中に含めることができるHTMLの要素を、文の行中に含まれるという意味でインライン要素と呼びます。
HTML
中身が無いパターン
HTMLタグの種類によっては、中身を必要としないケースがあります。たとえば、タグの存在自体に意味がある場合や、表示したい内容がタグの属性によって表現されている場合などは、HTMLタグの中身は不要です。上記の例でいうと、
imgタグには中身がありません。HTML
その他にも、
inputタグ（テキストボックスなど）やbrタグ（改行）などには中身が含まれません。HTML
HTMLタグに中身が無いとき、閉じタグ（
</img>など）を書く必要はありません。ちなみに、少し古い記法で、中身の無いタグの末尾にスラッシュ（
/）が書かれていることがあります。基本的にはこのスラッシュは不要です。HTML
HTMLの属性
個々のHTMLタグに情報を持たせる方法として、中身に何かを入れるのではなく、属性に値を与えることができます。たとえば、次の
aタグはリンク先URLをhrefという属性の値として渡しています。HTML
1つのHTMLタグには、複数の属性を持たせることもできます。
HTML
逆に、属性が無いHTMLタグも存在します。
HTML
属性の面倒なところとして、HTMLタグの種類によって付与できる属性が決まっていることがあります。たとえば、
href属性は基本的には「リンク先を指定する」ための属性なので、aタグ以外で使っても意味がありません。HTMLタグの種類とセットで、そのタグに付与できる（あるいは付与すべき）属性を覚える必要があります。