Arrivederci Block & Inline - Benvenuto HTML5

Le novità della specifica HTML5 sono numerose e molte di esse sono già supportate dalla maggior parte del panorama dei browser - di seguito vorrei evidenziare un'interessante modifica alle regole per la nidificazione degli elementi. L'HTML ha sempre distinto tra elementi a blocchi ed elementi in linea. Ad esempio, la definizione del tipo di documento di HTML4 elenca h1, p e div come elementi blocco e a, span e img come elementi in linea.


Questo concetto è stato ora abbandonato (per buone ragioni). In alcuni casi, molti web designer hanno ignorato la correttezza di detta regola di annidamento secondo cui nessun elemento di blocco può essere posizionato all'interno di elementi inline, o il comportamento standard che utilizza regole CSS come display: inline; oppure visualizzare: blocco; (che spesso portava a codice non valido) senza ulteriori indugi.

HTML5 sta ora ammorbidendo questa distinzione e nomina anche 9 diverse categorie a cui può appartenere un elemento, per cui un elemento può essere in diverse categorie. La vecchia distinzione tra elementi block e inline viene gettata a mare e vengono presi in considerazione i molteplici significati dei tag sul web. In particolare, ciò ha come conseguenza che i seguenti costrutti rappresentano un codice valido:

<a href="#">
   <div>
      <h1>Yeah</h1>
      <p>
         Der ganze Block ist verlinkt.
      </p>
   </div>
</a>

Il collegamento di un intero contenitore che conteneva elementi di blocco aggiuntivi era precedentemente possibile (con codice valido) solo utilizzando trucchi (ad esempio mediante posizionamento assoluto di uno strato sovrapposto collegato). In alternativa, l'intestazione e il paragrafo potevano essere collegati, il che a sua volta portava a ridondanza e il contenitore non era cliccabile. Grazie alla gradita estensione di HTML5 questo non sarà più un problema.

Indietro