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

Ответ 1

• В HTML 4 <foo/ (да, вообще без no >) означает <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 в виде text/html. (По сути: используйте синтаксис самозакрывающегося тега, только если элемент определен как EMPTY (а конечный тег был запрещен в спецификации HTML)).

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

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

Ответ 2

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

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

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

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

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

Ответ 3

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

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

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

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

Ответ 4

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

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

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

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

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

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

Ответ 5

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

<br> и <br /> оба хороши.

Ответ 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> вместо

Ответ 7

Однако -just для record- это недопустимо:

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