Da questa lezione iniziamo ad esaminare gli elementi che l’HTML mette a disposizione dello sviluppatore per la creazione di pagine web, cioè i tag da utilizzare all’interno del corpo della pagina.
I titoli: h1, h2, …, h6
Iniziamo con gli elementi di testo; nel caso specifico parliamo dei titoli o heading che dir si voglia. In HTML esistono sei livelli di tag hX: h1, h2, h3, h4, h5 e h6, il più grande (ed importante) dei quali è h1 mentre, viceversa, il meno importante è h6.
Utilizzare questi tag è importante non tanto da un punto di vista estetico (che in questo contesto non ci interessa più di tanto) ma funzionale in quanto il corretto utilizzo di questo markup si rivela fondamentale sia dal punto di vista dell’accessibilità dei contenuti che dal punto di vista SEO.
In genere non si utilizza mai più di h1, h2 e h3, trattandosi rispettivamente di titolo, sottotitolo ed eventuale sottosottotitolo, tuttavia – come detto – è possibile arrivare fino ad h6.
Visivamente parlando il tag hX è un elemento di tipo block (produce un ritorno a capo) formattato in grassetto e con uno spazio sia superiore che inferiore. La dimensione del carattere degrada man mano (h1 è rappresentato con un font molto grande che via via diminuisce fino al tag h6 che è il titolo più piccolo oltre che meno importante).
Ovviamente l’aspetto dei titoli h1, h2, h3, ecc. può essere facilmente manipolato con i CSS.
Facciamo dunque un esempio di pagina con titolo e sottotitolo:
<html>
<head>
<title>Titolo della pagina HTML...</title>
</head>
<body>
<h1>Titolo principale...</h1>
<h2>Sottotitolo...</h2>
</body>
</html>Una precisazione: il codice HTML qui sopra prevede due linee vuote al solo scopo di renderlo più leggibile: dal punto di vista dell’output (cioè del risultato visivo percepito dall’utente) le due linee bianche non esistono! Il precedente esempio, infatti, può essere scritto anche come segue:
<html>
<head>
<title>Titolo della pagina...</title>
</head>
<body>
<h1>Titolo della pagina...</h1>
<h2>Sottotitolo della pagina...</h2>
</body>
</html><html>
<head>
<title>Titolo della pagina...</title>
</head>
<body>
<h1>Titolo della pagina...</h1>
<h2>Sottotitolo della pagina...</h2>
</body>
</html>senza alcuna diversità in fase di output sulla pagina: si tratta solo di una questione di ordine e di leggibilità del codice sorgente da parte di chi lo produce o di chi vuole leggerlo.
Paragrafi, Div e Span
Passiamo adesso all’utilizzo dei tag HTML che normalmente vengono utilizzati come "contenitori" per i blocchi di testo. Questi sono:
- Paragrafi – <p>
- Div – <div> (contenitore generico)
- Span – <span>
Dal punto di vista visivo, la differenza tra questi tag consiste nel fatto che p produce un ritorno a capo ed un’interlinea vuoto; div produce solo il ritorno a capo; span non produce alcun ritorno a capo (normalmente è utilizzato all’interno di un <p> o <div>).
Da un punto di vista "tecnico" possiamo dire che mentre <p> e <div> sono elementi di tipo block, <span> è un elemento di tipo inline che, tradotto in parole semplici, significa che segue il flusso della linea senza generare un ritorno a capo.
E’ bene precisare ancora che mentre <p> e <span> sono dei tag specifici per il testo, il tag <div> è un tag "contenitore" generico che può essere utilizzato per gestire la posizione e l’aspetto di qualsiasi elemento della pagina ed ha caratteristiche polimorfiche (mediante l’uso dei CSS il tag <div> può persino sostituire l’uso delle tabelle!).
Vediamo un esempio di utilizzo di questi tre tag per gestire blocchi di testo:
<html>
<head>
<title>Titolo della pagina...</title>
</head>
<body>
<p>Testo...</p>
<div>Testo...</div>
<div>Testo... <span>Testo...</span></div>
</body>
</html>E’ possibile utilizzare l’uno, l’altro o l’altro ancora a seconda delle specifiche esigenze, tenendo presente che è possibile modificare i comportamenti di default, descritti in precedenza, attraverso i CSS.
Per quanto riguarda il tag span è opportuno puntualizzare che il suo utilizzo non comporta, di default, nessun cambiamento visivo per il testo marcato, il suo utilizzo tipico consiste nel raggruppare elementi testuali per poi stilizzari mediante i CSS oppure manipolarli attraverso Javascript. Vediamo un esempio di utilizzo del tag span per effettuare una semplice stilizzazione:
<p>Sto leggendo una lezione della guida HTML su <span style="color:#FF6600">Mr.Webmaster, il portale dei webmaster italiani!</span></p>Possiamo quindi dire, forse impropriamente, che span è un tag di marcatura del testo "neutro" in quanto il suo aspetto e/o il suo funzionamento sono delegati allo sviluppatore mediante l’utilizzo dei fogli di stile CSS.
Allineare il testo
Sia <p> che <div> supportano l’attributo align che permette di allineare il testo a sinistra (left, di default), al centro (center), a destra (right) o in modo giustificato (justify). Vediamo un esempio di utilizzo dell’attributo align:
<p align="center">... testo centrato...</p>
<div align="justify">...testo giustificato...</div>