I tag autochiudenti (non nulli) sono validi in HTML5?

Il validatore W3C non ama i tag a chiusura automatica (quelli che terminano con " />") su elementi non vuoti . (Gli elementi Void sono quelli che potrebbero non contenere mai alcun contenuto.) Sono ancora validi in HTML5?

Alcuni esempi di elementi vuoti accettati :

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

Alcuni esempi di elementi non nulli rifiutati :

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

_{Nota:
il validatore W3C accetta effettivamente tag di chiusura automatica nulli: l'autore originariamente aveva un problema a causa di un semplice errore di battitura ( \>anziché />); tuttavia, i tag a chiusura automatica non sono validi al 100% in HTML5 in generale e le risposte elaborano il problema dei tag a chiusura automatica in vari tipi di HTML.}

• In HTML 4 , <foo /(sì, senza >affatto) significa <foo>(che porta a <br />significato <br>>(cioè <br>&gt;) e <title/hello/significato <title>hello</title>). Questa è una regola SGML secondo cui i browser hanno svolto un pessimo lavoro di supporto e le specifiche consigliano agli autori di evitare la sintassi .

• In XHTML , <foo />significa<foo></foo> . Questa è una regola XML che si applica a tutti i documenti XML. Detto questo, XHTML è spesso servito come text/html(almeno storicamente) viene elaborato dai browser utilizzando un parser diverso rispetto ai documenti serviti application/xhtml+xml. Il W3C fornisce linee guida sulla compatibilità da seguire per XHTML come text/html. (Essenzialmente: utilizzare la sintassi del tag a chiusura automatica solo quando l'elemento è definito come EMPTY (e il tag end era proibito nelle specifiche HTML)).

• In HTML5 , il significato di <foo /> dipende dal tipo di elemento .

  • Sugli elementi HTML che sono designati come elementi vuoti (essenzialmente "Un elemento che esisteva prima di HTML5 e che era proibito avere qualsiasi contenuto"), i tag di fine sono semplicemente vietati. La barra alla fine del tag iniziale è consentita, ma non ha alcun significato. È solo zucchero sintattico per le persone (e gli evidenziatori della sintassi) che sono dipendenti da XML.
  • Su altri elementi HTML, la barra è un errore, ma il recupero degli errori farà ignorare i browser e tratterà il tag come un normale tag di avvio. Questo di solito finisce con un tag di fine mancante che fa sì che gli elementi successivi siano figli anziché fratelli.
  • Gli elementi estranei (importati da applicazioni XML come SVG) lo trattano come sintassi a chiusura automatica.

Come ha sottolineato Nikita Skvortsov, un div a chiusura automatica non verrà convalidato. Questo perché un div è un elemento normale , non un elemento vuoto .

Secondo le specifiche HTML5 , i tag che non possono avere alcun contenuto (noti come elementi vuoti ) possono chiudersi automaticamente *. Ciò include i seguenti tag:

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

"/" È completamente opzionale sui tag sopra, tuttavia, quindi <img/>non è diverso da <img>, ma <img></img>non è valido.

* Nota: anche elementi estranei possono essere autochiudenti, ma non credo che questo rientri nel campo di applicazione di questa risposta.

In pratica, l'uso di tag a chiusura automatica in HTML dovrebbe funzionare esattamente come ci si aspetterebbe. Ma se sei preoccupato di scrivere HTML5 valido , dovresti capire come si comporta l'uso di tali tag all'interno delle due diverse forme di sintassi che puoi usare. HTML5 definisce sia una sintassi HTML che una sintassi XHTML, che sono simili ma non identiche. Quale viene utilizzato dipende dal tipo di supporto inviato dal server Web.

Molto probabilmente, le tue pagine vengono pubblicate come text/html, che segue la sintassi HTML più indulgente. In questi casi, HTML5 consente a determinati tag di inizio di avere un facoltativo / prima che venga chiuso>. In questi casi, / è facoltativo e ignorato, quindi <hr>e <hr />sono identici. La specifica HTML chiama questi "elementi vuoti" e fornisce un elenco di quelli validi. A rigor di termini, l'opzione / è valida solo all'interno dei tag di inizio di questi elementi vuoti; per esempio, <br />e <hr />sono HTML5 validi, ma <p />non lo è.

Le specifiche HTML5 fanno una chiara distinzione tra ciò che è corretto per gli autori HTML e per gli sviluppatori di browser Web, con il secondo gruppo che deve accettare tutti i tipi di sintassi "legacy" non valida. In questo caso, significa che i browser compatibili con HTML5 accetteranno tag clandestini illegali, come <p />, e li renderanno come probabilmente ti aspetti. Ma per un autore, quella pagina non sarebbe HTML5 valida. (Ancora più importante, l'albero DOM si ottiene da utilizzare questo tipo di sintassi illegale può essere seriamente avvitato; auto-chiuso <span />i tag, ad esempio, tendono a complicare le cose in un sacco ).

(Nel caso insolito che il tuo server sappia come inviare i file XHTML come tipo MIME XML, la pagina deve essere conforme alla sintassi XHTML DTD e XML. Ciò significa che sono richiesti tag a chiusura automatica per quegli elementi definiti come tali.)

HTML5 si comporta sostanzialmente come se la barra finale non fosse presente. Non esiste un tag autochiudente nella sintassi HTML5.

• I tag a chiusura automatica su elementi non nulli come <p/>, <div/>non funzioneranno affatto. La barra finale verrà ignorata e queste verranno trattate come tag di apertura. Questo probabilmente porterà a problemi di nidificazione.

  Questo è vero indipendentemente dal fatto che ci sia spazio davanti alla barra: <p />e <div />inoltre non funzionerà per lo stesso motivo.

• Tag a chiusura automatica on nulli elementi come <br/>o <img src="" alt=""/> sarà funzionare, ma solo perché la barra finale viene ignorata, e in questo caso che si verifica per determinare il comportamento corretto.

Il risultato è che tutto ciò che ha funzionato nel tuo vecchio "XHTML 1.0 servito come text / html" continuerà a funzionare come prima: le barre finali sui tag non vuoti non sono state accettate lì, mentre la barra finale sugli elementi vuoti ha funzionato.

Ancora una nota: è possibile rappresentare un documento HTML5 come XML, e questo a volte viene soprannominato "XHTML 5.0". In questo caso verranno applicate le regole di XML e i tag autochiudenti verranno sempre gestiti. Dovrebbe sempre essere servito con un tipo mime XML.

I tag a chiusura automatica sono validi in HTML5, ma non richiesti.

<br>e <br />stanno entrambi bene.

Starei molto attento con i tag a chiusura automatica come dimostra questo esempio:

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

Il mio istinto sarebbe stato <span></span><span></span>invece

Tuttavia, solo per il record, questo non è valido:

<address class="vcard">
  <svg viewBox="0 0 800 400">
    <rect width="800" height="400" fill="#000">
  </svg>
</address>

E una barra qui lo renderebbe nuovamente valido:

    <rect width="800" height="400" fill="#000"/>