L’HTML è un Living Standard in costante evoluzione, mantenuto dal WHATWG (Web Hypertext Application Technology Working Group). A differenza delle vecchie versioni numerate (HTML4, XHTML, HTML5), lo standard viene aggiornato continuamente con nuovi elementi, attributi e API. Il biennio 2025-2026 ha portato diverse novità significative che semplificano lo sviluppo web, riducono la dipendenza da JavaScript e migliorano le performance. Vediamo le più importanti.
L’Attributo popover: Popup Nativi Senza JavaScript
L’attributo popover è probabilmente la novità HTML più impattante degli ultimi anni. Permette di creare popup, tooltip, menu dropdown e notifiche toast completamente in HTML, senza una singola riga di JavaScript. Qualsiasi elemento può diventare un popover aggiungendo l’attributo, e un pulsante può attivarlo tramite popovertarget:
<button popovertarget="info-popup">Mostra info</button>
<div id="info-popup" popover>
<h3>Informazioni</h3>
<p>Questo popup è stato creato senza JavaScript!</p>
</div>Il popover supporta il light dismiss (si chiude cliccando fuori o premendo Escape), viene renderizzato nel top layer del browser (sopra qualsiasi z-index) e ha due modalità: auto (default, con light dismiss) e manual (richiede chiusura esplicita). L’attributo popovertargetaction permette di specificare se il pulsante deve alternare (toggle), mostrare (show) o nascondere (hide) il popover.
Questa API ha raggiunto il supporto completo in tutti i browser principali nel 2024 ed è pronta per la produzione. Per una guida approfondita all’uso del popover e del tag dialog, consultate il nostro articolo dedicato.
L’Elemento search e Semantic HTML
L’elemento <search> è un nuovo elemento semantico che identifica una sezione della pagina contenente funzionalità di ricerca. Prima della sua introduzione, si usava <form role="search"> — ora esiste un elemento dedicato:
<search>
<form action="/risultati">
<label for="q">Cerca nel sito:</label>
<input type="search" id="q" name="q" placeholder="Cerca...">
<button type="submit">Cerca</button>
</form>
</search>L’elemento <search> ha il ruolo ARIA implicito di search, rendendo automaticamente la sezione identificabile dagli screen reader come area di ricerca. Può contenere non solo form di ricerca tradizionali ma anche interfacce di filtro e ricerca avanzata. È supportato da tutti i browser moderni dal 2023.
L’Attributo fetchpriority: Controllo della Priorità di Caricamento
L’attributo fetchpriority permette di influenzare la priorità con cui il browser scarica le risorse. Accetta tre valori: high, low e auto (default). È applicabile a <img>, <link>, <script> e <iframe>:
<!-- Immagine hero: priorità alta -->
<img src="hero.webp" fetchpriority="high" alt="Hero image">
<!-- Immagini below-the-fold: priorità bassa -->
<img src="gallery-1.jpg" fetchpriority="low" loading="lazy" alt="Galleria 1">
<!-- Script non critico: priorità bassa -->
<script src="analytics.js" fetchpriority="low" async></script>
<!-- Preload di una risorsa critica -->
<link rel="preload" href="font.woff2" as="font" fetchpriority="high" crossorigin>Questo attributo è particolarmente utile per ottimizzare il Largest Contentful Paint (LCP): assegnando fetchpriority="high" all’immagine LCP, si segnala al browser di scaricarla prima di altre risorse con la stessa priorità intrinseca. Google ha documentato miglioramenti di 100-400 millisecondi nell’LCP con l’uso corretto di fetchpriority. Per approfondire l’impatto sulle metriche Core Web Vitals, consultate la nostra guida.
Declarative Shadow DOM, inert e blocking
Il Declarative Shadow DOM permette di creare Shadow DOM direttamente nel markup HTML senza JavaScript, tramite l’attributo shadowrootmode su un elemento <template>:
<my-component>
<template shadowrootmode="open">
<style>
p { color: blue; }
</style>
<p>Contenuto nel Shadow DOM</p>
<slot></slot>
</template>
<span>Contenuto nel Light DOM (inserito nello slot)</span>
</my-component>Questo è fondamentale per il Server-Side Rendering (SSR) dei Web Components: prima del Declarative Shadow DOM, era impossibile renderizzare Shadow DOM sul server, poiché richiedeva JavaScript. Ora i Web Components possono essere renderizzati completamente dal server, migliorando drasticamente le performance di caricamento iniziale.
L’attributo inert rende un elemento e tutti i suoi discendenti non interattivi e invisibili alle tecnologie assistive. È perfetto per contenuti dietro una modale aperta, sezioni di un wizard non ancora raggiunta o contenuti in fase di caricamento:
<main inert>
<!-- Questo contenuto non è interattivo mentre la modale è aperta -->
</main>
<dialog open>
<p>Modale attiva</p>
</dialog>L’attributo blocking=”render” può essere applicato a <script>, <style> e <link> per indicare esplicitamente che la risorsa blocca il rendering. Sebbene possa sembrare controintuitivo bloccare il rendering, è utile per garantire che CSS critici o script di configurazione siano caricati prima che l’utente veda qualsiasi contenuto, evitando flash di contenuto non stilizzato.
Speculation Rules API e View Transitions
La Speculation Rules API è un sistema moderno per il pre-rendering delle pagine, specificato tramite un tag <script type="speculationrules"> nell’HTML:
<script type="speculationrules">
{
"prerender": [
{
"where": {
"href_matches": "/prodotti/*"
},
"eagerness": "moderate"
}
],
"prefetch": [
{
"urls": ["/chi-siamo", "/contatti"]
}
]
}
</script>A differenza del tradizionale <link rel="prefetch">, le Speculation Rules supportano il pre-rendering completo: la pagina viene non solo scaricata ma anche renderizzata in background, rendendo la navigazione praticamente istantanea. L’attributo eagerness controlla quanto aggressivamente il browser deve eseguire la speculazione: immediate, eager, moderate o conservative.
Le View Transitions API, sebbene principalmente CSS/JavaScript, hanno una connessione HTML attraverso la possibilità di specificare nomi di transizione sugli elementi tramite la proprietà CSS view-transition-name. Questo permette animazioni fluide tra pagine diverse in applicazioni multi-page (MPA), creando un’esperienza simile alle app native senza JavaScript complesso. Le View Transitions cross-document sono supportate in Chrome e stanno arrivando negli altri browser.
Tra le proposte future in fase di sviluppo troviamo l’elemento <selectlist> (ora rinominato in <selectmenu> e poi in <select> potenziato) che permetterà di personalizzare completamente l’aspetto dei menu dropdown, e il CSS Anchor Positioning che, pur essendo una feature CSS, è strettamente legato all’attributo popover per posizionare popup e tooltip relativamente ad altri elementi HTML.
Hai bisogno di aiuto con l’implementazione delle ultime novità HTML nel tuo progetto? G Tech Group offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a su*****@********up.it o via WhatsApp al 0465 84 62 45.