Quali sono tutti gli elementi di chiusura automatica validi in XHTML (come implementato dai principali browser)?

Quali sono tutti gli elementi a chiusura automatica validi (ad es. <br/>) in XHTML (come implementato dai principali browser)?

So che XHTML consente tecnicamente a qualsiasi elemento di essere chiuso da solo, ma sto cercando un elenco di quegli elementi supportati da tutti i principali browser. Vedi http://dusan.fora.si/blog/self-closing-tags per esempi di alcuni problemi causati da elementi a chiusura automatica come <div />.

Ogni browser che supporta XHTML (Firefox, Opera, Safari, IE9 ) supporta la sintassi a chiusura automatica su ogni elemento .

<div/>, <script/>, <br></br>Tutto dovrebbe funzionare bene. In caso contrario, hai HTML con XTYTML DOCTYPE aggiunto in modo inappropriato.

DOCTYPE non cambia la modalità di interpretazione del documento. Fa solo il tipo MIME .

Decisione del W3C sull'ignorare DOCTYPE :

Il WG HTML ha discusso di questo problema: l'intenzione era quella di consentire ai vecchi browser (solo HTML) di accettare documenti XHTML 1.0 seguendo le linee guida e servendoli come text / html. Pertanto, i documenti serviti come text / html dovrebbero essere trattati come HTML e non come XHTML.

È una trappola molto comune, perché W3C Validator ignora in gran parte quella regola, ma i browser la seguono religiosamente. Leggi Informazioni su HTML, XML e XHTML dal blog WebKit:

In effetti, la stragrande maggioranza dei presunti documenti XHTML su Internet è servita come text/html. Il che significa che non sono affatto XHTML, ma in realtà HTML non valido che si risolve nella gestione degli errori dei parser HTML. Tutti quei "Valid XHTML 1.0!" i collegamenti sul web dicono davvero "HTML 4.01 non valido!".

Per verificare se hai XHTML reale o HTML non valido con DOCTYPE di XHTML, inseriscilo nel tuo documento:

<span style="color:green"><span style="color:red"/> 
 If it's red, it's HTML. Green is XHTML.
</span>

Convalida, e in XHTML reale funziona perfettamente (vedi: 1 vs 2 ). Se non riesci a credere ai tuoi occhi (o non sai come impostare i tipi MIME), apri la tua pagina tramite proxy XHTML .

Un altro modo per verificare è visualizzare la fonte in Firefox. Evidenzierà le barre in rosso quando non sono valide.

In HTML5 / XHTML5 questo non è cambiato e la distinzione è ancora più chiara, perché non ne hai nemmeno di più DOCTYPE. Content-Typeè il re.

Per la cronaca, le specifiche XHTML consentono a qualsiasi elemento di chiudersi automaticamente rendendo XHTML un'applicazione XML : [enfasi mia]

I tag di elementi vuoti possono essere utilizzati per qualsiasi elemento che non ha contenuto , indipendentemente dal fatto che sia dichiarato o meno utilizzando la parola chiave EMPTY.

Viene anche mostrato esplicitamente nelle specifiche XHTML :

Gli elementi vuoti devono neanche avere un tag di chiusura o il tag iniziale deve terminare con />. Ad esempio, <br/>oppure<hr></hr>

Un elemento con cui prestare molta attenzione su questo argomento è l' <scriptelemento>. Se si dispone di un file di origine esterno, causerà problemi quando lo si chiude automaticamente. Provalo:

<!-- this will not consistently work in all browsers! -->
<script type="text/javascript" src="external.js" />

Funzionerà in Firefox, ma si rompe almeno in IE6. Lo so, perché mi sono imbattuto in questo quando ho chiuso con zelo ogni elemento che ho visto ;-)

La sintassi a chiusura automatica funziona su tutti gli elementi in application / xhtml + xml. Non è supportato su alcun elemento in text / html, ma gli elementi che sono "vuoti" in HTML4 o "vuoti" in HTML5 non accettano comunque un tag di fine, quindi se si inserisce una barra su quelli appare come se la sintassi a chiusura automatica era supportata.

Dal sito di riferimento delle scuole W3 :

<area />
<base />
<basefont />
<br />
<hr />
<input />
<img />
<link />
<meta />

La domanda migliore sarebbe: quali tag possono essere chiusi automaticamente anche in modalità HTML senza influire sul codice? Risposta: solo quelli che hanno un contenuto vuoto (sono nulli). Secondo le specifiche HTML, i seguenti elementi sono nulli:

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

Elenca anche la versione precedente delle specifiche command. Inoltre, secondo varie fonti i seguenti tag obsoleti o non standard sono nulli:

basefont, bgsound, frame, isindex

Spero che questo aiuti qualcuno:

<base />
<basefont />
<frame />
<link />
<meta />

<area />
<br />
<col />
<hr />
<img />
<input />
<param />

Che dire di <meta>e <link>? Perché non sono in quella lista?

Veloce regola empirica, non chiudere da sé alcun elemento destinato a contenere contenuti, perché prima o poi causerà sicuramente problemi al browser.

Quelli che si chiudono da soli, come <br>e <img>, dovrebbero essere ovvi. Quelli che non lo sono ... non chiuderli da soli!

L'ultima volta che ho controllato, i seguenti erano gli elementi vuoto / vuoto elencati in HTML5.

Valido per gli autori: area, base, br, col, comando, embed, eventsource, hr, img, input, link, meta, param, source

Non valido per gli autori: basefont, bgsound, frame, spacer, wbr

Oltre ai pochi che sono nuovi in ​​HTML5, ciò dovrebbe darti un'idea di quelli che potrebbero essere supportati quando si serve XHTML come text / html. (Basta testarli esaminando il DOM prodotto.)

Per quanto riguarda XHTML servito come application / xhtml + xml (che lo rende XML), si applicano le regole XML e qualsiasi elemento può essere vuoto (anche se il DTD XHTML non può esprimerlo).

Dovresti dare un'occhiata ai DTD xHTML , sono tutti elencati. Ecco una breve rassegna di tutti i principali:

<br />
<hr />
<img />
<input />

Sono chiamati elementi "vuoti" in HTML 5. Sono elencati nelle specifiche W3 ufficiali .

Un elemento vuoto è un elemento il cui modello di contenuto non consente mai di avere contenuti in nessuna circostanza.

Ad aprile 2013 sono:

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

A partire da dicembre 2018 (HTML 5.2), sono:

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

Un altro problema con i tag a chiusura automatica per IE è l'elemento title. Quando IE (appena provato in IE7) vede questo, presenta all'utente una pagina vuota. Comunque "vedi sorgente" e tutto è lì.

<title/>

Inizialmente l'ho visto quando la mia XSLT ha generato il tag di chiusura automatica.

Non proverò a sovraelaborare questo, specialmente perché la maggior parte delle pagine che scrivo sono generate o il tag ha contenuto. Gli unici due che mi hanno mai dato problemi quando li ho fatti chiudere da soli sono:

<title/>

Per questo, ho semplicemente fatto ricorso a dargli sempre un tag di chiusura separato, dal momento che una volta che è lì dentro <head></head>non rende davvero il tuo codice più complicato con cui lavorare comunque.

<script/>

Questo è quello grande con cui recentemente ho avuto problemi. Per anni avevo sempre usato i <script/>tag a chiusura automatica quando lo script proveniva da una fonte esterna. Ma di recente ho iniziato a ricevere messaggi di errore JavaScript su un modulo null. Dopo diversi giorni di ricerche, ho scoperto che il problema era (presumibilmente) che il browser non <form>arrivava mai al tag perché non si rendeva conto che questa era la fine del<script/> tag. Quindi, quando l'ho trasformato in <script></script>tag separati , tutto ha funzionato. Perché diverso in diverse pagine che ho creato sullo stesso browser, non lo so, ma è stato un grande sollievo trovare la soluzione!

<hr /> è un altro