I tag più avanzati e utili di HTML5: Guida con esempi

HTML5 ha introdotto numerosi tag che vanno ben oltre la semplice strutturazione dei contenuti. Alcuni di questi tag, seppur meno conosciuti, offrono funzionalità molto potenti e flessibili. In questo articolo esploreremo i più avanzati e utili, spiegandone l'uso pratico con esempi.

🔗 Ti piace Techelopment? Dai un'occhiata al sito per tutti i dettagli!

1. <template>

Il tag <template> consente di definire un blocco HTML che non viene renderizzato subito nel DOM. È molto utile per clonare contenuti dinamici con JavaScript, come card, modali o notifiche.

✅ Quando usarlo

Creazione di componenti ripetibili
Template di contenuti che verranno mostrati dinamicamente

💡 Esempio

<template id="card-template">
  <div class="card">
    <h2></h2>
    <p></p>
  </div>
</template>

<script>
  const template = document.getElementById("card-template");
  const clone = template.content.cloneNode(true);
  clone.querySelector("h2").textContent = "Dynamic Title";
  clone.querySelector("p").textContent = "Dynamic content here.";
  document.body.appendChild(clone);
</script>

2. <details> e <summary>

Questi tag creano un componente nativo di espansione/chiusura molto utile per FAQ, sezioni collapsabili o contenuti avanzati.

✅ Quando usarlo

FAQ
Mostrare/nascondere informazioni opzionali

💡 Esempio

<details>
  <summary>What is HTML5?</summary>
  <p>HTML5 is the latest version of the Hypertext Markup Language.</p>
</details>

3. <dialog>

Con <dialog>, HTML5 offre una finestra modale nativa, controllabile via JavaScript. Non c’è più bisogno di librerie esterne per semplici popup/modali.

✅ Quando usarlo

Conferme
Finestra modale di login o messaggi

💡 Esempio

<dialog id="myDialog">
  <p>This is a native HTML5 dialog!</p>
  <button onclick="myDialog.close()">Close</button>
</dialog>

<button onclick="myDialog.showModal()">Open Dialog</button>

4. <picture> — Ottimizzazione per dispositivi mobili e desktop

Il tag <picture> consente di definire più versioni della stessa immagine e lascia al browser il compito di scegliere quella più adatta in base:

alla larghezza dello schermo (media)
al tipo di formato supportato (type)

✅ Quando usarlo

Per caricare una versione leggera su mobile
Per servire immagini ad alta risoluzione su desktop
Per sfruttare formati più efficienti (es. WebP o AVIF)

💡 Esempio completo (mobile vs desktop)

<picture>
  <!-- Versione per schermi larghi (desktop), in formato WebP -->
  <source srcset="image-desktop.webp" media="(min-width: 768px)" type="image/webp">
  
  <!-- Versione per dispositivi mobili, in formato WebP -->
  <source srcset="image-mobile.webp" media="(max-width: 767px)" type="image/webp">
  
  <!-- Fallback JPEG per browser che non supportano WebP -->
  <img src="image-fallback.jpg" alt="A responsive image for all devices">
</picture>

📌 Come funziona:

Se lo schermo è più largo di 768px, verrà usata image-desktop.webp
Se è più stretto di 768px, verrà usata image-mobile.webp
Se il browser non supporta WebP, viene caricato il fallback JPEG

5. <slot> (Shadow DOM)

Il tag <slot> è utilizzato nei Web Components per definire punti di inserimento (placeholder) per i contenuti. Funziona solo all’interno di uno Shadow DOM.

✅ Quando usarlo

Creazione di componenti riutilizzabili
Layout flessibile con contenuti dinamici

💡 Esempio

<template id="myComponent">
  <style>
    div { border: 1px solid gray; padding: 10px; }
  </style>
  <div>
    <slot></slot>
  </div>
</template>

<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      const template = document.getElementById('myComponent').content.cloneNode(true);
      shadow.appendChild(template);
    }
  }
  customElements.define('my-component', MyComponent);
</script>

<my-component>
  <p>This is slotted content!</p>
</my-component>

6. <output>

Il tag <output> serve per mostrare risultati di calcoli o interazioni utente in modo semantico. È utile con form e JavaScript.

✅ Quando usarlo

Mostrare risultati calcolati da input
Interazione live con l’utente

💡 Esempio

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" name="a"> +
  <input type="number" name="b"> =
  <output name="result">0</output>
</form>

7. <datalist>

Il tag <datalist> permette di creare un menu a tendina di suggerimenti associato a un campo di input. È utile per offrire opzioni predefinite pur mantenendo la possibilità di inserimento libero.

✅ Quando usarlo

Per suggerire valori comuni (es. città, lingue, valute…)
Per migliorare la UX di input testuali senza limitare l’utente

💡 Esempio

<label for="browser">Choose your browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

Conclusione

Questi tag rappresentano alcune delle innovazioni semantiche e funzionali più potenti di HTML5. Usarli correttamente consente di scrivere codice più accessibile, mantenibile e performante, spesso eliminando la necessità di librerie esterne.

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog