← Retour aux parutions

Les balises HTML de base

Article publié le Jeudi 13 juin 2024 • 246 vues

ARTICLE

La plupart des balises HTML sont constituées d'une balise ouvrante et d'une balise fermante qui délimitent leur contenu, par exemple <p> et </p>. Certains éléments, tels que <br>, <hr> ou <img>, sont des éléments vides et ne possèdent pas de balise fermante. Pour une présentation détaillée des balises, des éléments et des attributs HTML, consulter le chapitre consacré à la structure d'un document HTML.

Balises de base

Balise Description
<!DOCTYPE> Définit le type du document.
<html> Définit un document HTML.
<head> Contient des informations générales (métadonnées) sur le document.
<title> Définit le titre du document.
<body> Spécifie le corps du document.
<h1> to <h6> Définit les titres HTML.
<p> Définit un paragraphe.
<br> Insère un saut de ligne.
<hr> Insère une ligne horizontale ou définit une rupture thématique.
<!-- ... --> Définit un commentaire.

Balises de mise en forme

Les balises de mise en forme permettent de définir la présentation ou la valeur sémantique de portions de texte. Selon l'élément utilisé, elles peuvent modifier l'apparence du contenu ou indiquer une importance particulière aux navigateurs et aux technologies d'assistance.

Balise Description
<abbr> Définit une abréviation ou un acronyme.
<address> Spécifie les coordonnées de l'auteur/propriétaire d'un document ou d'un article.
<b> Affiche le texte en gras.
<bdi> (HTML5) Isole un fragment de texte de son environnement pour le formatage bidirectionnel.
<bdo> Remplace la direction du texte actuelle.
<blockquote> Définit une citation longue (au niveau bloc).
<cite> Marque une référence (titre, auteur ou URL) à une œuvre créative citée.
<code> Définit un fragment de code informatique.
<del> Spécifie du texte supprimé.
<dfn> Marque l'instance de définition d'un terme.
<em> Spécifie du texte mis en emphase.
<i> Affiche le texte en italique.
<ins> Définit du texte inséré dans un document.
<kbd> Spécifie une saisie au clavier.
<mark> (HTML5) Met en évidence/surligne du texte.
<meter> (HTML5) Définit une mesure scalaire dans une plage connue (jauge).
<pre> Définit du texte préformaté.
<progress> (HTML5) Indique la progression d'une tâche (barre de progression).
<q> Définit une courte citation en ligne.
<rp> (HTML5) Fournit des parenthèses de remplacement pour les navigateurs ne prenant pas en charge les annotations ruby.
<rt> (HTML5) Définit la prononciation des caractères dans une annotation ruby (pour la typographie d'Asie de l'Est).
<ruby> (HTML5) Représente une annotation ruby (pour la typographie d'Asie de l'Est).
<s> Affiche en barré un texte qui n'est plus exact.
<samp> Définit un exemple de sortie d'un programme informatique.
<small> Affiche le texte dans une taille réduite (commentaires annexes, mentions légales).
<strong> Définit du texte de grande importance.
<sub> Définit du texte en indice.
<sup> Définit du texte en exposant.
<time> (HTML5) Définit une date/heure.
<u> Affiche le texte avec une annotation non textuelle, soulignée par défaut.
<var> Définit une variable.
<wbr> (HTML5) Définit une opportunité possible de saut de ligne.

Balises de formulaire

Balise Description
<form> Spécifie un formulaire HTML pour la saisie utilisateur.
<input> Définit un contrôle de saisie.
<textarea> Définit un contrôle de saisie de texte multiligne (zone de texte).
<button> Définit un bouton cliquable dans un formulaire HTML.
<select> Définit une liste de sélection dans un formulaire.
<optgroup> Regroupe des options connexes dans une liste de sélection.
<option> Définit une option dans une liste de sélection.
<label> Définit une étiquette pour un élément <input>.
<fieldset> Regroupe des éléments connexes dans un formulaire.
<legend> Définit un titre pour un élément <fieldset>.
<datalist> (HTML5) Contient un ensemble d'options prédéfinies pour un élément <input>.
<output> (HTML5) Définit le résultat d'un calcul.

Balises de cadres

Les ensembles de cadres (<frameset>) étaient utilisés pour diviser la fenêtre du navigateur en plusieurs zones affichant des documents indépendants. Cette technique est aujourd'hui obsolète et ne doit plus être utilisée dans les développements modernes.

Balise Description
<iframe> Intègre un autre document dans un cadre en ligne.

Balises d'image

Balise Description
<img> Spécifie une image.
<map> Spécifie une carte d'image côté client.
<area> Définit une zone interactive dans une carte d'image.
<canvas> (HTML5) Surface de dessin pour le rendu de graphiques à la volée via des scripts (généralement JavaScript).
<figcaption> (HTML5) Définit une légende pour un élément <figure>.
<figure> (HTML5) Définit un contenu autonome, tel qu'une illustration ou un diagramme.
<picture> (HTML5) Conteneur pour plusieurs ressources d'image spécifiées dans des éléments <source>.
<svg> (HTML5) Conteneur pour les graphiques SVG en ligne.

Balises audio/vidéo

/thead>
Balise Description
<audio> (HTML5) Intègre du contenu audio.
<source> (HTML5) Spécifie des ressources médias alternatives pour <video>, <audio> ou <picture>.
<track> (HTML5) Ajoute une piste textuelle (sous-titres, légendes) pour <video> et <audio>.
<video> (HTML5) Intègre du contenu vidéo.

Balises de lien

Balise Description
<a> Définit un hyperlien.
<link> Lie le document actuel à une ressource externe (généralement une feuille de style CSS externe).
<nav> (HTML5) Définit un bloc de liens de navigation.

Balises de liste

Balise Description
<ul> Définit une liste non ordonnée.
<ol> Définit une liste ordonnée.
<li> Définit un élément de liste.
<dl> Définit une liste de description (définition).
<dt> Définit un terme/nom dans une liste de description.
<dd> Définit la description d'un terme dans une liste de description.
<menu> Définit une liste (menu) de commandes.

Balises de tableau

Balise Description
<table> Définit un tableau.
<caption> Définit le titre du tableau.
<th> Définit une cellule d'en-tête dans un tableau.
<tr> Définit une ligne de cellules dans un tableau.
<td> Définit une cellule dans un tableau.
<thead> Regroupe un ensemble de lignes décrivant les étiquettes de colonnes d'un tableau.
<tbody> Regroupe un ensemble de lignes définissant le corps principal des données du tableau.
<tfoot> Définit le pied de page d'un tableau.
<col> Définit des valeurs pour une ou plusieurs colonnes dans un élément <colgroup>.
<colgroup> Spécifie un groupe d'une ou plusieurs colonnes dans un tableau à des fins de mise en forme.

Balises génériques (de présentation)

Ces balises n'ont pas de signification sémantique propre. Elles servent de conteneurs génériques destinés à regrouper du contenu afin de lui appliquer des styles CSS ou des comportements JavaScript. Leur utilisation est recommandée uniquement lorsqu'aucun élément sémantique approprié n'existe.

Balise Description
<div> Définit un conteneur générique de niveau bloc.
<span> Définit un conteneur générique en ligne.
<style> Contient des informations de style (généralement CSS) pour le document.

Balises sémantiques

Les éléments sémantiques décrivent la signification de leur contenu, aidant les navigateurs, les moteurs de recherche et les technologies d'assistance. Voir Éléments sémantiques en HTML5.

Balise Description
<header> (HTML5) Définit un en-tête ou un bloc de contenu d'introduction.
<footer> (HTML5) Définit un pied de page pour un document ou une section.
<main> (HTML5) Spécifie le contenu dominant du document.
<section> (HTML5) Définit un regroupement thématique de contenu.
<article> (HTML5) Définit un contenu autonome et distribuable indépendamment.
<aside> (HTML5) Définit un contenu tangentiellement lié au contenu environnant.
<details> (HTML5) Un widget de divulgation que l'utilisateur peut ouvrir ou fermer.
<summary> (HTML5) Définit l'en-tête visible pour un élément <details>.
<dialog> (HTML5) Définit une boîte de dialogue ou une fenêtre modale.
<data> (HTML5) Lie du contenu à une valeur lisible par machine.

Balises de métadonnées

Balise Description
<head> Contient des métadonnées sur le document, non affichées à l'utilisateur.
<meta> Définit des métadonnées telles que le jeu de caractères, le viewport et la description.
<base> Définit l'URL de base et/ou la cible pour tous les liens relatifs d'une page.
<template> (HTML5) Contient des balises inertes non rendues mais pouvant être clonées et insérées avec JavaScript.

Balises de script et de programmation

Balise Description
<script> Intègre ou référence un script exécutable (généralement JavaScript).
<noscript> Définit un contenu de remplacement pour les navigateurs dont les scripts sont désactivés ou non pris en charge.
<embed> Intègre du contenu externe (tel qu'un plug-in ou un média) au point spécifié.
<object> Intègre une ressource externe (image, contexte de navigation imbriqué, contenu de plug-in).
<param> Définit un paramètre pour un élément <object>.