LoginSignup
219
202

More than 5 years have passed since last update.

HTML5 で省略できるタグ

Last updated at Posted at 2012-12-26

の和訳

  1. <html> はその最初の内容がコメントでなければ省略できる
  2. </html> は直後にコメントが続かなければ省略できる
  3. <head> は内容が空か、最初の内容が要素なら省略できる
  4. </head> は直後に空白文字かコメントがなければ省略できる
  5. <body> は内容が空か、最初の内容が空白文字かコメントでなければ省略できるが、最初の要素が meta, link, script, style, template なら省略できない
  6. </body> は直後にコメントが続かなければ省略できる
  7. </li> は直後に li 要素が続くか、親要素にそれ以上内容がなければ省略できる
  8. </dt> は直後に dt, dd 要素が続けば省略できる
  9. </dd> は直後に dt, dd 要素が続くか、親要素にそれ以上内容がなければ省略できる
  10. </p> は直後に address, article, aside, blockquote, details, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, menu, nav, ol, p, pre, section, table, ul 要素が続くか、親要素が a, audio, del, ins, map, noscript, video 以外で親要素にそれ以上内容がなければ省略できる
  11. </rt> は直後に rt, rp 要素が続くか、親要素にそれ以上内容がなければ省略できる
  12. </rp> は直後に rt, rp 要素が続くか、親要素にそれ以上内容がなければ省略できる
  13. </optgroup> は直後に別の optgroup 要素が続くか、親要素にそれ以上内容がなければ省略できる
  14. </option> は直後に option, optgroup 要素が続くか、親要素にそれ以上内容がなければ省略できる
  15. <colgroup> はその最初の内容が col 要素で、直前に終了タグを省略した colgroup 要素がなければ省略できる (ただし空要素の場合省略できない)
  16. </colgroup> は直後に空白文字かコメントがなければ省略できる
  17. </caption> は直後に空白文字かコメントがなければ省略できる
  18. </thead> は直後に tbody, tfoot 要素が続けば省略できる
  19. <tbody> はその最初の内容が tr で、直前に終了タグを省略した tbody, thead, tfoot 要素がなければ省略できる
  20. </tbody> は直後に tbody, tfoot 要素が続くか、親要素にそれ以上内容がなければ省略できる
  21. </tfoot> は親要素にそれ以上内容がなければ省略できる
  22. </tr> は直後に tr 要素が続くか、親要素にそれ以上内容がなければ省略できる
  23. </td> は直後に td, th 要素が続くか、親要素にそれ以上内容がなければ省略できる
  24. </th> は直後に td, th 要素が続くか、親要素にそれ以上内容がなければ省略できる

いずれの場合にも属性を持つ場合、開始タグは省略できない。

下記で valid かチェックできる
http://validator.w3.org/

valid な例

<!DOCTYPE html>
<meta charset="utf-8">
<title>タイトル</title>

<p>段落

<ul>
  <li>A
  <li>B
</ul>

<dl>
  <dt>HTML
  <dd>Hyper Text Markup Language
</dl>

<ruby>
  Ruby
  <rp>(<rt>ルビー<rp>)
</ruby>

<select>
  <optgroup label="one2two">
    <option>1
    <option>2
  <optgroup label="three">
    <option>3
</select>

<table>
  <colgroup span="2">
  <tr>
    <td>セル1
    <td>セル2
</table>
219
202
9

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
219
202