Цапля

Правила пропуска закрывающих и открывающих тэгов в html5

В каких случаях некоторые тэги могут быть опущены.

Полезная ссылка: Документ на w3.org

Открывающие и закрывающие тэги

Только закрывающие тэги

Элементы, для которых могут быть пропущены открывающие и закрывающие тэги

html

Открывающий тэг может быть опущен, если элемент html не начинается с комментария.


<!DOCTYPE HTML>
<html>
<!-- where is this comment in the DOM? -->
<head>
<title>Когда нельзя</title>
</head>
<body>
<p>Нельзя пропустить открывающий тэг для html.</p>
</body>
</html>
Если открывающий тэг html пропущен и в начале идет комментарий, то эта ситуация неопределённости — где находится комментарий в структуре DOM. Ситуация может пониматься браузером так:

<!DOCTYPE HTML>
<!-- where is this comment in the DOM? -->
<html>
<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>

Закрывающий тэг может быть опущен, если за элементом html не следует сразу комментарий.

head

Открывающий тэг может быть пропущен, если содержимое элемента head начинается с элемента.

Закрывающий тэг может быть пропущен, если следующим за элементом head не идет какой-либо пробельный символ (SPACE (U+0020) — пробел, «tab» (U+0009) — табуляция, «LF» (U+000A) — первод строки, «FF» (U+000C) — конец страницы (?), «CR» (U+000D) — возврат каретки) или комментарий.

body

Открывающий тэг может быть пропущен, если элемент body пуст.

Открывающий тэг может быть пропущен, если содержимое элемента body не начинается с пробельного символа или комментария, кроме случаев, когда body начинается с meta, link, script, style или шаблонные тэги (template elements).

Закрывающий тэг может быть пропущен, если следующим за элементом body не идёт комментарий.

colgroup

Открывающий тэг может пропущен, если сразу внутри элемента colgroup идет элемент col И если элементу colgroup при этом не предшествует другой элемент colgroup, у которого опущен закрывающий тэг. Открывающий тэг для colgroup не может быть опущен, если элемент пуст.

Закрывающий тэг может быть пропущен, если сразу за элементом colgroup не идет какой-либо пробельный символ (SPACE (U+0020) — пробел, «tab» (U+0009) — табуляция, «LF» (U+000A) — первод строки, «FF» (U+000C) — конец страницы (?), «CR» (U+000D) — возврат каретки) или комментарий.

Примечание про пробельные символы в colgroup. Все указанные после открывающего тэга colgroup пробельные символы вместе с элементами col считаются дочерними для элемента colgroup в структуре DOM до начала следующего элемента.

tbody

Открывающий тэг может быть пропущен, если сразу внутри элемента tbody идет элемент tr И если при этом элементу tbody не предшествует элемент tbody, thead, tfoot, для которых был пропущен закрывающий тэг. Открывающий тэг не может быть опущен, если элемент пуст.

Нельзя пропустить открывающий тэг tbody:

<table>
<caption>Таблица примеров съедобных плодов растений</caption>
<colgroup><col><col><col>
<thead>
<tr>
<th>Овощи
<th>Фрукты
<th>Ягоды
<tbody>
</tbody>

Элементы, для которых могут быть пропущены только закрывающие тэги

li

Если сразу за ним следует такой же элемент li.

Если родительский элемент больше ничего не содержит.

dt

Если сразу за ним следует dt или dd.

dd

Если сразу за ним следует dd или dt.

Если родительский элемент больше ничего не содержит.

p

Если сразу за ним следует один из элементов: address, article, aside, blockquote, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, nav, ol, p, pre, section, table, ul.

Если родительский элемент не a И больше не содержит других дочерних элементов.

rb

Если сразу за ним следует один из элементов: rb, rt, rtc, rp.

Если родительский элемент больше ничего не содержит.

rt

Если следующий за ним элемент один из: rb, rt, rp.

Если родительский элемент больше ничего не содержит.

rtc

Если следующий за ним элемент один из: rb, rt, rtc, rp.

Если родительский элемент больше ничего не содержит.

rp

Если следующий за ним элемент один из: rb, rt, rtc, rp.

Если родительский элемент больше ничего не содержит.

optgroup

Если сразу за ним следует тоже элемент optgroup.

Если родительский элемент больше ничего не содержит.

option

Если сразу за ним следует элемент option или optgroup.

Если родительский элемент больше ничего не содержит.

thead

Если сразу за ним следует tbody или tfoot.

tfoot

Если сразу за ним следует tbody.

Если родительский элемент больше ничего не содержит.

tr

Если сразу за ним следует другой элемент tr.

Если родительский элемент больше ничего не содержит.

td

Если сразу за ним следует td или th.

Если родительский элемент больше ничего не содержит.

th

Если сразу за ним следует td или th.

Если родительский элемент больше ничего не содержит.

Два примера

Пример для таблиц.


<table>
<caption>Таблица примеров съедобных плодов растений</caption>
<colgroup><col><col><col>
<thead>
<tr>
<th>Овощи
<th>Фрукты
<th>Ягоды
<tbody>
<tr>
<td>Капуста
<td>Ирга
<td>&#x0020;
<tr>
<td>Лук
<td>
<td>Барбарис
<tr>
<td>&#x0020;
<td>Виноград
<td>Крыжовник
<tr>
<td>&#x0020;
<td>
<td>Черника
<tr>
<td>Огурец
<td>Яблоко
<td>
</table>

Ещё пример с комментариями.


<!DOCTYPE HTML>
<!-- where is this comment in the DOM? -->
<title>Hello</title>
<meta charset="utf-8">
<!-- comment -->
&#x0020;&#x0020;&#x0020;&#x0020;&#x0020;&#x0020;&#x0020;&#x0020;&#x0020;<br>
<table>
<caption>Таблица примеров съедобных плодов растений</caption>
<colgroup>&#x0020;<col><col><col>
<tr>
<th>Овощи
<th>Фрукты
<th>Ягоды
<tbody>
<tr>
<td>Капуста
<td>Ирга
<td>&#x0020;
<tr>
<td>Лук
<td>
<td>Барбарис
<tr>
<td>&#x0020;
<td>Виноград
<td>Крыжовник
<tr>
<td>&#x0020;
<td>
<td>Черника
<tr>
<td>Огурец
<td>Яблоко
<td>
</table>
Если посмотреть структуру DOM для примера выше, то
  • первый комментарий окажется потерянным;
  • title, пробельные символы, meta, пробельные символы вплоть до br окажутся дочерними для head;
  • br, пробельный символ и таблица будут дочерними для body;
  • первый элемент tr получит родителя tbody;
Март 16, 2014