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

Question

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

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

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

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

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

"/" является полностью необязательным для вышеуказанных тегов, поэтому <img/> не отличается от <img>, но <img></img> недопустимо.

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

Answer 3

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

Answer 4

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

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

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

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

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

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

Answer 5

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

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

Answer 6

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

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

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

Answer 7

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

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