初心者が学ぶ【HTML5の省略タグ】閉じタグは要る？要らない？

HTMLの勉強をしているが、【タグ】によって終了タグ（閉じタグ）を書く場合とない場合がある。

何に必要で何に要らないのか分からなくなる・・・

HTMLのタグにはもともと「終了タグ」が無いのもあれば、省略できるものもあります。

テキストエディタによっては開始タグを打ち込むと、終了タグも続けて書いてくれるので、特に意識して「省略タグ」などを勉強していなかったのですが、

ウェブデザイン技能検定の学科の過去問に「終了タグの省略ができない要素はどれか」という問題があり間違えたので改めて調べてみました。

絶対的に覚えなくてはいけない！という訳では無いかと思いますが、

「要る」「要らない」に捕らわれると停滞してしまうので、

今日は「省略タグ」についてまとめます。

HTMLタグの基本的な書式と名称

まずHTMLの書式と名称について。

• <タグ名>=開始タグ
• </タグ名>=終了タグ（閉じタグ）
• <タグ名>~</タグ名>の全て＝要素

終了タグ（閉じタグとも言います）は「/」スラッシュをタグ名の前に付けます。

(例）

<p>こんにちは。</p>

この終了タグには

• 元々無いもの
• 省略できるもの

があります。

HTMLの閉じタグがもともと無いもの。

元々閉じタグが無い要素は

画像を挿入する際によく使う<img>タグには終了タグがありません。

(例）

<img src="guitar.jpg" alt="ギター">

終了タグが無いタグのことを「空要素」と言います。

上記以外のタグや空要素の意味など詳しくはこちらを参考にしてみてください。

HTMLの省略タグ

終了タグを省略して書くこともできますが、省略するには条件があります。

主にリストやテーブルで省略できることが多そう。

「終了タグを省略できる要素」だけでなく「開始タグと終了タグの両方を省略できる要素」もあります。

条件に関してはこちらのサイトが参考になりました。

まとめ

省略するメリットとしては、

• 読みやすくなる。
• ファイルサイズが小さくなる。

などがあるようです。

私はプログラミング初心者なので、まずはざっくりとでも

• 閉じタグが要るもの
• 閉じタグが無いもの
• 閉じタグが省略できるもの

という風に理解するところから始めました。

ちなみにウェブデザイン技能検定の学科の過去にこのような問題が出ました。

答えは１の「a要素」です。

この問題を初めて見たとき「省略できるタグの存在」を知りました。

現段階では省略する、しないまで突き詰めるほどスキルが無いので、省略に関してはもう少し後にやってみようかと思います。