HTML講座 - 省略

省略

今回は、HTML文書は一部のタグを省略できるという話です。なるべく省略しないほうが見やすくていいですが、他人の書いたHTMLを読めるようになる必要があるという点と前回のiframe要素のsrcdoc属性のような場合は省略してもいいだろうということから、今回解説します。

文書の大枠

HTML文書では、文書の大枠の構造は決まっています。「まずhtml要素があり、その中にhead要素とbody要素がある」という形です。

だから、例えば次のようになっていたとします。


<!doctype html>
<head>…</head>
<body>…</body>

全体が<html>～</html>で囲まれていません。しかし、HTMLは全体がhtml要素で囲まれていなければいけませんから、html要素を補うのは容易です。したがって、htmlタグは省略可能です。注意すべきなのは「html要素は確かに存在する」ということです。見えないだけです。

要するに、これはこのようにhtmlタグを補うことができます。


<!doctype html>
<html>
  <head>…</head>
  <body>…</body>
</html>

また、headタグも同様に補うことができます。例えば、次のような場合です。


<!doctype html>
<title>タイトル</title>
<body>…</body>

これは、次のようにタグを補うことができますね。


<!doctype html>
<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>…</body>
</html>

さらに、同様にbodyタグも省略できます。つまり、こういうことです。


<!doctype html>
<title>タイトル</title>
<p>文章</p>

これは、このようにタグが補われるでしょう。


<!doctype html>
<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
    <p>文章</p>
  </body>
</html>

もとの文書ではtitleタグとp要素が並んでいるだけなのに適切にhead,bodyの境目が定められるのは、title要素はhead要素内にしか現れず、p要素はbody要素内にしか現れないからです。

そこで注意すべきなのはコメントです。

実はまだコメントの解説をしていなかったのでここで紹介します。コメントは、次のような書式で書かれるものです。


<!-- 中身 -->

この中身は無視されます。つまり。HTMLを書くときのメモとして使うことが可能です。例えば、簡単な例ですが次のような感じです。


<body>
  <!-- 本文ここから -->
  …
  <!-- ここまで -->
</body>

この例は全く意味が無いコメントですが、使い道はいろいろあります。また、中身が改行していたりしても構いません。

それで、このコメントになぜ注意すべきなのかというと、つぎのような場合があるからです。


<!doctype html>
<title>タイトル</title>
<!-- コメント -->
<p>文章</p>

ちょうどhead要素とbody要素の境の位置にコメントがあります。こうなると、コメントがhead要素とbody要素のどちらに入るのか、もしくはどちらにも入らずに間の位置にあるのか、タグが省略されていては区別がつきません。したがって、ここにコメントを置きたい場合はタグを省略してはいけないことになっています。

終了タグが省略可能な要素

さて、html要素・head要素・body要素などは、「必ずある」ものだから、全部省略することが可能でした。

ところが、その他の要素は必ずあるということはないので、少なくとも開始タグくらいは必要になります。しかし、終了タグが省略できる要素はいくつかあります。それを紹介します。

まず最初はli要素です。li要素はul要素の中などで使われるもので、ul要素の中にはli要素しか入りません。また、li要素の中にli要素が入ることもないので、次のような省略が可能です。


<ul>
  <li>aaa
  <li>bbb
</ul>

見ての通り、終了タグが省略されていますが、これは次のような感じに補うことができます。


<ul>
  <li>aaa</li>
  <li>bbb</li>
</ul>

また、dl要素の中のdt・dd要素や、option要素・optgroup要素にも同じことがいえます。li要素と同様に省略可能です。

また、よく目にするのがp要素の終了タグの省略です。

これは、p要素は段落を表すのでいくつも並ぶことが多いことからよく目にします。

p要素の中にはフレージング・コンテンツしか入らないので、そうではない要素の開始タグが出現したら、そこでp要素は終了すると判断することができます。

もっとも単純な例はp要素が並ぶ場合ですね。


<p>段落1<p>段落2<p>段落3</p>

こうなっている場合、p要素の中にp要素はないらないので、次のように終了タグを補えます。


<p>段落1</p><p>段落2</p><p>段落3</p>

他に、section要素やarticle要素など、あるいは見出しとかtable要素とかなど、いろいろな要素が続く場合に省略が可能です。まあ適当に判断しましょう。

次に、ruby要素の中のrt要素やrp要素は非常に書くタグが多くて大変ですが、これらが連続している場合、及びruby要素の最後の子の場合のみ終了タグを省略できます。つまり、例えば次のようなルビをふるとします。


<ruby>漢<rp>（</rp><rt>かん</rt><rp>）</rp>字<rp>（</rp><rt>じ</rt><rp>）</rp></ruby>

このうち目立っている終了タグは省略可能なので、次のようにできます。


<ruby>漢<rp>（<rt>かん<rp>）</rp>字<rp>（<rt>じ<rp>）</ruby>

このように書くと少しすっきりしました。「字」の前の</rp>が省略できないのは、それがないと「字」がrp要素の中なのか外なのか分からなくなるからです。

他に、thead要素・tfoot要素の終了タグも省略できる場合があります。td・thも同様です。

iframe要素

さて前回、iframe要素のsrcdoc属性を省略しました。特にseemless属性、sandbox属性と一緒に使うと安全性が高まるので有用ということでした。

ここで、srcdoc属性の中にはHTML文書をまるごと書くのですが、全部書くのは大変です。そこでこの省略が使えるのです。

例えば掲示板の書き込みを高めるためにiframe要素を使う場合、せいぜいp要素くらいしか使われません。

また、seemless属性を使う場合、親のドキュメントと同化するためタイトル情報も必要ありません。したがって、title要素は省略できます。

すなわち、書くのはこれだけで事足ります。


<p>内容

これは、今までに紹介した省略規則によって次のようにタグが補完されます。


<html>
  <head>
  </head>
  <body>
    <p>内容</p>
  </body>
</html>