Keskustelu: Nettisivujen teko: Selain sulkee tagit ennenaikojaan

Kun kirjoitan koodiin näin:
<time><div>01.01.2011</div></time>

Niin selain tulkitsee sen näin:
<time></time><div>01.01.2011</div>

Tämä selviää kun tarkastelen DOM-lähdekoodia esimerkiksi firefoxissa.
Selain siis sulkee <time> tagin ennen aikojaan. Olen yrittänyt kaikenlaisia kikkoja css:llä esimerkiksi määrittää noi blokeiksi jne mutta mikään ei tunnu auttavan.

Sama juttu useiden muiden semanttisten tagien kanssa kuten <address> tagin kanssa.
Miksiköhän selaimet tekee noin?

Tämä johtuu rakenteellisesta tärkeysjärjestyksestä. Pääsääntönä voi pitää sitä, että rivielementit (span, linkit, kuvat...) menevät lohkoelementtien sisään. Div on järjestyksessä aika pohjalla, joten kovinkaan moni muu elementti ei voi sisältää diviä. Esim. otsikot ja kappaleet eivät voi sisältää sitä.

ottis kirjoitti:

Selain siis sulkee <time> tagin ennen aikojaan. Olen yrittänyt kaikenlaisia kikkoja css:llä esimerkiksi määrittää noi blokeiksi jne mutta mikään ei tunnu auttavan.

Kelpaisiko "HTML-kikka"? (Sikäli kun nyt näin voi sanoa elementistä, mistä ei vielä ole lopullista versiota. Sallittakoon se tällä kertaa)

<div><time datetime=2011-01-01>01.01.2011</time></div>

Tällä tuskin on mitään tekemistä sen enempää semanttisen kuin syntaktisenkaan tärkeyden kanssa. Kysymys on ainoastaan HTML:n rakenteellisista rajoituksista. Time-elementin sallituksi sisällöksi on speksissä määritelty phrasing content (pl time itse). Div taas on flow content-elementti eli se ei ole sallittu time:n sisällä. Kun merkkauksessasi on virhe, selaimen toiminta siinä tilanteessa tuskin on kovin tarkkaan määritelty (tai ainakaan speksattu) ja se voi luoda DOM-rakenteen ihan miten sattuu (riippuen selaimesta). Tässä tapauksessa se näköjään sulkee time:n automaattisesti kohdatessaan sinne sopimattoman divin alkutägin.

HTML 5:ssä parsimissäännöt on määritelty tarkasti, asiasta on kirjoittanut mm. John Resig. Kuten tuon artikkelin alussa mainitaan, niin aiemmin poikkeustapauksille ei ollut parsimissääntöjä, vaan selainten kehittäjät arvasivat miten pitäisi toimia sekä arvasivat miten toiset olivat parsimisen tehneet.

Ei ole yllättävää sinänsä, että HTML 5 -sääntöjen astuttua voimaan esimerkiksi Geckolla sitten kasvoi 3% sivun generointinopeus, kun lukuisien sotkuarvailujen sijaan oli selkeät HTML 5:n mukaiset säännöt.