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

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

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

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

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

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

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

タグの省略のための条件がありますので、エラーにならないためにもご確認ください。
(読めば普通のコトです。イレギュラーな使い方をしていなければ大丈夫そうな。)
(WHATWG の「HTML Living Standard」が原文。訳はあってると思うんだけど…不安な方は原文をご確認ください。笑)

  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>
<keygen>
<area>
<param>
<embed>
<source>
<track>
<command>

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

ただしタグが「/(スラッシュ)」で終わるのは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文書が正しいかどうか、バリデートしてくれるサイトがあります。

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

「Address:」の入力欄にサイトのURLを入れて、Check ボタンを押すだけ。

何か問題箇所があれば、「何行目の、どの要素が、こうだから」と解説まで出してくれて超便利。

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

次回予告

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

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

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

tag : HTML5 タグ省略

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
03 | 2017/04 | 05
- - - - - - 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 - - - - - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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