【まとめ】HTML5の閉じタグは省略可能!片側だけ記述でエラーは起きない?
この記事からわかること
- HTMLの閉じタグは省略可能かどうか
- void要素とは?
index
[open]
\ アプリをリリースしました /
友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-
posted withアプリーチ
HTMLを記述する時は開始タグと閉じタグでテキストを囲んでマークアップするのが基本です。
しかし中にはimgやbrなど開始タグのみ記述するものもあります。実はそれ以外にも閉じタグを省略できるものがありました。
今回は省略可能なタグとvoid要素とはどのようなものかまとめていきたいと思います。
閉じタグが省略可能な要素
閉じタグに関しての詳細はWHATWGが作成してくれているHTMLの仕様リファレンスに記述されていました。
省略可能なタグ
・html
…html要素内の最初がコメントでない場合は省略可能
・/html
…html要素の直後にコメントがない場合は省略可能
・head
…要素が空の場合、またはhead要素内の最初が要素である場合は省略可能
・/head
…head要素の直後に空白またはコメントが続かない場合は省略可能
・body
…要素が空の場合、またはbody要素内の最初が空白またはコメントでない場合は省略可能
・/body
…
body要素の直後にコメントがない場合は省略可能
・/li
…li要素の直後に別のli要素が続く場合、または親要素にコンテンツがない場合は省略可能
・/p
…直後に address, article, aside, blockquote, details, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, menu, nav, ol, p, pre, section, table, ul 要素が続くか、親要素が a, audio, del, ins, map, noscript, video 以外で親要素にそれ以上内容がなければ省略可能
・/tr
…tr要素の直後に別のtr要素が続く場合、または親要素にこれ以上コンテンツがない場合は省略可能
・/th
…th要素の直後にtdまたはth要素が続く場合、または親要素にこれ以上コンテンツがない場合は省略可能
・/td
…td要素の直後にtdまたはth要素が続く場合、または親要素にこれ以上コンテンツがない場合は省略可能
例1
<!DOCTYPE HTML><title>タイトル</title><p>テキスト
例2
<ul>
<li>リスト
<li>リスト
</ul>
例3
<table>
<tr>
<th>ヘッダー1
<th>ヘッダー2
<tr>
<td>データ1
<td>データ2
</table>
閉じタグを省略することで余分なコードを記述する手間が省けるのでより迅速にコーディングすることができます。また見た目もだいぶスッキリするので可読性も上がります。
ですが見る人にとっては分かりにくかったり、そもそも記述もエディタの機能などで補えるのでそこまで良いものとも思えませんが。。。。
void要素(空要素)とは?
void要素(空要素)とは閉じタグが存在しない要素のことです。存在しないのでvoid要素に閉じタグをつけるのは構文違反になります。
✖️ <img src="" alt=""></img>
◯ <img src="" alt="">
「void」とは日本語で「空所、がらんどう」という意味になります。
void要素
・br
…改行
・img
…画像
・input
…入力要素
・link
…リンク読み込み
・meta
…メタデータ(情報)
etc....
開始タグと閉じタグは基本的に記述するものですが、要素によっては元々なかったり、あるのに省略OKだったりするので注意が必要です。
私も参考書で勉強している時に閉じタグなしのコードを見かけて不思議に思って調べてみました。
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。