Quiz : Le HTML a-t-il encore sa place sur votre CV ?

La balise <ul> crée une liste non ordonnée, dont les éléments sont généralement marqués par des puces.

L’élément <dd> définit une description, une définition ou une valeur dans une liste de description, utilisé dans les balises <dl> pour faire la paire avec <dt> (Terme de description).

Ceci est utile pour afficher des données clé-valeur. Les informations de profil, les paramètres et les statistiques en sont des exemples courants.

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

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

La balise <figure> est généralement utilisée pour encapsuler du contenu (média) autonome, comme une image ou un graphique, accompagnée de <figcaption> pour fournir une légende.

Cela est utile pour les images, les diagrammes, les extraits de code, etc.

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

L’élément <article> est utilisé pour définir un contenu autonome qui peut être distribué ou réutilisé indépendamment.

Il est souvent utilisé pour les articles de blog, les articles de presse, les messages de forum ou les commentaires d’utilisateurs.

Vous pouvez utiliser plusieurs articles sur une page (pour les pages à défilement infini, par exemple). Ou vous pouvez les imbriquer les uns dans les autres pour créer une hiérarchie de « contenu autonome ».

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

<fieldset> est utilisé pour regrouper des contrôles de formulaire connexes, et <legend> fournit un titre/étiquette pour le groupe, améliorant l’accessibilité.

Ceci est utile pour regrouper des éléments de formulaire connexes, comme une section pour l’adresse de livraison ou les détails de paiement.

<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’élément <meter> est utilisé pour représenter une mesure scalaire (unique) dans une plage définie, comme la température, l’utilisation du disque ou un décompte de votes.

Il peut sembler similaire à une barre <progress>, cependant les barres de progression COMMENCENT TOUJOURS à zéro. Par conséquent, les éléments <progress> affichent un percent of completion, tandis qu’un <meter> affiche n’importe quelle valeur dans une plage définissable.

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

L’<source> élément est utilisé pour spécifier les formats de médias disponibles.

Utilisé spécifiquement avec les éléments <video>, <audio> et <picture>, permettant au navigateur de choisir le format le plus approprié.

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

L’élément <hgroup> regroupe un titre avec du contenu secondaire connexe, généralement un ou plusieurs éléments <p>.

Cela peut être utile lorsqu’un titre a un sous-titre, un slogan ou un titre alternatif qui ne doit pas devenir un autre titre dans le plan du document.

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

Le <menu> représente une liste de commandes ou de contrôles interactifs.

Si votre liste est constituée de liens de navigation, utilisez <nav> avec une <ul>. Utilisez <menu> pour des contrôles de type barre d’outils ou des listes de commandes.

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

<details> permet un contenu pliable, et <summary> spécifie un titre visible pour le contenu.

Ceci est utile pour les FAQ, les sections pliables, ou tout contenu pouvant être basculé.

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

L’élément <dialog> est utilisé pour les pop-ups ou les modales, et fournit un balisage sémantique, du CSS étendu et une API native pour ces interactions.

Utilisez JavaScript pour l’ouvrir avec .showModal() pour les dialogues modaux ou .show() pour les dialogues non modaux, et le fermer avec .close() ou une soumission de formulaire utilisant method="dialog".

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

L’élément <time> est utilisé pour les dates, les heures ou les durées. Il peut contenir du texte lisible par l’humain et un attribut datetime lisible par la machine. HTML n’a pas d’élément <date>.

Les attributs ARIA (Accessible Rich Internet Applications) améliorent l’accessibilité web en fournissant un contexte supplémentaire pour les lecteurs d’écran et autres technologies d’assistance.

Il existe des rôles, des états et des propriétés qui peuvent être utilisés pour décrire des éléments.

<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’attribut role décrit

l’objectif d’un élément aux technologies d’assistance, contribuant à améliorer l’accessibilité.