Intestazioni
HTML mette a disposizione sei livelli di titolo, da <h1> (il più importante) a <h6>:
<h1>Titolo principale della pagina</h1>
<h2>Sezione</h2>
<h3>Sottosezione</h3>
Regole d’oro: un solo <h1> per pagina, e non saltare livelli (da <h2> si passa a <h3>, non direttamente a <h4>). I motori di ricerca usano le intestazioni per capire la struttura della pagina, quindi seguirle bene è anche una buona pratica SEO.
Paragrafi
Il tag <p> definisce un blocco di testo:
<p>Questo è un paragrafo. Ogni paragrafo inizia su una nuova riga e il browser aggiunge automaticamente uno spazio verticale prima e dopo.</p>
Formattazione del testo
All’interno di un paragrafo puoi evidenziare porzioni di testo con tag in linea:
| Tag | Effetto |
|---|---|
<strong> | Testo importante, mostrato in grassetto |
<em> | Testo enfatizzato, mostrato in corsivo |
<u> | Testo sottolineato |
<s> | Testo barrato (indica qualcosa non più valido) |
<mark> | Testo evidenziato, come con un evidenziatore |
<small> | Testo di dimensione ridotta (note, clausole) |
<sub> / <sup> | Pedice / apice (es. H2O, x2) |
<p>Questo prodotto è <strong>disponibile solo online</strong> e <em>in edizione limitata</em>.</p>
Nota:
<b>e<i>esistono ancora e visivamente fanno lo stesso effetto di<strong>e<em>, ma hanno un significato puramente estetico, senza valore semantico. Per un HTML corretto e più accessibile, preferisci sempre<strong>e<em>.
Per andare a capo senza iniziare un nuovo paragrafo, si usa <br> (void, nessuna chiusura) — da usare con parsimonia, solo dove ha davvero senso (es. un indirizzo su più righe), non per creare spaziatura, che è compito del CSS.
Elementi a blocco e in linea
Ogni elemento HTML si comporta in uno di due modi:
- A blocco (
<h1>–<h6>,<p>,<div>,<ul>…): occupa tutta la larghezza disponibile e va a capo prima e dopo. - In linea (
<strong>,<em>,<a>,<span>,<img>…): resta dentro il flusso del testo, senza andare a capo.
<p>Questo è un paragrafo con un <strong>elemento in linea</strong> al suo interno: il testo prosegue senza andare a capo.</p>
Capire questa differenza è fondamentale: torneremo su questo concetto quando inizieremo il CSS, perché determina come puoi controllare dimensioni e posizionamento di ogni elemento.
Esercitazione pratica
Scrivi una pagina con un <h1>, due <h2> di sezione, alcuni paragrafi e almeno tre tag di formattazione del testo diversi.
Approfondisci
- MDN — Elementi block-level e inline
- Prossima lezione: Link, immagini e media