Quiz: L'HTML ha ancora senso sul tuo CV?

Il tag <ul> crea una lista non ordinata, con elementi solitamente contrassegnati da punti elenco.

L’elemento <dd> definisce una descrizione, una definizione o un valore all’interno di una lista di descrizione, utilizzato all’interno dei tag <dl> per fare coppia con <dt> (Description Term).

Questo è estremamente utile quando si mostrano dati di tipo chiave-valore. Le informazioni del profilo, le impostazioni e le statistiche sono esempi comuni di applicazione.

<dl>
<dt>JS</dt>
<dd>Client-side</dd>
<dd>Server-side</dd>

<dt>HTML</dt>
<dd>Client-side</dd>
</dl>

Il tag <figure> viene solitamente utilizzato per racchiudere contenuti (multimediali) indipendenti, come un’immagine o un grafico, insieme a <figcaption> per fornire una didascalia.

Questo è utile per immagini, diagrammi, frammenti di codice e altro ancora.

<figure>
<img src="../image.jpg" alt="Description of image">
<figcaption>Image caption</figcaption>
</figure>

L’elemento <article> viene utilizzato per definire una porzione di contenuto indipendente che può essere distribuita o riutilizzata autonomamente.

Viene spesso impiegato per post di blog, articoli di testate giornalistiche, post di forum o commenti degli utenti.

Puoi utilizzare più articoli in una pagina (per pagine a scorrimento infinito, ad esempio). Oppure, puoi annidarli l’uno dentro l’altro per creare una gerarchia di “contenuti indipendenti”.

<article>
<h2>Article Title</h2>
<p>Article content...</p>
<article class="discussion">
<h3>Comment by User</h3>
<p>Comment content...</p>
</article>
</article>

L’elemento <fieldset> viene utilizzato per raggruppare controlli di form correlati, mentre <legend> fornisce un titolo o un’etichetta per il gruppo, migliorando notevolmente l’accessibilità.

Questo approccio è fondamentale per organizzare logicamente sezioni complesse, come i dati di spedizione o i dettagli di pagamento, rendendo il form più comprensibile sia per gli utenti che per gli screen reader.

<fieldset>
<legend>Shipping Address</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
...
</fieldset>
<fieldset>
<legend>Payment Details</legend>
<label for="card">Card Number:</label>
<input type="text" id="card" name="card">
...
</fieldset>

L’elemento <meter> viene utilizzato per rappresentare una misurazione scalare (singola) all’interno di un intervallo prestabilito, come la temperatura, l’utilizzo del disco o il conteggio dei voti.

Può sembrare simile a una barra <progress>, tuttavia le barre di avanzamento iniziano SEMPRE da zero. Pertanto, gli elementi <progress> mostrano una percentuale di completamento, mentre un <meter> mostra qualsiasi valore all’interno di un intervallo definibile.

<meter min="-60" max="130" value="75" /> 75°F
<meter min="0" max="100" value="75" /> 75%

L’elemento <source> viene utilizzato per specificare i formati multimediali disponibili.

Nello specifico, si usa con gli elementi <video>, <audio> e <picture>, consentendo al browser di scegliere il formato più adatto.

<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

L’elemento <hgroup> raggruppa un’intestazione con contenuti secondari correlati, solitamente uno o più elementi <p>.

Può essere utile quando un’intestazione ha un sottotitolo, uno slogan o un titolo alternativo che non dovrebbe diventare un’altra intestazione nell’outline del documento.

<article>
<hgroup>
<h1>Frankenstein</h1>
<p>Or: The Modern Prometheus</p>
</hgroup>
<section>
<h2>Chapter 1</h2>
<p>...</p>
</section>
</article>

L’elemento <menu> rappresenta un elenco di comandi o controlli interattivi.

Se la tua lista è composta da link di navigazione, usa <nav> con un <ul>. Usa <menu> per controlli simili a barre degli strumenti o elenchi di comandi.

<menu>
<li><button type="button">Copy</button></li>
<li><button type="button">Paste</button></li>
</menu>

<details> permette di creare contenuti collassabili, mentre <summary> specifica un titolo visibile per tale contenuto.

Questo è utile per FAQ, sezioni comprimibili o qualsiasi contenuto che debba essere attivato/disattivato dall’utente.

<details>
<summary>Click to expand 🤯</summary>
<p>Hidden content! 💥</p>
</details>

L’elemento <dialog> viene utilizzato per pop-up o modali e fornisce markup semantico, CSS esteso e un’API nativa per queste interazioni.

Usa JavaScript per aprirlo con .showModal() per i dialoghi modali o .show() per quelli non modali, e chiudilo con .close() o tramite l’invio di un form che utilizza method="dialog".

<dialog>
<h2>Modal Title</h2>
<p>Modal content...</p>
<button>Close</button>
</dialog>

L’elemento <time> viene utilizzato per date, orari o durate. Può includere contenuti leggibili dall’uomo e un attributo datetime leggibile dalla macchina. HTML non ha un elemento <date>.

Gli attributi ARIA (Accessible Rich Internet Applications) migliorano l’accessibilità web fornendo contesto aggiuntivo per gli screen reader e altre tecnologie assistive.

Esistono ruoli, stati e proprietà che possono essere utilizzati per descrivere gli elementi.

<button aria-label="Close" aria-expanded="true">X</button>
<main aria-live="polite">...</main>
<dialog
role="alertdialog"
aria-modal="true"
aria-labelledby="dialog_label"
aria-describedby="dialog_desc"
></dialog>

L’attributo role descrive lo scopo di un elemento alle tecnologie assistive, aiutando a migliorare l’accessibilità.