Page 12 - Guida tascabile HTML5
P. 12
RIFERIMENTO Anche la sintassi CSS fa riferimento a questa struttura per identificare
le relazioni tra gli elementi e assegnare correttamente le regole di formattazione.
La specifica HTML prevede regole precise per quanto riguarda la corretta
nidificazione dei tag: devono chiudersi nell’ordine inverso rispetto a quello di
apertura. Ecco un esempio non accettabile:
<p>Questo markup è <strong>inaccettabile</p>.</strong>
In questa riga il tag <p> e il tag <strong> creano un intreccio che invalida la
struttura del documento. Ecco qui di seguito un esempio con il corretto ordine dei
tag:
<p>Questo markup è <strong>corretto</strong>.</p>
Incongruenze di questo tipo possono essere evitate lavorando con metodo e
ordine mentale, e ricorrendo in modo sistematico all’indentazione del documento
durante il lavoro: ogni nuova riga dovrà essere spostata verso destra utilizzando le
tabulazioni (il tasto TAB a sinistra della lettera Q sulla tastiera italiana) in base
alla profondità della nidificazione del tag.
NOTA Molti editor testuali specifici per HTML gestiscono automaticamente
l’indentazione del documento, spostandosi di livello all’apertura e alla chiusura dei tag.
Riprendiamo il listato mostrato all’inizio di questo capitolo, esempio di
documento indentato in modo corretto:
<!DOCTYPE html>
<html>
--<head>
----<title>Hello World</title>
--</head>
--<body>
----<h1>La sintassi HTML</h1>
----<p>I tag descrivono il ruolo di ogni elemento</p>
--</body>
</html>
Il tag <title> è nidificato all’interno di <head>, quindi risulta spostato all’interno,
indentato. Anche i tag <h1> e <p>, entrambi discendenti diretti di <body>, sono
allineati tra loro e spostati a destra rispetto al “genitore”.
NOTA I caratteri utilizzati per l’indentazione (spazi o tabulazioni) non influiscono sul
rendering del documento: vengono ignorati dal browser durante l’interpretazione del
codice HTML.
Gli attributi
