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

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

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

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

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

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

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

• В 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) обрабатывают его как самозакрывающийся синтаксис.

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

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

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

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

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

На практике использование самозакрывающихся тегов в 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. Это означает, что для тех элементов, которые определены как таковые, требуются самозакрывающиеся теги .)

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

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

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

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

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

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

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

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

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

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

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

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

<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"/>