Aller au menu - Aller au contenu

Icône Mémento des balises HTML

Par Avatar Mathieu Nebra (M@teo21)
Mise à jour : 01/11/2011
Difficulté : Facile Facile Creative Commons BY-NC-SA
208 199 visites depuis 7 jours, dont 4 972 sur ce chapitre classé 1/786
Cette page est une liste non exhaustive des balises HTML qui existent. Vous trouverez ici un grand nombre de balises HTML. Nous en avons déjà vu certaines dans le cours, mais il y en a d'autres que nous n'avons pas eu l'occasion d'étudier. Généralement, les balises que nous n'avons pas étudiées sont des balises un peu plus rarement utilisées. Peut-être trouverez-vous votre bonheur dans ce lot de nouvelles balises.

Vous pouvez vous servir de cette annexe comme d'un aide-mémoire lorsque vous développez votre site web.

Attention, j'insiste : cette annexe n'est pas complète et c'est volontaire. Je préfère mettre moins de balises et garder seulement celles qui me semblent les plus utiles dans la pratique.
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Balises de premier niveau

Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables pour réaliser le « code minimal » d'une page web.

Balise Description
<html> Balise principale
<head> En-tête de la page
<body> Corps de la page

Code minimal d'une page HTML :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
    </head>

    <body>
    
    </body>
</html>
Retour en haut

Balises d'en-tête

Ces balises sont toutes situées dans l'en-tête de la page web, c'est-à-dire entre <head> et </head> :

Balise Description
<link /> Liaison avec une feuille de style
<meta /> Métadonnées de la page web (charset, mots-clés, etc.)
<script> Code JavaScript
<style> Code CSS
<title> Titre de la page
Retour en haut

Balises de structuration du texte

Balise Description
<abbr> Abréviation
<blockquote> Citation (longue)
<cite> Citation du titre d'une œuvre ou d'un évènement
<q> Citation (courte)
<sup> Exposant
<sub> Indice
<strong> Mise en valeur forte
<em> Mise en valeur normale
<mark> Mise en valeur visuelle
<h1> Titre de niveau 1
<h2> Titre de niveau 2
<h3> Titre de niveau 3
<h4> Titre de niveau 4
<h5> Titre de niveau 5
<h6> Titre de niveau 6
<img /> Image
<figure> Figure (image, code, etc.)
<figcaption> Description de la figure
<audio> Son
<video> Vidéo
<source> Format source pour les balises <audio> et <video>
<a> Lien hypertexte
<br /> Retour à la ligne
<p> Paragraphe
<hr /> Ligne de séparation horizontale
<address> Adresse de contact
<del> Texte supprimé
<ins> Texte inséré
<dfn> Définition
<kbd> Saisie clavier
<pre> Affichage formaté (pour les codes sources)
<progress> Barre de progression
<time> Date ou heure
Retour en haut

Balises de listes

Cette section énumère toutes les balises HTML permettant de créer des listes (listes à puces, listes numérotées, listes de définitions…)

BaliseDescription
<ul>Liste à puces, non numérotée
<ol>Liste numérotée
<li>Élément de la liste à puces
<dl>Liste de définitions
<dt>Terme à définir
<dd>Définition du terme
Retour en haut

Balises de tableau

BaliseDescription
<table>Tableau
<caption>Titre du tableau
<tr>Ligne de tableau
<th>Cellule d'en-tête
<td>Cellule
<thead>Section de l'en-tête du tableau
<tbody>Section du corps du tableau
<tfoot>Section du pied du tableau
Retour en haut

Balises de formulaire

BaliseDescription
<form>Formulaire
<fieldset>Groupe de champs
<legend>Titre d'un groupe de champs
<label>Libellé d'un champ
<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
Retour en haut

Balises sectionnantes

Ces balises permettent de construire le squelette de notre site web.

BaliseDescription
<header>En-tête
<nav>Liens principaux de navigation
<footer>Pied de page
<section>Section de page
<article>Article (contenu autonome)
<aside>Informations complémentaires
Retour en haut

Balises génériques

Les balises génériques sont des balises qui n'ont pas de sens sémantique.

En effet, toutes les autres balises HTML ont un sens : <p> signifie « Paragraphe », <h2> signifie « Sous-titre », etc.
Parfois, on a besoin d'utiliser des balises génériques (aussi appelées balises universelles) car aucune des autres balises ne convient. On utilise le plus souvent des balises génériques pour construire son design.

Il y a deux balises génériques : l'une est inline, l'autre est block.

BaliseDescription
<span>Balise générique de type inline
<div>Balise générique de type block


Ces balises ont un intérêt uniquement si vous leur associez un attribut class, id ou style :
  • class : indique le nom de la classe CSS à utiliser.
  • id : donne un nom à la balise. Ce nom doit être unique sur toute la page car il permet d'identifier la balise. Vous pouvez vous servir de l'ID pour de nombreuses choses, par exemple pour créer un lien vers une ancre, pour un style CSS de type ID, pour des manipulations en JavaScript, etc.
  • style : cet attribut vous permet d'indiquer directement le code CSS à appliquer. Vous n'êtes donc pas obligés d'avoir une feuille de style à part, vous pouvez mettre directement les attributs CSS. Notez qu'il est préférable de ne pas utiliser cet attribut et de passer à la place par une feuille de style externe, car cela rend votre site plus facile à mettre à jour par la suite.
Ces trois attributs ne sont pas réservés aux balises génériques : vous pouvez aussi les utiliser sans aucun problème dans la plupart des autres balises.
Retour en haut
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut

Lire aussi

Icône
Mémento des propriétés CSS
Icône
TP : création d'un site pas à pas
Icône
Comment fait-on pour créer des sites web ?
Icône
Aller plus loin
Retour en haut
93 commentaires pour "Mémento des balises HTML"
Note moyenne : 3.85 / 4 (3160 votes)
Pseudo Commentaire
Hors ligne Sadious # Posté le 09/03/2012 à 02:54:52

Avis : Très bon

Excellent ! Franchement au début j'ai délaissé le HTML mais plus j'avançais et plus j'étais passionné je te remercie énormément pour ce tuto ! :D
Quand on est intelligent, il est plus facile de faire l’imbécile que l’inverse.
 
Hors ligne kakabesola # Posté le 15/03/2012 à 23:13:47

Avis : Très bon

excellent!
Hors ligne Appollyon # Posté le 21/04/2012 à 17:06:53
Avatar

Avis : Très bon

pfff ! quoi dire a part <h1> MAGNIFIQUE ! ET UN GROS MERCI! </h1> :)
Hors ligne ibrahima10100 # Posté le 22/04/2012 à 15:23:19

Avis : Très bon

c'est vraiment exectionnel ce site en tant que étudiant en premier année suis vraiment satisfait et ce site ma beaucoup aidé a réaliser mon site web!!!! merci beaucoup.......
Hors ligne Dralagen # Posté le 03/05/2012 à 10:42:04
1 + 1 = 10
Avatar
close

Bien de se mettre a jour et passer du Xhtml1.0 au html5 mais dans la liste des balises html on pourrait mettre ceux qui viennent du html5 (nouveau) et ceux qui viennent du Xhtml1.0.

Ce qui permet aussi de pas relire le tuto en détail pour les personnes qui connaisse le Xhtml.
www.enigmatheque.fr
un projet où j'ai besoin d'avis sérieux. SorbonneVirtuelle
Image utilisateur
 

Voir tous les commentaires