Chaque page web (site web, application web…) est faite de code Hyper Text Makup Langage. Ce langage permet de baliser la page à l’aide de balises HTML auxquelles des règles de style CSS et des scripts JS sont appliqués. Grâce à cela, un rendu visuel et esthétique est rendu possible sur les pages.
Les premières pages web voient le jour dans les années 90 avec l’arrivée du HTML qui est un langage de balisage pour page web. Au départ, les premières versions de HTML se cantonnaient à l’insertion de textes, d’images ou de liens hypertextes. Depuis, HTML a bien évolué jusqu’à sa version 5 et permet de faire bien plus, et de baliser une page avec davantage de balises. Lorsqu’il s’agit de code PHP et JS, les balises HTML et règles de style CSS sont utiles pour baliser et mettre en forme le rendu qui résulte de l’exécution d’un code dynamique côté client ou coté serveur.
Une balise HTML a un nom entouré par des chevrons < >. C’est un élément de marquage qui balise du texte, un lien, une image ou d’autres éléments (comme des conteneurs) pour permettre leur bon affichage visuel sur la page avec une délimitation cohérente.
Les attributs d’une balise HTML fournissent des informations supplémentaires sur la balise, son contenu, ou sa façon de s’afficher.
Il existe deux types de balises HTML :
<div>, fermer une balise de division : </div>.<img />, <hr> /).En ajoutant des règles de style aux balises ou aux classes et identifiants qui leurs sont rattachés, on arrive à personnaliser le style et l’affichage des éléments sur la page.
Voici une liste non exhaustive des balises HTML les plus couramment présentes sur les pages web. Bien sur, il ne s’agit pas de lister toutes les balises, et encore moins d’expliquer le fonctionnement de chacune d’entre elles, mais plutôt de détailler les plus importantes sous forme de glossaire.
Les trois balises indispensables à toute page web :
| Nom de la balise | Usage de la balise |
|---|---|
<html> | Tout le code HTML d’une page se trouve dans cette balise |
<head> | Balise d’en tête de la page |
<body> | Contient tous les éléments visibles sur la page |
| Nom de la balise | Usage de la balise |
|---|---|
<title> | Titre de la page visible dans l’onglet du navigateur web |
<link /> | Lier la page avec une feuille de style CSS ou une ressource JS |
<meta /> | Informations meta (auteur, date, mot clé, description courte) |
<script> | Script JS |
<style> | Règles de style CSS |
Tout élément textuel selon sa fonction d’usage se trouve dans ces balises :
| Nom de la balise | Usage de la balise |
|---|---|
<p> | Corps de texte |
<h1>…<h6> | Hiérarchie des titres (du niveau 1 au niveau 6) |
<a> | Lien hypertexte |
<ol> / <ul> | Liste à puce / Liste numérotée |
<li> | Item d’une liste |
<blockquote> | Citation longue |
<cite> | Citation du titre d’une œuvre ou d’un évènement |
<b> | Texte en gras |
<i> | Texte en italique |
| <u> | Texte souligné |
<strong> | Texte en gras à portée sémantique |
<em> | Texte en italique à portée sémantique |
Les balises sémantiques délimitent le contenu d’une page sémantiquement et sont idéales pour le référencement.
| Nom de la balise | Usage de la balise |
|---|---|
<header> | En tête |
<footer> | Pied de page |
| Menu de navigation |
<main> | Contenu principal de la page |
<section> | Section sur une page |
| Zone d’article |
| Élément indépendant du contenu de la page |
Les éléments visuels permettent de captiver l’attention des utilisateurs en dehors d’un simple texte, les plus utilisées sur les sites web aujourd’hui sont les suivantes :
| Nom de la balise | Usage de la balise |
|---|---|
<figure> | Encapsule du contenu multimédia |
<img /> | Insertion d’une image |
<video> | Insertion d’une vidéo |
<audio> | Insertion d’une bande son |
<iframe> | Insertion d’un élément embarqué dépendant d’un autre site |
<progress> | Barre de progression |
<figcaption> | Légende d’une image |
Elles ne délimitent aucun contenu de façon sémantique, elles ne servent qu’à diviser le contenu visuellement en agençant les éléments dans des conteneurs auxquels on ajoute des règles de style pour personnaliser leur apparence.
| Nom de la balise | Usage de la balise |
|---|---|
<div> | Conteneur |
<span> | Variation du style dans un ensemble uniforme |
A l’origine utilisés pour agencer les éléments avant l’apparition de toutes les possibilités d’agencement CSS, les tableaux sont utilisés pour trier et afficher visuellement des données. On les retrouve essentiellement sur des applications web.
| Nom de la balise | Usage de la balise |
|---|---|
<table> | Encapsule le tableau |
<caption> | Donne un nom au tableau |
<thead> | Section d’en tête du tableau |
<th> | Cellule de l’en tête du tableau |
<tbody> | Section du corps du tableau |
<td> | Cellule du tableau (colonne) |
<tr> | Ligne du tableau |
<tfoot> | Section de pied de page du tableau |
Les balises de formulaire sont utiles pour créer des formulaires de tout type (contact, inscription), bien sur, il est recommandé de maitriser un minimum PHP et MySQL pour en avoir une véritable utilité sur une page interactive, car si la page n’est pas dynamique, le formulaire n’aura aucune utilité.
| Nom de la balise | Usage de la balise |
|---|---|
<form> | Déclaration du formulaire |
<fieldset> | Groupe de champs |
<legend> | Titre d’un groupe de champs |
<label> | Libellé d’un champ qui figure à coté de ce dernier (utile pour l’UX) |
<input /> | Champ de formulaire (texte, mot de passe, case à cocher, bouton, etc.) |
<textarea> | Zone de saisie multiligne |
<select> | Liste déroulante |
<option> | Élément d’une liste déroulante |
<optgroup> | Groupe d’éléments d’une liste déroulante |
<output> | Affiche le résultat d’un calcul ou d’une action d’un utilisateur |
<progress> | Barre de progression dans le cas d’un formulaire en plusieurs étapes |
Pour explorer tous les éléments HTML existants et comprendre davantage leur fonctionnement, je recommande de consulter la documentation Mozilla.
Un attribut est une spécification que l’on apporte à la balise pour lui donner davantage d’informations et de précisions. Un attribut se déclare dans la balise en précisant son nom, suivi de l’opérateur = et sa valeur dans des guillemets. Ces attributs peuvent améliorer l’accessibilité, l’identification ou l’affichage de l’élément sur la page. Chaque balise est compatible avec des attributs qui lui sont spécifiques. Voici une liste non exhaustive des attributs compatibles avec toutes les balises que l’on retrouve souvent dans les balisages HTML des pages :
style : il est possible d’ajouter à la balise des règles de style directement dans celle ci à l’aide de l’attribut style sans passer par du CSS. Par exemple, définir une largeur ou une longueur pour une image.<img src="" alt="" style="width: 300px; height: 200px;"/>id : on attribue un identifiant à l’élément afin de pouvoir le repérer plus facilement lorsque l’on relit le code source de la page, ou à l’aide d’un système de liens ancres sur la page. L’ID permet également d’attribuer des règles de style à la balise en question. Contrairement à une classe, un ID est propre à un seul et unique élément.<img src="" alt="" id="image-personne">class : une classe permet de définir à la balise une règle de style CSS pour personnaliser sa mise en page. Une classe peut être attribuée à plusieurs balises sur la page.<img src="" alt="" class="image-style">title : avec cet attribut, il est possible de définir un titre à la balise afin que lorsque l’utilisateur survole la balise, ce titre apparaisse dans une infobulle. Il n’est pas pertinent d’ajouter cet attribut à une balise générique ou sémantique, il est conseillé de faire figurer cet attribut sur une balise d’élément (lien, image).<a href="" target=_blank" title="Texte de titre">aria-hidden : cet attribut permet de masquer de la page un élément pour l’utilisateur. L’avantage est que l’on peut s’en servir si l’élément doit rester dans le code source de la page (pour garder pour une bonne lisibilité du code ou pour le référencement SEO).<h2 aria-hidden="true">aria-label : cet attribut permet d’ajouter un label à un élément qui ne dispose pas de texte visible pour décrire leur fonction (icone, bouton sans texte). Cela dit, l’utilisation de cet élément ne doit pas être un échappatoire pour ne plus ajouter de texte là où c’est nécessaire.<li aria-label="Texte d'étiquette ARIA de la liste">tabeindex : cet attribut spécifie l’ordre de tabulation des éléments d’une page web. Lorsqu’un utilisateur appuie sur la touche « Tab » de son clavier, le navigateur se déplace de l’élément actuellement sélectionné au prochain élément dans l’ordre de tabulation fixé à l’aide de l’attribut (du plus petit au plus grand). Cet attribut a la particularité de modifier l’ordre de tabulation par défaut.<ul tabindex="0">accesskey : cet attribut sert à spécifier une touche de raccourci clavier pour activer ou se rendre sur un élément de la page web, afin de s’affranchir de peu de la navigation avec souris. Ainsi, lorsque l’utilisateur appuie sur la touche définie puis sur « Entrée », l’élément associé à l’attribut accesskey est activé. Les comportements varient selon le type d’élément utilisé. Par exemple, si l’attribut accesskey est appliqué à un lien hypertexte, appuyer sur la touche de raccourci suivie de la touche « Entrée » peut diriger l’utilisateur vers la page associée en déclenchant en quelque sorte le lien.<a src="" alt="" accesskey="c">data- : cet attribut est utilisé pour stocker des données spécifiques sur une balise, ces données ne sont pas visibles par l’utilisateur côté front end. Cet attribut n’a donc aucun impact sur l’affichage et le comportement de la balise. Il peut s’agir d’identifiants, ou d’autres données, afin de faciliter la manipulation et la récupération de ces informations par des scripts côté client (JavaScript). Il s’utilise en ajoutant un préfixe data- suivi d’un nom spécifique pour chaque attribut de données personnalisé.<div data-id="111" data-user="john_doe" data-role="editor">Contenu de la balise</div>