Balises de premier niveau:
Balises | Description |
---|---|
<html> | Balise principale de toute page web. Doit englober tout le code de votre page web. |
<head> | En-tête de la page |
<body> | Corps de la page |
<title> | Le titre de la page qui sera affiché dans l'onglet du navigateur |
Le code minimal d’une page HTML:
Vous trouverez ci-dessous le code minimal d’une page XHTML.
Code : XHTML
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Titre</title> </head> <body> </body> </html> |
Balises d’en-tête:
Balise | Description | ||
---|---|---|---|
<meta /> |
Cette balise permet de définir les propriétés de la page web. On s’en sert pour une foule de choses. Voici quelques exemples pratiques
En général, on utilise surtout le meta pour la table de caractères. |
||
<title> |
Titre de la page web. Choisissez bien votre titre car il a beaucoup d’importance pour les moteurs de recherche (ils donnent de l’importance aux mots qui se trouvent dans le titre).
|
Balises de structuration du texte:
Type:
Inline - L'élément est affiché dans le flot, sans retour à la ligne.
Block - Un retour à la ligne est généré avant l'affichage de l'élément, et après. L'élément fonctionne comme une boite.
Balise | Type | Description | ||
---|---|---|---|---|
<abbr> | Inline | Abréviation. Utiliser l’attribut title pour indiquer sa signification. | ||
<blockquote> | Block |
Citation (longue) Vous devez obligatoirement mettre une balise de paragraphe à l’intérieur du blockquote.
|
||
<cite> | Inline | Citation du titre d’une oeuvre ou d’un évènement. | ||
<q> | Inline | Citation (courte) | ||
<sup> | Inline | Mise en exposant | ||
<sub> | Inline | Mise en indice | ||
<strong> | Inline |
Mise en valeur (forte) Le texte est généralement mis en gras. |
||
<mark> | Inline |
(HTML5) Mise en valeur visuelle. Le texte est généralement surligné. |
||
<em> | Inline |
Mise en valeur (faible) Le texte est généralement mis en italique. |
||
<h6> | Block | Titre de niveau 6 | ||
<h5> | Block | Titre de niveau 5 | ||
<h4> | Block | Titre de niveau 4 | ||
<h3> | Block | Titre de niveau 3 | ||
<h2> | Block | Titre de niveau 2 | ||
<h1> | Block | Titre de niveau 1 | ||
<img /> | Inline |
Insère une image. Utilisez les attributs src (pour indiquer l’adresse de l’image) et alt (pour indiquer un texte de remplacement). Ces 2 attributs sont obligatoires. Exemple :
|
||
<figure> | Block | Indique la présence d’une figure (image, code…) illustrant le texte. | ||
<figcaption> | Inline | Description de la figure. | ||
<audio> | Inline | Insère un son. | ||
<video> | Inline | Insère une vidéo. | ||
<source> | - | (HTML5) Indique un format possible pour les balises <audio> et <video> | ||
<a> | Inline |
Lien hypertexte. Indiquez l’url de destination grâce à l’attribut href :
|
||
<br /> | Inline | Retour à la ligne | ||
<p> | Block | Paragraphe | ||
<hr /> | Block | Crée une ligne de séparation horizontale | ||
<address> | Block |
Permet d’indiquer une adresse, ou éventuellement l’auteur d’un document. Le texte est généralement mis en italique. |
||
<del> | Inline |
Permet d’indiquer un texte qui a été supprimé. Le texte est généralement barré. |
||
<ins> | Inline |
Permet d’indiquer un texte qui a été inséré. Le texte est généralement souligné. |
||
<dfn> | Inline | Permet d’indiquer une définition. | ||
<kbd> | Inline | Permet d’indiquer un code que doit taper le visiteur. | ||
<pre> | Block |
Le texte à l’intérieur de la balise <pre> sera affiché tel qu’il a été tapé dans le code (espaces et entrées compris). Une police de taille fixe est utilisée. |
||
<progress> | Inline | (HTML5) Affiche une barre de progression. A utiliser conjointement avec les attributs value et max. | ||
<time> | Inline | (HTML5) Pour indiquer une date ou une heure. |
Balises de liste:
Balise | Type | Description | ||
---|---|---|---|---|
<ul> | Block |
Liste à puces non numérotée. Vous devez mettre un <li></li> par élément de la liste.
|
||
<ol> | Block |
Liste à puces numérotée. Vous devez mettre un <li></li> par élément de la liste.
|
||
<li> | list-item |
Permet de créer un élément de liste. Le type de la balise est particulier car elle n’est ni block ni inline. On dit qu’elle est de type list-item. |
||
<dl> | Block |
Liste de définitions. Vous devez alterner chaque terme <dt> par sa définition <dd>.
|
||
<dt> | Block | Terme à définir | ||
<dd> | Block | Définition du terme |
Balises de tableau:
Balise | Type | Description | ||
---|---|---|---|---|
<table> | Block |
Délimite un tableau. Voici un exemple de tableau simple :
|
||
<caption> | - | Permet de donner un titre au tableau | ||
<tr> | - | Ligne de tableau | ||
<th> | - | Cellule d’en-tête du tableau (généralement mise en gras) | ||
<td> | - | Cellule du tableau | ||
<thead> | - |
Balise non obligatoire permettant d’insérer l’en-tête du tableau. |
||
<tbody> | - | Balise non obligatoire permettant d’insérer le corps du tableau | ||
<tfoot> | - | Balise non obligatoire permettant d’insérer le pied du tableau |
Balises sectionnantes: (HTML5)
Balise | Type | Description |
---|---|---|
<header> | Block | En-tête |
<nav> | Block | Liens principaux de navigation |
<footer> | Block | Pied de page |
<section> | Block | Section de page |
<article> | Block | Contenu ayant un sens propre (billet de blog, actualité…) pouvant être repris sur un autre site. |
<aside> | Block | Informations complémentaires |
Balises génériques:
Balise | Type | Description |
---|---|---|
<span> | Inline | Balise générique de type inline |
<div> | Block | Balise générique de type block |