Являются ли (не пустые) самозакрывающиеся теги действительными в HTML5?


670

W3C валидатор не любит самозакрывающиеся тег (те , которые заканчиваются " />«) на Непустых элементах. (Пустые элементы - это те, которые могут никогда не содержать никакого содержимого.) Они все еще действительны в HTML5?

Некоторые примеры допустимых пустых элементов:

<br />
<img src="" />
<input type="text" name="username" />

Некоторые примеры отклоненных не пустых элементов:

<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />

Примечание:
валидатор W3C фактически принимает пустые самозакрывающиеся теги: у автора изначально возникла проблема из-за простой опечатки ( \>вместо />); однако самозакрывающиеся теги не являются на 100% допустимыми в целом в HTML5, и ответы на них подробно раскрывают вопрос о самозакрывающихся тегах в различных вариантах HTML.


2
@ Бен: о, извини, я думаю, что ты прав. В этом случае я неправильно понял исходный вопрос, я думал, что ОП хочет знать, являются ли самозакрывающиеся теги действительными вообще в HTML5. Но это означает, что он только что сделал опечатки в своем коде, или он не знал, как правильно написать самозакрывающиеся теги, что имеет смысл, что валидатор W3C пометил его код как недействительный.
Sk8erPeter

16
Чтобы сэкономить время для будущих читателей: да, синтаксис в вопросе неверен, и нет, вы не должны его менять. ОП четко и обоснованно объяснила почему . Так как это привело к ошибкам проверки, которые вызвали этот вопрос, синтаксис не должен быть исправлен.
Джордан Грей,

2
Вы, люди, все еще боретесь за то, в каком направлении должны стоять косые черты? Давай.
BoltClock

3
@BoltClock Да, все еще борется. Ребята: если бы этот вопрос задавался \>, он должен быть закрыт как бесполезный вопрос «исправьте мою опечатку». Ответы все адреса />. />Версия является полезным. Будь как будет.
Жиль "ТАК - перестань быть злым"

1
Тогда вопрос должен быть перефразирован, потому что валидатор W3C фактически принимает самозакрывающиеся теги. Трудно перефразировать вопрос таким образом, не ставя под угрозу его целостность по отношению к первоначальному замыслу. Поэтому, если мы хотим придерживаться правил SO, нам, возможно, придется пожертвовать ясностью в таких вопросах, как этот, даже если кажется, что редактирование вопроса - это единственно разумная вещь, ради большего блага на средний. Мы могли бы начать еще одно обсуждение мета, если есть много других вопросов, аналогичных проблеме.
Ос

Ответы:


1238
  • В HTML 4 , <foo /(да, с не >совсем) средств <foo>(что приводит к <br />означая <br>>(то есть <br>&gt;) , и это <title/hello/означает <title>hello</title>). Это правило SGML, которое браузеры очень плохо поддерживали, и спецификация рекомендует авторам избегать синтаксиса .

  • В XHTML , <foo />значит<foo></foo> . Это правило XML, которое применяется ко всем документам XML. Тем не менее, XHTML часто служит тем, text/htmlкоторый (по крайней мере, исторически) обрабатывается браузерами, использующими другой синтаксический анализатор, чем документы application/xhtml+xml. W3C предоставляет рекомендации по совместимости для XHTML as text/html. (По сути: используйте синтаксис самозакрывающегося тега только тогда, когда элемент определен как EMPTY (а конечный тег был запрещен в спецификации HTML)).

  • В HTML5 значение <foo /> зависит от типа элемента .

    • В элементах HTML, которые обозначены как пустые элементы (по сути, «элемент, существовавший до HTML5 и которому запрещалось иметь какой-либо контент»), конечные теги просто запрещены. Косая черта в конце начального тега разрешена, но не имеет значения. Это просто синтаксический сахар для людей (и подсветки синтаксиса), которые зависимы от XML.
    • На других элементах HTML косая черта является ошибкой, но ее исправление заставит браузеры игнорировать ее и рассматривать тег как обычный начальный тег. Обычно это приводит к отсутствию конечного тега, в результате чего последующие элементы становятся дочерними, а не родными.
    • Внешние элементы (импортированные из приложений XML, таких как SVG) обрабатывают его как самозакрывающийся синтаксис.

24
« ... кто пристрастился к XML. ». Вы, кажется, предполагаете, что соответствие XML плохо. Тем не менее, конечный результат в HTML5, по-видимому, заключается в том, что нам все равно приходится иметь дело с угловыми скобками (т. Е. С большинством неудобств XML), в то время как это затрудняет использование инструментов на основе XML (например, инструментов шаблонов или различных процессоров). ). Даже с точки зрения генерации может показаться, что <object data="..." />и <img src="..."></src>не все в порядке, хотя <object data="..."></object>и <img src="..." />есть, что затрудняет согласованность инструментов. Это похоже на ситуацию проигрыша.
Бруно

7
@Bruno - HTML предшествует XML. Попытки заставить людей перейти на XHTML провалились. При этом text/htmlбраузеры не придают особого значения слешу, поэтому включение его не имеет практического значения. Это только для того, чтобы он выглядел больше как XML для людей, которые не могут выйти из привычки.
Квентин

6
@ Квентин: Я не совсем не согласен. Мне просто стыдно, что действительный эквивалент XML не обязательно является правильным HTML5 (например, <img ...></img>вместо <img ...>или <img ... />). Поскольку HTML5 в целом менее строгий (возможно, из-за сбоя XHTML), он вполне мог бы допустить что-то подобное <img ...></img>. К сожалению, это не так, поэтому генератору шаблонов на основе XML нужно знать, как отличить создание пустых элементов или самозакрывающихся элементов: у вас даже не может быть одного правила, чтобы написать все пустые элементы как <tag></tag>.
Бруно

3
XHTML потерпел неудачу до того, как HTML 5 был даже на горизонте, и вы не можете иметь длинные пустые элементы формы, потому что исправление ошибок браузера, которое предшествовало XHTML, сделало бы такие вещи, как обработка, так </br>как <br>это <br></br>было бы двойным разрывом строки. (и обратная совместимость с плохой разметкой в ​​реальном мире (как </br>) является одной из целей разработки HTML 5).
Квентин

1
ОТ W3C: Пустые элементы: area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, wbr "Пустые элементы имеют только начальный тег; конечные теги указывать не нужно для пустых элементов. " w3.org/TR/html5/syntax.html#void-elements
Фабио Ноласко,

406

Как отметил Никита Скворцов, самозакрывающийся div не будет проверяться. Это потому, что div - это обычный элемент , а не элемент void .

В соответствии со спецификацией HTML5 , теги, которые не могут иметь никакого содержимого (известные как элементы void ), могут быть самозакрывающимися *. Это включает в себя следующие теги:

area, base, br, col, embed, hr, img, input, 
keygen, link, meta, param, source, track, wbr

«/» Является совершенно необязательным для вышеуказанных тегов, однако <img/>не отличается от него <img>, но <img></img>является недействительным.

* Примечание: посторонние элементы также могут быть самозакрывающимися, но я не думаю, что это относится к этому ответу.


1
Инструменты разработчика IE10 дают мне сообщение «HTML1500: тег не может быть самозакрывающимся. Используйте явный закрывающий тег». на линии <meta charset = "UTF-8" /> Есть идеи, почему это будет?
Джеймс в Инди

Хорошо, я обнаружил, что у самозакрывающихся тегов не должно быть косой черты (и удаление этого исправляет мою ошибку). Цитировать: tiffanybbrown.com/2011/03/23/…
Джеймс в Инди

Спецификация изменилась. Теперь элементы «void» или «self-closed» не должны включать косую черту, если они используются в качестве документа типа HTML 5. Однако, если он используется как XHTML, может потребоваться закрывающая косая черта (в этом случае проверьте документы). При практическом использовании страницы обычно отображаются так, как ожидается, даже если закрытие /было включено, но это не гарантируется (это зависит от того, насколько эффективно браузер переписывает код для вас и интерпретирует его так, как вы предполагали). Кроме того, если По какой-то причине ваша страница должна пройти проверку HTML 5, она может не пройти, если вы закроете теги для пустых элементов.
Шерил Хохман

Что касается комментария @ SherylHohman, я не верю, что спецификация изменилась (или, если она изменилась, она изменилась назад). См. W3.org/TR/html5/syntax.html#start-tags (8.1.2.1.6) - пустые (или сторонние) элементы могут все еще включать косую черту.
ChrisC

63

На практике использование самозакрывающихся тегов в HTML должно работать так, как вы ожидаете. Но если вы беспокоитесь о написании правильного HTML5, вы должны понимать, как использование таких тегов ведет себя в двух разных синтаксических формах, которые вы можете использовать. HTML5 определяет как синтаксис HTML, так и синтаксис XHTML, которые похожи, но не идентичны. Какой из них использовать, зависит от типа носителя, отправляемого веб-сервером.

Скорее всего, ваши страницы обслуживаются text/html, что соответствует более мягкому синтаксису HTML. В этих случаях HTML5 позволяет определенным начальным тегам иметь дополнительный / до его завершения>. В этих случаях / является необязательным и игнорируется, поэтому <hr>и <hr />идентичны. Спецификация HTML называет эти «пустые элементы» и предоставляет список допустимых. Строго говоря, необязательный / действителен только в начальных тегах этих пустых элементов; например, <br />и <hr />действительны HTML5, но <p />это не так.

Спецификация HTML5 проводит четкое различие между тем, что является правильным для авторов HTML и для разработчиков веб-браузеров, поскольку вторая группа обязана принимать все виды недопустимого «унаследованного» синтаксиса. В этом случае это означает, что HTML5-совместимые браузеры будут принимать недопустимые самозакрывающиеся теги, например <p />, и отображать их так, как вы, вероятно, ожидаете. Но для автора эта страница не будет действительной HTML5. ( Что еще более важно, дерево DOM , вы получаете от использования этого вида незаконного синтаксиса может быть серьезно облажалось, сами-замкнутыми <span />метки, например, как правило, натворить много ).

(В необычном случае, когда ваш сервер знает, как отправлять файлы XHTML как тип MIME XML, страница должна соответствовать синтаксису DTD и XML XHTML. Это означает, что для тех элементов, которые определены как таковые, требуются самозакрывающиеся теги .)


31
<p /> будет рассматриваться как открывающий тег, а не как закрытый тег. Это означает, что вся остальная часть документа будет рассматриваться как находящаяся внутри элемента P. Это не то, что я ", вероятно, ожидаю", и создаст серьезный беспорядок на любой нетривиальной странице.
mhsmith

12

HTML5 в основном ведет себя так, как будто косой черты нет. В синтаксисе HTML5 нет такого понятия, как самозакрывающийся тег.

  • Самозакрывающиеся теги на таких элементах, как void<p/> , <div/>вообще не будут работать. Конечный слеш будет игнорироваться, и они будут рассматриваться как открывающие теги. Это может привести к проблемам с вложением.

    Это верно независимо от того, есть ли пробел перед косой чертой: <p />и <div />также не будет работать по той же причине.

  • Самозакрывающиеся теги на пустых элементах, такие как <br/>или <img src="" alt=""/> будут работать, но только потому, что завершающий слеш игнорируется, и в этом случае это приводит к правильному поведению.

В результате все, что работало в вашем старом «XHTML 1.0, использовавшемся как text / html», продолжит работать так же, как и раньше: конечные слеши на не пустых тегах также не были приняты, тогда как конечный слеш на пустых элементах работал.

Еще одно замечание: документ HTML5 можно представить в виде XML, и его иногда называют «XHTML 5.0». В этом случае применяются правила XML, и самозакрывающиеся теги всегда будут обрабатываться. Это всегда должно быть подано с типом mime XML.


5

Самозакрывающиеся теги действительны в HTML5, но не обязательны.

<br>и <br />оба в порядке.


12
В соответствии со спецификацией HTML5, самозакрывающийся синтаксис ( />) не может использоваться для не пустого HTML-элемента.
NaXa

3
Вопрос был о самозакрывающихся тегах на непустых элементах , таких как <p/>или <div/>.
Томасруттер

2
Первоначально вопрос не был конкретно о не пустых элементах. Это было больше похоже на то, можете ли вы по-прежнему использовать <... />как в XHTML, или вам нужно удалить /в HTML5. Вопрос менялся несколько раз после.
Ник

В любом случае, ответ заключается в том, что косая черта будет игнорироваться, что приведет к разрыву элементов, не объявленных как void, но совместимых с элементами void.
Томасруттер

4

Я был бы очень осторожен с самозакрывающимися тегами, поскольку этот пример демонстрирует:

var a = '<span/><span/>';
var d = document.createElement('div');
d.innerHTML = a
console.log(d.innerHTML) // "<span><span></span></span>"

Мое чувство кишки было бы <span></span><span></span>вместо


2
Это описано в принятом ответе:On other [than void] HTML elements, the slash is an error, but error recovery will cause browsers to ignore it and treat the tag as a regular start tag. This will usually end up with a missing end tag causing subsequent elements to be children instead of siblings.
Palec

-1

Однако - только для записи - это неверно:

<address class="vcard">
  <svg viewBox="0 0 800 400">
    <rect width="800" height="400" fill="#000">
  </svg>
</address>

И косая черта здесь сделает его снова действительным:

    <rect width="800" height="400" fill="#000"/>

1
Это потому, что SVG написан на XML, а не HTML. Он использует разные правила синтаксического анализа
Электрический кофе
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.