Tag ed elementi

Di solito un elemento è fatto di tre cose in fila: un tag di apertura, un contenuto e un tag di chiusura con una barra.

Le parti di un elemento

Guarda <p>Bread is ready.</p>. Il tag di apertura <p> dice che qui inizia un paragrafo. Il tag di chiusura </p>, con una barra dopo la prima parentesi angolare, dice che finisce. Tutto ciò che sta in mezzo è il contenuto. L'insieme, tag più contenuto, è l'elemento. Spesso si dice tag quando si intende elemento, e parlando va bene, ma la differenza aiuta quando leggi la documentazione: un tag è il pezzo fra parentesi angolari, un elemento è il pezzo finito della pagina.

Gli attributi aggiungono dettagli

Un tag di apertura può avere attributi, impostazioni aggiuntive scritte come name="value". In <a href="menu.html">Menu</a> l'attributo href dice dove porta il link. In <html lang="en"> l'attributo lang indica la lingua. Metti il valore fra virgolette doppie; lo standard ammette alcuni valori senza virgolette, ma le virgolette non creano mai problemi. Più attributi si separano con spazi, e il loro ordine non conta. Alcuni attributi, come required su un campo di un modulo, sono booleani: basta scriverne il nome per attivarli.

<p class="note" id="opening">We open at <strong>7 am</strong>.</p>

Annidamento: chiudi in ordine inverso

Gli elementi si mettono dentro altri elementi. Nell'esempio sopra, <strong> sta dentro <p>. La regola è la stessa delle parentesi in aritmetica: ciò che si è aperto per ultimo si chiude per primo. <p><strong>7 am</p></strong> è sbagliato perché il paragrafo si chiude mentre l'elemento strong è ancora aperto. I browser cercano di indovinare che cosa intendevi, ma errori diversi portano a ipotesi diverse. Rientrare gli elementi figli di due spazi, come fanno gli esempi di questo corso, rende l'annidamento facile da vedere.

Elementi vuoti

Alcuni elementi non possono avere contenuto, quindi non hanno tag di chiusura. Si chiamano elementi vuoti (void). I più comuni sono <br> (un a capo), <hr> (una separazione tematica), <img>, <input>, <meta> e <link>. Potresti vederli scritti con una barra, come <br />; in HTML la barra è ammessa e ignorata, quindi funzionano entrambe le forme.

Significato, non aspetto

Dentro un paragrafo puoi segnare delle parole con <strong> per una forte importanza e con <em> per l'enfasi, quella che cambia il modo in cui si pronuncia una frase. I browser mostrano strong in grassetto ed em in corsivo, ma il punto è il significato. Uno screen reader può leggerli con una voce diversa, e un motore di ricerca li tratta come parole importanti. Se vuoi il grassetto solo per decorazione, è un compito del CSS. <b> e <i> esistono ancora per il testo che si distingue senza avere più importanza, come il nome di una nave o una parola straniera.

Caratteri speciali e commenti

Siccome < apre un tag, non puoi scriverlo come testo normale. Scrivi invece un riferimento a carattere: < per minore di, > per maggiore di e & per la e commerciale stessa. Un commento, <!-- like this -->, viene ignorato dal browser ed è comodo per lasciarti delle note. Infine, l'HTML comprime gli spazi bianchi: dieci spazi o tre a capo nel file compaiono come un solo spazio. L'impaginazione nasce dagli elementi e dal CSS, non dalla barra spaziatrice.