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

最終更新日:2018年04月02日  (初回投稿日:2013年11月22日)

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

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

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

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

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

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

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

参考: 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を作ってみました

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

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

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

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

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

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

何度も使う<p> <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(ブーリアン)属性」と言われるものは、「値」を省略することもできます。

関連記事
この記事をはてなブックマークに追加

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

テーマ : webサイト作成
ジャンル : コンピュータ

tag : HTML5 タグ省略

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2018/10 | 11
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.