W3C validator не любит самозакрывающиеся теги (те, которые заканчиваются на "/>
" ), на не-void. (Элементы Void - это те, которые никогда не содержат содержимого.) До сих пор ли они действительны в 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>>
) и <title/hello/
смысл <title>hello</title>
). Браузеры очень плохо работали над этим, и спецификация советует авторам избегать синтаксиса.
В XHTML <foo/>
означает <foo></foo>
. Это правило XML, которое применяется ко всем XML-документам. Тем не менее, XHTML часто используется как text/html
который (по крайней мере, исторически) обрабатывается браузерами с использованием другого парсера, чем документы, которые используются как application/xhtml+xml
. W3C предоставляет рекомендации по совместимости для XHTML как text/html
. (По существу: используйте только самозакрывающийся тег синтаксиса, когда элемент определен как ПУСТОЙ (и конечный тег был запрещен в спецификации HTML)).
В HTML5 значение <foo/>
зависит от типа элемента.
>
не пропал без вести. Случай <foo />
для HTML 4 описан в предложении в скобках в этом разделе.
<object data="..." />
и <img src="..."></src>
не в порядке, в то время как <object data="..."></object>
и <img src="..." />
, что усложняет согласованность инструментов. Это выглядит как проигрышная ситуация.
Как отметил Никита Скворцов, самозакрывающийся 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 называет эти "недействительные элементы" и дает список действительных. Строго говоря, необязательный/действителен только в начале тегов этих элементов void; например, <br />
и <hr />
являются допустимыми HTML5, но <p />
не является.
Спецификация HTML5 дает четкое различие между тем, что правильно для авторов HTML и для разработчиков веб-браузера, а вторая группа должна принимать все виды недействительного синтаксиса "устаревший". В этом случае это означает, что браузеры, совместимые с HTML5, будут принимать незаконные самозакрывающиеся теги, например <p />
, и отображать их, как вы, вероятно, ожидаете. Но для автора эта страница не будет действительна HTML5. (Что еще более важно, дерево DOM, которое вы получаете от использования этого вида незаконного синтаксиса, может быть серьезно испорчено, например, самозакрывающиеся теги <span />
, как правило, слишком много испортили).
(В необычном случае, когда ваш сервер знает, как отправлять файлы XHTML в виде XML MIME-типа, страница должна соответствовать синтаксису DTD и XML XHTML. Это означает, что для закрытых тегов требуются те элементы, которые определены как таковые.)
HTML5 в основном ведет себя так, как будто конечной косой черты нет. В синтаксисе HTML5 нет такого понятия, как самозакрывающийся тег.
Самозакрывающиеся теги на непустых элементах, таких как <p/>
, <div/>
, не будут работать вообще. Конечная косая черта будет проигнорирована, и они будут рассматриваться как открывающие теги. Вероятно, это приведет к проблемам вложенности.
Это верно, независимо от того, есть ли пробел перед косой чертой: <p />
и <div />
также не будут работать по той же причине.
Самозакрывающиеся теги для таких элементов, как <br/>
или <img src="" alt=""/>
, будут работать, но только потому, что конечная косая черта игнорируется, и в этом случае это приводит к правильному поведению.
В результате все, что работало в вашем старом "XHTML 1.0, служившем текстом /html ", будет продолжать работать так же, как и раньше: трейлинг-косые черты на не-void тегах там не были приняты, в то время как конечная косая черта на элементах void работал.
Еще одно замечание: документ HTML5 можно представить как XML, и это иногда называют "XHTML 5.0". В этом случае правила XML применяются, и самозакрывающиеся теги всегда будут обрабатываться. Его всегда нужно обслуживать с типом XML-типа.
Самозакрывающиеся теги действительны в HTML5, но не требуются.
<br>
и <br />
оба хороши.
/>
) не может быть использован для непустого элемента HTML.
<p/>
или <div/>
.
Я был бы очень осторожен с самозакрывающимися тегами, как показывает этот пример:
var a = '<span/><span/>';
var d = document.createElement('div');
d.innerHTML = a
console.log(d.innerHTML) // "<span><span></span></span>"
Мое чувство кишки было бы <span></span><span></span>
вместо
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.
Однако -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"/>