column

ITコラム

Code Coding Programming Technology Technical Concept

プログラミングノウハウ

2017.01.16

HTML5【 省略タグ 】~省略可能なタグ

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1.もともと終了タグがない要素

要素 概要 HTML5の
新要素
<wbr> 改行する
<hr> 横罫線を引く
<img> 画像を表示する
<col> 表の縦列の属性を指定する
<base> 相対パスの基準URIを指定する
<link> 関連する文書ファイルを指定する
<meta> その文書に関する情報(メタ情報)を指定する
<input> フォームの構成部品(入力欄・ボタン等)を作成する
<keygen> フォーム送信時にキーを発行する
<area> イメージマップの領域を設定する
<param> パラメータを指定する
<embed> プラグインデータを埋め込む
<source> 動画や音声などのURLや種類を指定する
<track> 字幕などのテキストトラックを組み込む

▲目次へ戻る

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

要素 概要 省略の条件 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>である場合(注:中が空の場合は省略不可)
[終了タグ]
 直後に空白スペースやコメントが続いていない場合

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ