【初心者でもわかる】HTML(HTML5)で閉じタグがいらない要素の一覧

【初心者でもわかる】HTML(HTML5)で閉じタグがいらない要素の一覧

どうも7noteです。HTML(HTML5)で閉じタグの記述がいらないタグがある話。

基本的なタグの書き方として、開始タグと閉じタグの両方を記述するものがあります。
それに対して閉じタグを記述しない・してはいけない要素もあるので解説していきます。

閉じタグを書いてはいけない要素「void要素」と言う

void要素とは?

void 要素elementは、構文としての HTML において、終了タグが存在せず (存在できず) 常に開始タグのみで記述される要素のことです。
↓↓引用元↓↓
https://wiki.suikawiki.org/n/void%E8%A6%81%E7%B4%A0

上記のように閉じタグの存在しない要素の事を「void要素」といいます。

閉じタグのない「void要素」の一覧

  • br
  • hr
  • img
  • input
  • link
  • meta
  • その他(area, base, col, embed, param, source, track, wbr)

※void要素の中でも★は特に頻出するので覚えておきたいもの。

「void要素」の書き方

始めの方にも書いた通り閉じタグを必要としないので、書き方は以下のように書きます。


<br>

<hr>

<img src="aaa.jpg" alt="あああ">

<input type="text" name="">

<link rel="stylesheet" href="style.css" type="text/css">

<meta name="robots" content="noindex,nofollow">

この通り、「p要素」のように閉じタグは書きません。
書いてしまうとエラーになる事もありえるので絶対に書かないようにしましょう!

HTML5では一部タグは閉じタグが省略できるので混同しないよう注意が必要

省略できるタグについて綺麗にまとめられている方がいたので、こちらを参考にするといいかも。
HTML5 で省略できるタグ

まとめ

閉じタグが必要ない要素が存在するのは知っていたけど、それを「void要素」という事は今日まで知らなかった。
HTML5では閉じタグが省略できるものもあるので、混同しないよう注意が必要です!
初心者の方は★がついている6個さえ抑えておけば、普段の作業では迷わないと思います!★の6個が出たら閉じタグは書かないよう意識しましょう。

おそまつ