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 |
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> |
Balise | Description | ||||
---|---|---|---|---|---|
<link /> | Cette balise permet d'indiquer certaines informations sur la page web. On l'utilise le plus souvent pour inclure une feuille de style CSS, comme ceci : Code : HTML - Sélectionner
On peut aussi s'en servir pour 2-3 autres choses : Code : HTML - Sélectionner
La favicon est une icône qui s'affiche généralement à gauche de l'adresse de votre site sur le navigateur de vos visiteurs. C'est un moyen de personnaliser un peu plus son site. Quant au fil RSS, il s'agit d'une technique permettant à vos visiteurs de suivre l'actualité de votre site depuis un logiciel spécial (un navigateur tel que Firefox le fait d'ailleurs). En général on génère des fils RSS en PHP (si vous ne faites que du HTML / CSS ça ne vous intéresse donc pas pour le moment). |
||||
<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 : Code : HTML - Sélectionner
En général, on utilise surtout le meta pour la table de caractères. |
||||
<script> | Permet de placer un script. On l'utilise souvent pour mettre du code Javascript : Code : HTML - Sélectionner
|
||||
<style> | Permet de définir du code CSS pour la page. Exemple : Code : HTML - Sélectionner
|
||||
<title> | Titre de la page web. C'est probablement la balise la plus importante d'une 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). Code : HTML - Sélectionner
|
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. Par exemple : Code : HTML - Sélectionner
|
||
<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 | 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 : Code : HTML - Sélectionner
|
||
<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> | - | Indique un format possible pour les balises <audio> et <video>. | ||
<a> | Inline | Lien hypertexte. Indiquez l'url de destination grâce à l'attribut href : Code : HTML - Sélectionner
|
||
<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 | Affiche une barre de progression. A utiliser conjointement avec les attributs value et max. | ||
<time> | Inline | Pour indiquer une date ou une heure. |
Balise | Type | Description | ||
---|---|---|---|---|
<ul> | Block | Liste à puces non numérotée. Vous devez mettre un <li></li> par élément de la liste. Exemple : Code : HTML - Sélectionner
|
||
<ol> | Block | Liste à puces numérotée. Vous devez mettre un <li></li> par élément de la liste. Exemple : Code : HTML - Sélectionner
|
||
<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>. Exemple : Code : HTML - Sélectionner
|
||
<dt> | Block | Terme à définir | ||
<dd> | Block | Définition du terme |
Balise | Type | Description | ||
---|---|---|---|---|
<table> | Block | Délimite un tableau. Voici un exemple de tableau simple : Code : HTML - Sélectionner
|
||
<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. Si vous choisissez d'utiliser <thead>, <tfoot> et <tbody>, vous devez les mettre dans l'ordre suivant dans votre code source :
|
||
<tbody> | - | Balise non obligatoire permettant d'insérer le corps du tableau | ||
<tfoot> | - | Balise non obligatoire permettant d'insérer le pied du tableau |
Balise | Type | Description | ||
---|---|---|---|---|
<form> | Block | Délimite un formulaire. Vous devrez généralement donner 2 attributs à la balise <form>
|
||
<fieldset> | Block | Permet de regrouper plusieurs éléments d'un formulaire. On l'utilise généralement dans de grands formulaires. Pour donner un titre à votre groupe, utilisez la balise <legend> |
||
<legend> | Inline | Titre d'un groupe dans un formulaire. A utiliser à l'intérieur d'un <fieldset> |
||
<label> | Inline | Titre d'un élément de formulaire. Généralement, vous devrez mettre l'attribut for sur cette balise pour indiquer l'ID de l'élément auquel correspond le label. |
||
<input /> | Inline | Champ de formulaire. Il existe de nombreux types de champs différents. Vous choisissez le type de champ que vous désirez grâce à l'attribut type : Code : HTML - Sélectionner
Pensez à donner un nom à vos champs grâce à l'attribut name |
||
<textarea> | Inline | Zone de saisie multiligne. Vous pouvez définir sa taille grâce aux attributs rows et cols (nombre de lignes et colonnes) ou bien le faire en CSS grâce aux propriétés width et height. |
||
<select> | Inline | Liste déroulante. Utilisez la balise <option> pour créer chaque élément de la liste : Code : HTML - Sélectionner
|
||
<option> | Block | Element d'une liste déroulante | ||
<optgroup> | Block | Groupe d'éléments d'une liste déroulante. A utiliser dans le cas d'une grande liste déroulante. Vous devez utiliser l'attribut label pour donner un nom au groupe. |
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 |
Balise | Type | Description |
---|---|---|
<span> | Inline | Balise générique de type inline |
<div> | Block | Balise générique de type block |
Comme je vous l'ai dit au début de ce chapitre, il y a plusieurs balises
que j'ai volontairement omises.
Vous l'aurez constaté, en HTML tout est affaire de sens
(on parle de sémantique). Ce qui compte,
c'est d'utiliser la balise qui convient le mieux à chaque moment.
En théorie, on pourrait faire presque tout un site rien qu'avec les balises
génériques <div> et <span> (en utilisant du CSS), mais votre
site n'aurait aucun sens logique ! Or, respecter la logique de son code
source est une chose que les webmasters considèrent comme fondamentale.
Une page sémantique a notamment plus de chances d'être mieux indexée dans
Google qu'une page utilisant des balises inadaptées.
Souvenez-vous en !