programming

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

HTMLとCSSの勉強

 

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

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

 

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

 

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

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

 

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

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

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

 

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

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

<タグ名>コンテンツ(要素の内容)</タグ名>

 

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

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

 

(例)

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

 

この終了タグには

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

があります。

 

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

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

  • <img>
  • <meta>
  • <input>

など

 

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

(例)

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

 

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

 

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

Empty element (空要素) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
Empty element (空要素) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

空要素 とは HTML、SVG、MathML における 要素 のうち、子ノード (子要素およびテキストノード) を持つことができないものを指します。

続きを見る

 

HTMLの省略タグ

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

  • <li>
  • <p>
  • <tr>

など

 

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

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

 

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

HTML5 【 省略タグ 】 ~ 省略可能なタグ | プログラマカレッジ
HTML5 【 省略タグ 】 ~ 省略可能なタグ | プログラマカレッジ

HTML要素は、のように終了タグのない要素もありますが、終了タグがあるけれど省略しても良い要素もあります。 そして、HTML5では、開始タグすら省略できる要素も出てきました。 今回は、HTML要素の開 ...

続きを見る

 

 

まとめ

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

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

などがあるようです。

 

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

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

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

 

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

HTML5.2において、終了タグの省略ができない要素はどれか。以下より1つ選択しなさい。

  1. a要素
  2. p要素
  3. head要素
  4. body要素

 

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

 

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

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

 

-programming
-,

© 2020 スキニノート Powered by AFFINGER5