Elementi di testo: titoli
Da questa lezione iniziamo ad esaminare gli elementi che l'HTML mette a disposizione dello sviluppatore.
Una doverosa premessa: non essendo questo una guida di design, ma una guida volta alla conoscenza dell'HTML, quello che vedremo, cosi come lo vedremo, non sarà "bello" ma "utile".
Iniziamo con gli elementi di testo; nel caso specifico parliamo dei titoli. In HTML esistono sette livello di titolo: h1, h2, h3, h4, h5, h6 e h7, il più grande dei quali è h1.
Utilizzare questi tag è importante non da un punto di vista estetico dato che la formattazione degli elementi con i CSS è potente al punto tale da poter stilizzare un elemento di testo, piuttosto che un altro, al fine di farli apparire perfettamente uguali.
In genere non si utilizza mai più di h1, h2 e h3, trattandosi rispettivamente di titolo, sottotitolo ed eventuale sottosottotitolo.
L'importanza di questi elementi è determinante anche ai fini delle strategie di posizionamento nei motori di ricerca.
Facciamo dunque un esempio di pagina con titolo e sottotitolo:
<html> <head> <title>Titolo della pagina...</title> </head> <body> <h1>Titolo della pagina...</h1> <h2>Sottotitolo della pagina...</h2> </body> </html>Una precisazione: il codice HTML può essere scritto lasciando, o meno, spazi in orizzontale e in verticale, senza alterare l'aspetto della pagina Web.
Il precedente esempio 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>oppure:
<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 da parte di chi lo produce o di chi vuole leggerlo.