HTML5 ha rivoluzionato il modo in cui progettiamo e sviluppiamo pagine web, introducendo nuovi elementi che offrono maggiore flessibilità e semantica al nostro codice. Oltre ai tag più comuni come <div> e <p>, esistono alcuni tag meno conosciuti ma altrettanto interessanti e utili. Esploreremo alcune di queste curiosità che potrebbero sorprenderti!
<figure> e <figcaption>
Mentre molti sono familiari con <img> per inserire immagini nelle pagine web, <figure> e <figcaption> aggiungono un livello di contesto. <figure> è utilizzato per avvolgere qualsiasi contenuto multimediale, come immagini, audio, video o codice embed, mentre <figcaption> fornisce una didascalia per quel contenuto.
<figure>
<img src="immagine.jpg" alt="Descrizione dell'immagine">
<figcaption>Didascalia per l'immagine</figcaption>
</figure>
<time>
Se devi rappresentare date o orari nel tuo markup HTML, <time> è il tag da utilizzare. È utile per indicare al browser e ai motori di ricerca il significato semantico di una data o di un orario.
<p>La mia festa di compleanno è il <time datetime="2024-05-15">15 Maggio</time>.</p>
<details> e <summary>
Se hai bisogno di creare sezioni espandibili di contenuto, <details> e <summary> sono la soluzione perfetta. <details> racchiude il contenuto che può essere nascosto o visualizzato, mentre <summary> fornisce un’intestazione per la sezione.
<details>
<summary>Clicca qui per espandere/nascondere il contenuto</summary>
<p>Questo è il contenuto che può essere espanso o nascosto.</p>
</details>
<meter>
Se hai bisogno di visualizzare una misurazione o un valore su una scala, <meter> è ciò che fa per te. Questo tag rappresenta un valore numerico in un intervallo definito.
<meter value="70" min="0" max="100">70 out of 100</meter>
<progress>
Anche <progress> è simile a <meter>, ma viene utilizzato per indicare lo stato di avanzamento di un’attività in corso.
Conclusione
HTML5 offre una vasta gamma di tag che vanno oltre i fondamentali. Esplorare e comprendere l’utilizzo di questi tag meno noti può portare a una migliore semantica, accessibilità e esperienza utente delle tue pagine web. Sperimenta con questi tag nella tua prossima creazione web e scopri come possono arricchire il tuo codice HTML.