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

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

Деякі приклади прийнятих недійсних елементів:

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

Деякі приклади відхилених недійсних елементів:

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

Примітка: валідатор W3C насправді приймає недійсні теги самозамикання: у автора спочатку виникла проблема через простий друк (\>замість/>); однак теги, що самозакриваються, в 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 як text/html. (По суті: використовуйте синтаксис тегів, що закриваються, лише коли елемент визначений як EMPTY (а кінцевий тег був заборонений у специфікації HTML)).

• У HTML5 значення значення <foo /> залежить від типу елемента .

  • У елементах HTML, які позначені як недійсні елементи (по суті "Елемент, який існував до HTML5 і якому було заборонено мати будь-який вміст"), кінцеві теги просто заборонені. Нахил в кінці стартового тегу дозволений, але не має значення. Це просто синтаксичний цукор для людей (і підкреслювачів синтаксису), які залежать від XML.
  • На інших елементах HTML косою рисою є помилка, але відновлення помилок призведе до того, що браузери ігнорують її і трактуватимуть тег як звичайний стартовий тег. Зазвичай, в кінцевому підсумку пропущений кінцевий тег призводить до того, що наступні елементи стануть дітьми замість братів та сестер.
  • Іноземні елементи (імпортовані з XML-програм, таких як SVG) трактують це як синтаксис, що закривається.

Як наголосив Микита Скворцов, діло, що закривається, не підтверджується. Це тому, що div - це нормальний елемент , а не недійсний елемент .

Відповідно до специфікації HTML5 , теги, які не можуть містити вмісту (відомі як недійсні елементи ), можуть самозакриватися *. Сюди входять такі теги:

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-файли як тип XML MIME, сторінка повинна відповідати синтаксису XHTML DTD і XML. Це означає, що для тих елементів, визначених як такі , потрібні самозакриваються теги .)

HTML5 в основному поводиться так, ніби продільної косої риски немає. У синтаксисі HTML5 немає теги, що самозакривається.

• Теги, що самозакриваються, на таких недійсних елементах <p/>, <div/>взагалі не працюватимуть. Косою косою рисою буде проігноровано, і вони будуть розглядатися як відкриваючі теги. Це, ймовірно, може призвести до проблем з гніздуванням.

  Це справедливо незалежно від того, чи є пробіл перед косою рисою: <p />і <div />також не працюватиме з тієї ж причини.

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

У результаті все, що працювало у вашій старій "XHTML 1.0, що служило текстом / html", буде продовжувати працювати так само, як і раніше: останчі косої риси на недійсних тегах там також не приймалися, тоді як косовий косий рядок на недійсних елементах працював.

Ще одна примітка: можна представити документ HTML5 як XML, і це іноді називається "XHTML 5.0". У цьому випадку застосовуються правила XML і теги, що завжди закриваються, завжди обробляються. Завжди потрібно обслуговувати XML-тип mime.

Теги самозакривання дійсні в 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"/>