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

Как отметил Никита Скворцов, самозакрывающийся 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 /> оба хороши.

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

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

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

Однако -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"/>