{"id":164068,"date":"2026-02-08T09:00:00","date_gmt":"2026-02-08T08:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/novita-html-2025-2026-elementi-attributi-api\/"},"modified":"2026-02-08T09:00:00","modified_gmt":"2026-02-08T08:00:00","slug":"novita-html-2025-2026-elementi-attributi-api","status":"publish","type":"post","link":"https:\/\/nuovosito.gtechgroup.it\/blog\/novita-html-2025-2026-elementi-attributi-api\/","title":{"rendered":"Novit\u00e0 HTML 2025-2026: Nuovi Elementi, Attributi e API"},"content":{"rendered":"

L’HTML \u00e8 un Living Standard<\/strong> 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\u00e0 significative che semplificano lo sviluppo web, riducono la dipendenza da JavaScript e migliorano le performance. Vediamo le pi\u00f9 importanti.<\/p>\n

L’Attributo popover: Popup Nativi Senza JavaScript<\/h2>\n

L’attributo popover<\/code> \u00e8 probabilmente la novit\u00e0 HTML pi\u00f9 impattante degli ultimi anni. Permette di creare popup, tooltip, menu dropdown e notifiche toast<\/strong> completamente in HTML, senza una singola riga di JavaScript. Qualsiasi elemento pu\u00f2 diventare un popover aggiungendo l’attributo, e un pulsante pu\u00f2 attivarlo tramite popovertarget<\/code>:<\/p>\n

<button popovertarget=\"info-popup\">Mostra info<\/button>\n\n<div id=\"info-popup\" popover>\n  <h3>Informazioni<\/h3>\n  <p>Questo popup \u00e8 stato creato senza JavaScript!<\/p>\n<\/div><\/code><\/pre>\n
Il popover supporta il light dismiss<\/strong> (si chiude cliccando fuori o premendo Escape), viene renderizzato nel top layer<\/strong> del browser (sopra qualsiasi z-index) e ha due modalit\u00e0: auto<\/code> (default, con light dismiss) e manual<\/code> (richiede chiusura esplicita). L’attributo popovertargetaction<\/code> permette di specificare se il pulsante deve alternare (toggle), mostrare (show) o nascondere (hide) il popover.<\/p>\n
Questa API ha raggiunto il supporto completo in tutti i browser principali nel 2024 ed \u00e8 pronta per la produzione. Per una guida approfondita all’uso del popover e del tag dialog<\/a>, consultate il nostro articolo dedicato.<\/p>\n
L’Elemento search e Semantic HTML<\/h2>\n
L’elemento <search><\/code> \u00e8 un nuovo elemento semantico che identifica una sezione della pagina contenente funzionalit\u00e0 di ricerca. Prima della sua introduzione, si usava <form role=\"search\"><\/code> \u2014 ora esiste un elemento dedicato:<\/p>\n
<search>\n  <form action=\"\/risultati\">\n    <label for=\"q\">Cerca nel sito:<\/label>\n    <input type=\"search\" id=\"q\" name=\"q\" placeholder=\"Cerca...\">\n    <button type=\"submit\">Cerca<\/button>\n  <\/form>\n<\/search><\/code><\/pre>\n
L’elemento <search><\/code> ha il ruolo ARIA implicito di search<\/code>, rendendo automaticamente la sezione identificabile dagli screen reader come area di ricerca. Pu\u00f2 contenere non solo form di ricerca tradizionali ma anche interfacce di filtro e ricerca avanzata. \u00c8 supportato da tutti i browser moderni dal 2023.<\/p>\n
L’Attributo fetchpriority: Controllo della Priorit\u00e0 di Caricamento<\/h2>\n
L’attributo fetchpriority<\/code> permette di influenzare la priorit\u00e0 con cui il browser scarica le risorse. Accetta tre valori: high<\/strong>, low<\/strong> e auto<\/strong> (default). \u00c8 applicabile a <img><\/code>, <link><\/code>, <script><\/code> e <iframe><\/code>:<\/p>\n
<!-- Immagine hero: priorit\u00e0 alta -->\n<img src=\"hero.webp\" fetchpriority=\"high\" alt=\"Hero image\">\n\n<!-- Immagini below-the-fold: priorit\u00e0 bassa -->\n<img src=\"gallery-1.jpg\" fetchpriority=\"low\" loading=\"lazy\" alt=\"Galleria 1\">\n\n<!-- Script non critico: priorit\u00e0 bassa -->\n<script src=\"analytics.js\" fetchpriority=\"low\" async><\/script>\n\n<!-- Preload di una risorsa critica -->\n<link rel=\"preload\" href=\"font.woff2\" as=\"font\" fetchpriority=\"high\" crossorigin><\/code><\/pre>\n
Questo attributo \u00e8 particolarmente utile per ottimizzare il Largest Contentful Paint (LCP)<\/strong>: assegnando fetchpriority=\"high\"<\/code> all’immagine LCP, si segnala al browser di scaricarla prima di altre risorse con la stessa priorit\u00e0 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<\/a>, consultate la nostra guida.<\/p>\n
Declarative Shadow DOM, inert e blocking<\/h2>\n
Il Declarative Shadow DOM<\/strong> permette di creare Shadow DOM direttamente nel markup HTML senza JavaScript, tramite l’attributo shadowrootmode<\/code> su un elemento <template><\/code>:<\/p>\n
<my-component>\n  <template shadowrootmode=\"open\">\n    <style>\n      p { color: blue; }\n    <\/style>\n    <p>Contenuto nel Shadow DOM<\/p>\n    <slot><\/slot>\n  <\/template>\n  <span>Contenuto nel Light DOM (inserito nello slot)<\/span>\n<\/my-component><\/code><\/pre>\n
Questo \u00e8 fondamentale per il Server-Side Rendering (SSR)<\/strong> dei Web Components: prima del Declarative Shadow DOM, era impossibile renderizzare Shadow DOM sul server, poich\u00e9 richiedeva JavaScript. Ora i Web Components possono essere renderizzati completamente dal server, migliorando drasticamente le performance di caricamento iniziale.<\/p>\n
L’attributo inert<\/strong> rende un elemento e tutti i suoi discendenti non interattivi e invisibili alle tecnologie assistive. \u00c8 perfetto per contenuti dietro una modale aperta, sezioni di un wizard non ancora raggiunta o contenuti in fase di caricamento:<\/p>\n
<main inert>\n  <!-- Questo contenuto non \u00e8 interattivo mentre la modale \u00e8 aperta -->\n<\/main>\n<dialog open>\n  <p>Modale attiva<\/p>\n<\/dialog><\/code><\/pre>\n
L’attributo blocking=”render”<\/strong> pu\u00f2 essere applicato a <script><\/code>, <style><\/code> e <link><\/code> per indicare esplicitamente che la risorsa blocca il rendering. Sebbene possa sembrare controintuitivo bloccare il rendering, \u00e8 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.<\/p>\n
Speculation Rules API e View Transitions<\/h2>\n
La Speculation Rules API<\/strong> \u00e8 un sistema moderno per il pre-rendering delle pagine, specificato tramite un tag <script type=\"speculationrules\"><\/code> nell’HTML:<\/p>\n
<script type=\"speculationrules\">\n{\n  \"prerender\": [\n    {\n      \"where\": {\n        \"href_matches\": \"\/prodotti\/*\"\n      },\n      \"eagerness\": \"moderate\"\n    }\n  ],\n  \"prefetch\": [\n    {\n      \"urls\": [\"\/chi-siamo\", \"\/contatti\"]\n    }\n  ]\n}\n<\/script><\/code><\/pre>\n
A differenza del tradizionale <link rel=\"prefetch\"><\/code>, le Speculation Rules supportano il pre-rendering completo<\/strong>: la pagina viene non solo scaricata ma anche renderizzata in background, rendendo la navigazione praticamente istantanea. L’attributo eagerness<\/code> controlla quanto aggressivamente il browser deve eseguire la speculazione: immediate<\/code>, eager<\/code>, moderate<\/code> o conservative<\/code>.<\/p>\n
Le View Transitions API<\/strong>, sebbene principalmente CSS\/JavaScript, hanno una connessione HTML attraverso la possibilit\u00e0 di specificare nomi di transizione sugli elementi tramite la propriet\u00e0 CSS view-transition-name<\/code>. 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.<\/p>\n
Tra le proposte future in fase di sviluppo troviamo l’elemento <selectlist><\/code> (ora rinominato in <selectmenu><\/code> e poi in <select><\/code> potenziato) che permetter\u00e0 di personalizzare completamente l’aspetto dei menu dropdown, e il CSS Anchor Positioning<\/strong> che, pur essendo una feature CSS, \u00e8 strettamente legato all’attributo popover per posizionare popup e tooltip relativamente ad altri elementi HTML.<\/p>\n
Hai bisogno di aiuto con l’implementazione delle ultime novit\u00e0 HTML nel tuo progetto? G Tech Group<\/strong> offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a support@gtechgroup.it<\/strong> o via WhatsApp al 0465 84 62 45<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"
L’HTML \u00e8 un Living Standard in costante evoluzione, mantenuto dal WHATWG (Web Hypertext Application Technology Working Group). A differenza delle vecchie versioni numerate (HTML4, XHTML,…<\/p>\n","protected":false},"author":2,"featured_media":164248,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1246],"tags":[787],"class_list":["post-164068","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-sviluppo-web"],"_links":{"self":[{"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/164068","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=164068"}],"version-history":[{"count":0,"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/164068\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/164248"}],"wp:attachment":[{"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=164068"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=164068"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=164068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}