Il tag <CAPTION> in Html
In questa lezione ti parlo del tag <caption> del linguaggio HTML
<caption> </caption>
Il tag <caption> ti permette di aggiungere un titolo a una tabella in una pagina web.
Il titolo va inserito tra il tag di apertura <caption> e il tag di chiusura </caption>
<caption>Titolo della tabella</caption>
Ti faccio un esempio pratico
Inserisci il tag <capion> subito dopo il tag <table> che definisce la tabella.
<table>
<caption>Titolo della tabella</caption>
<thead>
<tr> <th>Intestazione della colonna 1</th> <th>Intestazione della colonna 2</th> </tr> </thead>
<tbody>
<tr> <td>Riga 1, colonna 1</td> <td>Riga 1, colonna 2</td> </tr>
<tr> <td>Riga 2, colonna 1</td> <td>Riga 2, colonna 2</td> </tr>
</tbody>
</table>
Il browser interpreta il tag <caption> come un titolo da aggiungere sopra lla tabella.
La tabella viene visualizzata sul browser dell'utente in questo modo.
| Intestazione della colonna 1 | Intestazione della colonna 2 |
|---|---|
| Riga 1, colonna 1 | Riga 1, colonna 2 |
| Riga 2, colonna 1 | Riga 2, colonna 2 |
Dove si utilizza il tag <caption>?
Puoi utilizzare il tag <caption> all'interno del tag <table>, nella sezione sezione <body> del documento HTML.
Ecco un esempio di pagina web completa.
- <!DOCTYPE html>
- <html>
- <head>
- ...
- </head>
- <body>
- <table>
- <caption> titolo della tabella </caption>
- <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr>
- <tr> <td> 4 </td> <td> 5 </td> <td> 6 </td> </tr>
- <tr> <td> 7 </td> <td> 8 </td> <td> 9 </td> </tr>
- </table>
- </body>
- </html>
Perché usare il tag <caption>?
Il tag <caption> migliora l'accessibilità della pagina web perché aiuta gli utenti con disabilità visive a comprendere il contenuto della tabella.
In questo modo gli utenti con disabilità visive che utilizzano un lettore di schermo (screen reader) sono in grado di ascoltare la descrizione della tabella prima dei dati.
In generale, il tag caption> migliora anche l'esperienza utente, perché aggiunge un elemento informativo alla tabella.
Inoltre, agevola il posizionamento sui motori di ricerca, perché fornisce al search engine un'ulteriore informazione sul contenuto della tabella.
