Temps de lecture : 13 minutes environ.
Dans ce tutoriel, nous allons explorer des balises HTML moins connues mais puissantes, qui permettent de mieux structurer vos formulaires, ajouter des indicateurs visuels et rendre le contenu plus accessible. Ces balises, entièrement supportées par les navigateurs modernes, offrent des solutions pratiques pour améliorer l’expérience utilisateur sur vos pages web.
1. fieldset et legend : Structurer les Formulaires
La balise fieldset permet de regrouper des champs dans un formulaire pour les rendre plus lisibles, tandis que legend permet d’ajouter un titre descriptif pour le groupe.
<form>
<fieldset>
<legend>Informations Personnelles</legend>
<label for="name">Nom</label>
<input type="text" id="name" name="name">
<label for="firstName">Prénom</label>
<input type="text" id="firstName" name="firstName">
</fieldset>
</form>
Ici, fieldset crée une bordure autour des champs, et legend leur donne un titre, ce qui améliore la lisibilité pour les utilisateurs et le SEO.
2. datalist : Suggérer des Options dans un Champ Texte
La balise datalist permet de fournir des suggestions à l’utilisateur dans un champ de saisie.
<label for="option">Choix :</label>
<input type="text" id="option" name="option" list="optionList">
<datalist id="optionList">
<option value="Option 1"></option>
<option value="Option 2"></option>
<option value="Option 3"></option>
</datalist>
Lorsqu’un utilisateur commence à taper dans le champ texte, les options de datalist apparaissent, facilitant la sélection.
3. meter : Indiquer un Niveau ou une Mesure
La balise meter affiche une barre de mesure avec un code couleur pour visualiser des niveaux ou des résultats.
<p>Résultat :</p>
<meter min="0" max="100" value="30" low="25" high="75" optimum="80"></meter>
Dans cet exemple, la couleur de la barre change en fonction de la valeur : elle sera rouge si la valeur est basse, orange si elle est moyenne, et verte si elle est élevée, indiquant visuellement le niveau.
4. progress : Afficher une Barre de Progression
La balise progress est utilisée pour montrer une progression, comme un téléchargement.
<progress value="60" max="100"></progress>
Cette barre de progression se remplit en fonction de la valeur spécifiée, et peut être utilisée pour indiquer l’avancement d’une tâche.
5. kbd : Afficher des Raccourcis Clavier
La balise kbd permet de signaler des commandes clavier, idéal pour les instructions.
<p>Appuyez sur <kbd>Ctrl</kbd> + <kbd>F5</kbd> pour rafraîchir la page.</p>
Cette balise change légèrement le style de la police pour indiquer visuellement qu’il s’agit d’une touche, aidant ainsi les utilisateurs à identifier les raccourcis.
6. abbr : Définir des Abréviations
La balise abbr permet d’indiquer les abréviations avec leur signification complète.
<p>Le langage <abbr title="Hypertext Markup Language">HTML</abbr> est utilisé pour structurer les pages Web.</p>
Lorsque l’utilisateur survole l’abréviation, une infobulle s’affiche avec la définition, ce qui aide à la compréhension et améliore l’accessibilité.
7. ins et del : Indiquer les Modifications
Ces balises permettent de marquer du contenu ajouté ou supprimé, comme dans un contrôle de version.
<p>Ceci est le <del>texte original</del> <ins>texte modifié</ins>.</p>
del affiche le texte barré pour signaler une suppression, tandis que ins souligne le texte ajouté. Cela peut être utile pour indiquer des modifications directement sur la page.
8. base : Définir une URL de Base pour les Liens
La balise base dans le <head> permet de définir une URL commune pour tous les liens relatifs de la page, simplifiant ainsi leur gestion.
<head>
<base href="https://facebook.com/">
</head>
<body>
<a href="NouvelleTechno">Facebook de NouvelleTechno</a>
</body>
Dans cet exemple, le lien pointera vers https://facebook.com/NouvelleTechno. Cette balise évite de répéter l’URL de base dans chaque lien de la page.
Conclusion
Ces balises HTML, peu utilisées mais puissantes, peuvent considérablement améliorer la structure, la lisibilité et l’interaction utilisateur sur vos pages web. Bien supportées par les navigateurs modernes, elles peuvent être intégrées sans risque pour la compatibilité.
Obtenir de l'aide
Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat.
