HTML要素には、もともと終了タグのない要素（<br>など）もありますが、終了タグがあるけれど省略しても良い要素や、開始タグと終了タグの両方を省略できる要素もあります。
また、要素以外にも、属性値の引用符を省略できる場合や、属性値そのものを省略できる場合もあります。
今回は、このような、省略可能なものについてにまとめたいと思います。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
| 要素 | 概要 | 省略の条件 | 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> | 表の列グループ化 | ●直後に空白スペースやコメントが続いていない場合 |
| 要素 | 概要 | 省略の条件 | HTML5の 新要素 |
|---|---|---|---|
| <html> | Htmlのルート要素 |
[開始タグ] ●最初の要素がコメントでない場合 [終了タグ] ●直後にコメントが続いていない場合 |
|
| <head> | Htmlのヘッダ |
[開始タグ] ●中が空であるか、最初の内容が要素の場合 [終了タグ] ●直後に空白スペースやコメントが続いていない場合 |
|
| <body> | html文書の本体 |
[開始タグ] ●中が空か、最初の内容が空白スペースやコメントでない場合 （注：最初の要素が<script>か<style>だったら省略不可） [終了タグ] ●直後にコメントが続いていない場合 |
|
| <tbody> | 表の本体 |
[開始タグ] ●直前に、終了タグを省略した<tbody>、<thead>、<tfoot>が無く、最初の要素が<tr>である場合（注：中が空の場合は省略不可） [終了タグ] ●直後に他の<tbody>か<tfoot>が続いている場合 ●親要素(<table>)内に、もうそれ以降コンテンツが無い場合 |
|
| <colgroup> | 表の列のグループ化 |
[開始タグ] ●直前に、終了タグを省略した<colgroup>が無く、最初の要素が<col>である場合（注：中が空の場合は省略不可） [終了タグ] ●直後に空白スペースやコメントが続いていない場合 |
引用符とは、 ダブルコーテーション（”） やシングルコーテーション（’）のことです。
属性値は、通常引用符を使って指定しますが、この引用符を省略できる場合があります。
そして、属性値そのものを省略できる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属性で任意のテキストを指定する場合も注意が必要です。
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要素で最初から内容を表示する |
INTERNOUS,inc. All rights reserved.
