ほんっとにはじめてのHTML5とCSS3：（ちょっとメモ）HTML5 での省略可能なタグについて

（ちょっとメモ）HTML5 での省略可能なタグについて

最終更新日：2018年04月02日　（初回投稿日：2013年11月22日）

HTMLの要素には、もともと終了タグの無い空要素（ など）もありますが、終了タグはあるけど省略してもOKな要素もあるんです。

HTML5は、それまでの HTML4 や XHTMLとも互換 があるように、柔軟にできていて、
HTML4のように 終了タグの省略 もできるし、
XHTMLのように空要素の タグの最後に「/」をつけても大丈夫。
そして、なんと、HTML5から 開始タグすら省略 できる要素があるんですと。

ということで、今回はこの HTML要素の開始・終了タグの省略を一覧にまとめます。
ついでに、HTML文書のバリデーション（適切かどうかの検証）を行うサイトも貼っておきました。

開始タグ・終了タグを両方省略できる要素は、HTML文書上から要素が無くなるわけじゃなく、書かなくても存在します。（CSSの指定の対象になります）

終了タグ・開始タグを省略可能な要素一覧

一覧表は、3種類に分けています。

終了タグを省略できる要素（<li>など）
開始タグと終了タグ両方を省略できる要素 (これはHTML5から)（<body>など）
終了タグを書いてはいけない要素（空要素）（ など）

タグの省略のための条件があるので、エラーにならないためにもご確認ください。
（読めば普通のコトです。イレギュラーな使い方をしていなければ大丈夫）

参考： HTML Living Standard | WHATWG

	HTML要素	省略のための条件
終了タグ省略	<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>以外の親要素のとき、親要素にもうそれ以降コンテンツがない場合（</a>直前の</p>は省略できないってことですよね）
	<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>	●直後に空白スペースやコメントが続いていない場合
タグ両方省略	<html>	[開始タグ] ●最初の要素がコメントでない場合 [終了タグ] ●直後にコメントが続いていない場合
	<head>	[開始タグ] ●中が空であるか、最初の内容が要素の場合 [終了タグ] ●直後に空白スペースやコメントが続いていない場合
	<body>	[開始タグ] ●中が空か、最初の内容が空白スペースやコメントでない場合（注：最初の要素が<script>か<style>だったら省略不可） [終了タグ] ●直後にコメントが続いていない場合
	<tbody>	[開始タグ] ●直前に、終了タグを省略した<tbody>、<thead>、<tfoot>が無く、最初の要素が<tr>である場合（注：中が空の場合は省略不可） [終了タグ] ●直後に他の<tbody>か<tfoot>が続いている場合 ●親要素(<table>)内に、もうそれ以降コンテンツが無い場合
	<colgroup>	[開始タグ] ●直前に、終了タグを省略した<colgroup>が無く、最初の要素が<col>である場合（注：中が空の場合は省略不可） [終了タグ] ●直後に空白スペースやコメントが続いていない場合

終了タグ不可の要素一覧

	HTML要素	注意点
終了タグ不可（空要素）	<br> <wbr> <hr> <img> <col> <base> <link> <meta> <input> <area> <param> <embed> <source> <track>	終了タグを書いてはいけない。ただしタグが「/（スラッシュ）」で終わるのはOK。例えば<br>なら<br/>や<br />（rと/の間に半角スペース）でもOK

HTML要素

注意点

終了タグ不可（空要素）

終了タグを書いてはいけない。

ただしタグが「/（スラッシュ）」で終わるのはOK。
例えば なら や （rと/の間に半角スペース）でもOK

サンプルHTMLを作ってみました

W3C標準で必須とされているHTML5の記述は、
なんと !DOCTYPE 宣言と <title>要素のみ、だそうです。
↓ これで、HTML5としては必要最低限の記述なんだって。

<!DOCTYPE html>
<title>タイトル</title>

コレだけじゃのっぺらぼうだけど、この下にテキストだけでも、エラーにならないんですね。

省略できるタグを全て省いて、2カラムのサンプルを作ってみました。

クリックで別ウィンドウで開きます。

HTML5に対応したブラウザなら、ちゃんと表示します。
<body>のタグは省略しましたが、<body>に指定したCSSは、ちゃんと効いています。

何度も使う <li> <tr> <th> <td>の終了タグを書かなくて済むと、確かにラク。

ただ、<html> <head> <body>がまったく無いのは、ちょっと落ち着かないかなあ。

特に<html>開始タグ。
言語コード（lang="ja"）を書きたいですからね。
言語コードは、検索エンジン・音声読み上げソフト用でもあるので、SEO対策や、アクセシビリティのためにはずせない。だから<html lang="ja">は必要でしょう。
終了タグ（</html>）は無くても良いけど。

W3Cのバリデートサイト「Markup Validation Service」

作ったHTML文書が正しいかどうか、バリデートしてくれるサービスがW3Cにあります。

クリックで別ウィンドウで開きます。

「Address:」の入力欄にサイトのURLを入れて、Check ボタンを押すだけ。
問題箇所があれば「何行目のどの要素がこうだから」と解説まで出してくれます。

問題が無ければ、このような画面になります。

次回予告

次回は「属性」について、ちょっとメモ。
属性も「引用符（" " とか）」が省略できたりしますので、その件をまとめておきます。
「Boolean（ブーリアン）属性」と言われるものは、「値」を省略することもできます。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2018-04-02（Mon）│
投稿日：2013-11-22（Fri）│
カテゴリ：はじめてのHTML

Pagetop ↑

« next ホーム prev »

コメントの投稿