La magia dei nested tag

Scrivo questo post per mostrarvi il comportamento assolutamente incredibile dei moderni browser web. Premetto che scrivo le pagine web in XHTML (1.0 Strict o anche 1.1).

Nel formato XML i tag vanno aperti e chiusi ponendo il relativo nome tra parentesi uncinate, facendo attenzione al fatto che nella chiusura il nome deve essere preceduto dal carattere slash ("/"). Ad esempio:

<tag_name> ... contenuto del tag ... </tag_name>

Nel caso in cui un tag sia vuoto ci sono due alternative: aprirlo e chiuderlo subito, oppure usare una convenzione particolare, ovvero:

<tag_name></tag_name>
<tag_name />

che indica la presenza di un tag (aperto e subito chiuso) vuoto. E qui viene il bello. Immaginiamo un codice XHTML di questo tipo:

<div class="out">
    <div class="in" />
</div>

Questo codice indica un tag div (con classe out) aperto, che contiene al suo interno un tag div (con classe in) vuoto. Bene, il browser lo interpreterà come:

<div class="out">
    <div class="in"></div>

lasciandovi in mano il tag div con classe out aperto, senza relativa chiusura, perché la chiusura viene automaticamente (e qui sta l'"assolutamente incredibile") associata al tag div con classe in già formalmente chiuso! E immaginatevi quindi i problemi in una pagina XHTML a usare un codice del genere. Il problema, che si verifica solo nell'indentazione di tag col medesimo nome, si risolve chiudendo in modo esteso il tag interno, es:

<div class="out">
    <div class="in"></div>
</div>

A questo punto un ultimo dettaglio: parlo di browser, ma quale browser? Chrome, FF 3.0.5 e IE 7. Tutti della stessa pasta.