こんにちは。ヒロユキです。
HTMLには、たくさんのタグが存在します。
これらのタグには「要素」や「属性」といった用語があって、これらを正しく理解しておくとコードの仕組みを理解するのに役立ちます。
マークアップの基礎知識として、タグの用語も知っておきましょう。
この記事に書いてること
マークアップの基礎知識として知っておきたいタグの用語
用語を覚えるのって大変だよね。でも、コードの仕組みを理解できるメリットもあるんだぞ。
タグの用語はコードの記述に迷ったときに検索したり、仕組みを理解するためにも理解しておいたほうがいいのです。
実際のタグやソース画面を見ながらおぼえていきましょう。
開始タグと終了タグ
HTMLは、いろんな種類の「< >（タグ）」が集まって構成されます。
例えば見出しに使う「<h></h>（ｈタグ）」で、タイトルの「つみきのーと」を表現してみます。↓
<h1>つみきのーと</h1>この場合は、hタグで「つみきのーと」を囲みます。
<h1>つみきのーと</h1> ←開始タグ緑色の<h1>が「開始タグ」。
<h1>つみきのーと</h1> ←終了タグ青色の</h1>が「終了タグ」です。「終了タグ」の特徴は「/（スラッシュ）」が付いてることですね。
開始タグと終了タグで、表現したいコンテンツ(!)を囲むのが基本です。
コンテンツ
<h1>つみきのーと</h1> ←コンテンツオレンジ色の文字列（今回は「つみきのーと」）のこと。開始タグと終了タグに囲まれた、文字列の名称。
要素とマークアップ
タグの「要素」とは、「開始タグ＋コンテンツ＋終了タグ」の全てをひっくるめたもののこと。
<h1>つみきのーと</h1> ←要素そして今回のように、コンテンツをタグで囲んで表現することを「マークアップ」と呼びます。
空要素（からようそ）
要素には、</（終了タグ）>がない「空（から）要素」と呼ばれるものがあります。
例えば画像を表現する「<img>（イメージタグ）」には、</img>という終了タグは存在しません。
「photo.png」という画像ファイルを、Webページ上に表現したい場合は↓
<img src="img/photo.png">↑こういった記述になります。終了タグは、いらないんですね。
「hタグ」のように囲むコンテンツが無い要素なので、「からっぽ」の要素という意味の「空要素（からようそ）」と呼ばれます。
終了タグは要素を閉じるから「閉じタグ（とじたぐ）」って呼ぶこともあるぞ。
親要素と子要素
HTMLでは、下記のようにタグを段階的に表記します。
<!DOCTYPE html>
<html lang="ja"> ←１段目
<head> ←２段目
</head>
<body>
<img src="img/photo.png">
<h1>つみきのーと</h1> ←３段目
<p>プログラミングと仲良くなるブログ</p>
</body>
</html> この段階を、一段降りると「子要素」、一段登ると「親要素」となります。
例えば、<html lang=”ja”>の子要素は<head>タグ。
<h1>の親要素は<body>タグといった具合です。
「CSS」を使って何らかの効果をタグに付与する場合、その効果は「親要素→子要素」の順に継承されます。
属性名と属性の値
空要素の場合は、表現方法に「属性名」と「属性の値」を使います。
<img>タグの場合、imgのあとに記述された情報のことを「属性」と呼びます。
<img src="img/photo.png"> ←属性さらに、属性の左端にある「src（ソース）」のことを「属性名」。
<img src="img/photo.png"> ←属性名属性名に割り当てられた情報を、「属性の値」と呼びます。
<img src="img/photo.png"> ←属性の値属性の値は「””（ダブルクォーテーション）」で囲むことが多いみたいだね。
タグの用語を知っておこう まとめ
- <h>→開始タグ
- つみきのーと→コンテンツ
- </h>→終了タグ
タグに付与された効果は、親要素→子要素に継承される。
空要素には、終了タグが存在しない。
属性＝属性名に属性の値を割り当てたもの。
おつかれ様でした。すこし覚える内容が多かったですね。
しかし、今回紹介したタグの用語はごく一部で基本的なものです。
あとは実践の中で、活用しながら覚えていきましょう。
それじゃまた。ヒロユキでした。
「要素」…。「属性」…。なんだかムズかしそう。