HTML 【 タグ等の省略 】 ~ 省略可能なタグや引用符

word on billboard

HTML要素には、もともと終了タグのない要素(<br>など)もありますが、終了タグがあるけれど省略しても良い要素や、開始タグと終了タグの両方を省略できる要素もあります。
また、要素以外にも、属性値の引用符を省略できる場合や、属性値そのものを省略できる場合もあります。
今回は、このような、省略可能なものについてにまとめたいと思います。

目次

1.終了タグを省略できる要素
2.開始タグと終了タグの両方を省略できる要素
3.引用符を省略できる属性値
4.値を省略できるBoolean属性

1.終了タグを省略できる要素

要素 概要 省略の条件 HTML5の
新要素
<li> 箇条書きのリスト ●直後に他の<li>が続いている場合
●親要素(<ul> <ol>)内に、もうそれ以降コンテンツが無い場合
<dt> 記述・説明リストの見出し ●直後に別の<dt>または<dd>が続く場合
<dd> 記述・説明リストの見出し ●直後に別の<dd>または<dt>が続く場合
●親要素(<dl>)内に、もうそれ以降コンテンツが無い場合
<p> 段落 ●直後に、address, article, aside, blockquote, dir, div, dl, fieldset, footer, form, h1〜h6, header, hgroup, hr, main, menu, nav, ol, p, pre, section, table, ul が続く場合
●<a>以外の親要素のとき、親要素にもうそれ以降コンテンツがない場合
<rt> 段落 ●直後に<rt>または<rp>が続いている場合
●親要素(<ruby>)内に、もうそれ以降コンテンツが無い場合
<rp> ルビ非対応の代替 ●直後に<rp>または<rt>が続いている場合
●親要素(<ruby>)内に、もうそれ以降コンテンツが無い場合
<optgroup> セレクトボックスのグループ化 ●直後に他の<optgroup>が続いている場合
●親要素(<select>)内に、もうそれ以降コンテンツが無い場合
<option> セレクトボックスの選択肢 ●直後に他の<option>か<optgroup>が続いている場合
●親要素(<select>)内に、もうそれ以降コンテンツが無い場合
<tr> 表の行 ●直後に他の<tr>が続いている場合
●親要素(<table>または<thead><tbody><tfoot>)内に、もうそれ以降コンテンツが無い場合
<td> 表のセル ●直後に他の<td>か<th>が続いている場合
●親要素(<tr>)内に、もうそれ以降コンテンツが無い場合
<th> 表の見出しセル ●直後に他の<th>か<td>が続いている場合
●親要素(<tr>)内に、もうそれ以降コンテンツが無い場合
<thead> 表のヘッダ ●直後に<tbody>か<tfoot>が続いている場合
<tfoot> 表のフッタ ●直後に<tbody>が続いている場合
●親要素(<table>)内に、もうそれ以降コンテンツが無い場合
<tbody> 表の本体 ●直後に他の<tbody>か<tfoot>が続いている場合
●親要素(<table>)内に、もうそれ以降コンテンツが無い場合
<colgroup> 表の列グループ化 ●直後に空白スペースやコメントが続いていない場合

▲目次へ戻る

2.開始タグと終了タグの両方を省略できる要素

要素 概要 省略の条件 HTML5の
新要素
<html> Htmlのルート要素 [開始タグ] ●最初の要素がコメントでない場合
[終了タグ] ●直後にコメントが続いていない場合
<head> Htmlのヘッダ [開始タグ] ●中が空であるか、最初の内容が要素の場合
[終了タグ] ●直後に空白スペースやコメントが続いていない場合
<body> html文書の本体 [開始タグ] ●中が空か、最初の内容が空白スペースやコメントでない場合
(注:最初の要素が<script>か<style>だったら省略不可)
[終了タグ] ●直後にコメントが続いていない場合
<tbody> 表の本体 [開始タグ] ●直前に、終了タグを省略した<tbody>、<thead>、<tfoot>が無く、最初の要素が<tr>である場合(注:中が空の場合は省略不可)
[終了タグ] ●直後に他の<tbody>か<tfoot>が続いている場合
●親要素(<table>)内に、もうそれ以降コンテンツが無い場合
<colgroup> 表の列のグループ化 [開始タグ] ●直前に、終了タグを省略した<colgroup>が無く、最初の要素が<col>である場合(注:中が空の場合は省略不可)
[終了タグ] ●直後に空白スペースやコメントが続いていない場合

▲目次へ戻る

3.引用符を省略できる属性値

引用符とは、 ダブルコーテーション(”) やシングルコーテーション(’)のことです。
属性値は、通常引用符を使って指定しますが、この引用符を省略できる場合があります。
そして、属性値そのものを省略できるBoolean属性というものもあります。

属性値の引用符を省略できる場合

HTML5では、属性値の記述に下記のものが含まれていなければ、引用符を省略できます。

引用符を省略できない属性値の内容

空白スペース 空白スペース
< 小なり記号
> 大なり記号
シングルコーテーション
ダブルコーテーション
` バックコート
= イコール

●OKな例
<input type=”text”>
<input type=’text’>
<input type=text>
<input type=number min=0 max=20 step=5>
<div id=container>
<span class=red>
 
●NGな例
<body class=front-page home main> ←属性値の中に空白スペースがあるため省略不可
<output for=na nb> ←属性値の中に空白スペースがあるため省略不可
<input type=text placeholder=「18<」か「"20"」を記入してください> ←属性値の中に「<」と「"」があるため省略不可
 
属性値を半角スペースで区切って複数指定する場合は要注意です。
placeholder属性で任意のテキストを指定する場合も注意が必要です。

▲目次へ戻る

4.値を省略できるBoolean属性

Boolean(ブーリアン)属性とは、値がtrueかfalseのみの属性のことです。論理属性ともいいます。
この属性は、デフォルト値がfalseなので、通常はtrueに指定する場合にだけ使用します。

例えばchecked属性の場合、
●<input type=”radio” checked>のように、属性値を省略することや、
●<input type=”radio” checked=”checked”>のように、属性名を値として指定することや、
●<input type=”radio” checked=””>のように、空文字列を指定することができます。

Boolean属性

checked フォームのラジオボタンやチェックボックスで使用
disabled フォーム部品を使用不可にする
readonly フォーム部品を読み取り専用にする
required フォーム部品を入力必須にする
autofocus フォーム部品を自動的にフォーカスする
multiple フォーム部品に複数入力を可能にする
novalidate form要素のバリデーションをOFFにする
hidden グローバル属性で、関連性が無いことを示し非表示になる
draggable ドロップ&ドラッグAPIで、ドラッグ元に指定
scoped style要素に使用すると範囲を限定してCSSを適用できる
async script要素に使用して非同期で実行させる
defer script要素に使用して実行の保留をさせる
reversed ol要素で番号リストの番号を大きい順にする
ismap img要素などに使用しサーバサイド・イメージマップを指定する
seamless iframe要素の枠のスタイルを取る
loop メディア要素(video、audio)でループ再生させる
open details要素で最初から内容を表示する

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です