 |
HTML5 ha introdotto una serie di attributi potenti che migliorano l’esperienza utente, l’accessibilità, la sicurezza e le prestazioni delle pagine web. In questo articolo vediamo quelli più utili e avanzati, con spiegazioni ed esempi pratici.
✅ Attributi per contenuti dinamici e interattivi
🔹 contenteditable
Permette di rendere modificabile il contenuto di un elemento direttamente dal browser, senza usare JavaScript.
<div contenteditable="true"> Click here to edit this text. </div>🔹 draggable
Rende un elemento trascinabile con il mouse.
<img src="logo.png" draggable="true">🔹 hidden
Nasconde un elemento dalla vista e dalla lettura degli screen reader, ma lo mantiene nel DOM.
<div hidden>This message is hidden</div>🔹 translate
Controlla se il contenuto deve essere tradotto automaticamente dal browser.
<span translate="no">HTML5</span>🔹 spellcheck
Abilita o disabilita il controllo ortografico su un campo di testo.
<textarea spellcheck="true">Check spelling here...</textarea>✅ Attributi per moduli e input avanzati
🔹 autofocus
Imposta automaticamente il focus su un campo al caricamento della pagina.
<input type="text" placeholder="Your name" autofocus>🔹 required, pattern, minlength, maxlength
Consentono la validazione automatica dei dati nei form.
<input type="text" pattern="[A-Za-z]+" minlength="3" maxlength="10" required placeholder="Name">🔹 placeholder
Mostra un testo guida all’interno del campo di input.
<input type="search" placeholder="Search...">🔹 form
Collega un campo di input a un form anche se si trova fuori dal tag <form> nel DOM.
<form id="myForm" action="/submit"></form> <input type="text" name="email" form="myForm">🔹 novalidate
Disattiva la validazione automatica del browser per i form HTML5.
<form novalidate> <input type="email" required> </form>🔹 multiple
Consente la selezione di più file o valori in un campo input.
<input type="file" multiple>🔹 accept
Limita i tipi di file che l’utente può caricare.
<input type="file" accept="image/png, image/jpeg">🔹 list + datalist
Offre suggerimenti predefiniti all’utente tramite completamento automatico.
<input list="browsers"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> </datalist>🔹 range + step
Crea uno slider per valori numerici con passo definito.
<input type="range" min="0" max="100" step="10">🔹 type="color"
Crea un selettore di colore nativo del browser per scegliere un colore esadecimale tramite palette.
<input type="color" value="#ff0000">✅ Attributi per media e file
🔹 download
Forza il download di un file anziché aprirlo nel browser.
<a href="manual.pdf" download="User_Guide.pdf">Download PDF</a>🔹 controls, autoplay, loop, muted
Controllano il comportamento di un contenuto audio/video incorporato.
<video src="video.mp4" controls autoplay loop muted></video>✅ Attributi per immagini responsive
🔹 srcset + sizes
Serve immagini diverse in base alla risoluzione o dimensione dello schermo.
<img src="img-default.jpg" srcset="img-small.jpg 480w, img-medium.jpg 800w, img-large.jpg 1200w" sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px" alt="Mountain landscape">🔹 picture + source
Offre controllo avanzato, permettendo il cambio di immagine o formato in base a media query.
<picture> <source srcset="image.webp" type="image/webp"> <source srcset="image.jpg" type="image/jpeg"> <img src="fallback.jpg" alt="Responsive image"> </picture>🔄 srcset vs picture
srcset è ideale per cambiare solo la risoluzione. <picture> consente anche il cambio di formato o contenuto.
<picture> <source srcset="image@1x.webp 1x, image@2x.webp 2x" type="image/webp"> <source srcset="image@1x.jpg 1x, image@2x.jpg 2x" type="image/jpeg"> <img src="image@1x.jpg" alt="Responsive image"> </picture>🔹 loading="lazy"
Ritarda il caricamento delle immagini finché non sono visibili nel viewport, migliorando le prestazioni iniziali della pagina.
<img src="photo.jpg" alt="Gallery image" loading="lazy">✅ Attributi per la sicurezza
🔹 integrity
Verifica che una risorsa esterna (come uno script) non sia stata modificata, controllando l’hash.
<script src="https://cdn.example.com/library.min.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxJvB1JCqQ=" crossorigin="anonymous"> </script>Come generare l’hash? Puoi usare:
openssl dgst -sha384 -binary script.js | openssl base64 -A✅ Attributi per accessibilità (ARIA)
🔹 aria-label
Fornisce un’etichetta testuale accessibile per screen reader.
<button aria-label="Close menu">✕</button>📌 Conclusione
Gli attributi HTML5 ti permettono di:
- Costruire form dinamici, validati automaticamente e facili da usare
- Ottimizzare immagini per diversi dispositivi e connessioni
- Controllare il comportamento dei media in modo intuitivo
- Gestire contenuti accessibili e interattivi senza JavaScript
- Migliorare la sicurezza delle risorse esterne con l’attributo
integrity
Imparare a usare questi attributi non solo migliora la qualità del codice HTML, ma anche l’esperienza dell’utente, la performance del sito e la compatibilità tra browser e dispositivi.
Follow me #techelopment
Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment
