L'élément meta est un peu comme un couteau suisse car il permet de faire beaucoup de choses différentes suivant les attributs utilisés et leur valeur.

Quelque soit son utilité finale, l'élément meta est toujours un élément vide qui ne peut donc pas contenir d'autres éléments.

### meta charset

    <meta charset="nom-encodage">

Avec cette syntaxe l'élément meta est une déclaration d'encodage qui avertit le navigateur de l'encodage utilisé pour enregistrer le fichier qui contient le code HTML. Cet encodage varie et dépend de l'éditeur de texte utilisé lors de la création du code. On trouvera le plus généralement en France :

- ISO-8859-1 (ou Latin 1) : utilisé pour l'Europe occidentale, avec les caractères accentués de l'Europe de l'Ouest
- ISO-8859-15 (ou Latin 9) : utilisé pour l'Europe occidentale, avec quelques caractères en plus de de ISO-8859-1, comme le signe euro (€)
- Windows-1252 (ou ANSI) : utilisé par windows pour l'Europe occidentale, à peu près identique à ISO-8859-1
- UTF-8 : codage Unicode sur 1 ou 2 octets. A privilégier car il est universel et permet de représenter pratiquement tous les caractères de toutes les langues de la Terre.

Le fichier HTML doit être édité et enregistré avec le même type de codage que celui déclaré dans l'attribut `charset`. Le choix de l'encodage du contenu du fichier se fait dans l'éditeur de textes utilisé pour créer/modifier le fichier. Cet éditeur a toujours un encodage par défaut dans sa configuration (Windows-1252, UTF-8, etc). On peut toujours modifier l'encodage utilisé pour un fichier, soit au moment de son enregistrement, soit par une option dans les menus de l'éditeur (Fichier->Encodage, Propriétés->Encodage, Format, Options ...)

Définir précisément l'encodage utilisé permet au navigateur de traiter et d'afficher correctement tous les caractères contenu dans le fichier HTML.
Si vous ne faites pas cette définition, il faut utiliser le système des entités HTML pour représenter les caractères non ASCII (ie les caractères accentués et les symboles).
Une entité HTML est composée de la façon suivante :

- le signe `&` signifie marque le commencement de l'entité,
- le nom en anglais du caractère ou sa valeur numérique,
- le signe `;` marque la fin la fin de l'entité.

Quelques exemples :

Caractère | Entité | Caractère | Entité | Caractère | Entité
é | `&eacute;` | è | `&egrave;` | ç | `&ccedil;`
ê | `&ecirc;` | ù | `&ugrave;` | î | `&icirc;`
à | `&agrave;` | € | `&euro;` | ☎ | `&phone;`
Liste complète

Les caractères `<`, `>` et `&` font partie des éléments syntaxiques de HTML, et ne peuvent donc pas être utilisés tels que dans le texte. A la place on doit utiliser les entités :

- `&lt;` pour < (plus petit que - Less Than)
- `&gt;` pour > (plus grand que - Greater Than)
- `&amp;` pour & (et commercial - Amperstand)

L'entité `&nbsp;` (No Breaking SPace) vous permet d'insérer un espace obligatoirement rendu par le navigateur. En mettant plusieurs `&nbsp;` les uns à la suite des autres, on pourra forcer le navigateur à afficher plusieurs espaces consécutifs.

Quelque soit l'encodage que vous utilisez lors de la création de vos fichier HTML, je vous conseille de toujours utiliser le même pour tous les fichiers texte de votre site : les fichiers HTML, les fichiers CSS et les fichier JavaScript.
La liste des encodages possibles est définie dans ce document par l'IANA.

Si vous ne faites de déclaration d'encodage, le navigateur va essayer avec plus ou moins de bonheur de trouver celui utilisé. Je vous conseille donc de toujours faire cette déclaration d'encodage qui DOIT se trouver les 512 premiers caractères de votre fichier HTML car Internet Explorer par exemple ne prendra en compte que ces caractères pour définir l'encodage utilisé.

Le début d'un fichier HTML devrait toujours être :

    <!DOCTYPE html>
    <html lang="fr">
    	<head>
    		<meta charset="utf-8">

Remarque : les valeurs des attributs `lang` et `charset` peuvent bien sûr être différentes.
Par exemple, selon l'encodage de vos fichiers, vous pourrez avoir :

Encodage | charset
ISO-8859-1 | `<meta charset="iso-8859-1">`
ISO-8859-15 | `<meta charset="iso-8859-15">`
Windows 1252 | `<meta charset="windows-1252">`

### meta http-equiv

    <meta http-equiv="nom-en-tête-HTTP" content="valeur associée">

Avec cette syntaxe l'élément meta définit un en-tête HTTP en plus de ceux qui transitent dans le dialogue client/serveur (navigateur/serveur Web).

Les valeurs possibles pour l'attribut `http-equiv` sont fixées précisément :

`content-language` | A ne plus utiliser. C'est l'attribut `lang` qui doit le remplacer.
`content-type` | C'est "l'ancienne version" de `<meta charset="nom-encodage">`. On peut encore l'utiliser pour que les navigateurs anciens qui ne parlent pas HTML5 aient une définition d'encodage. La syntaxe est la suivante pour un encodage en ISO-8859-1 :
    <meta http-equiv="content-type"
          content="text/html; charset=iso-8859-1">
Pour un encodage en UTF-8 utilisez :
    <meta http-equiv="content-type"
          content="text/html; charset=utf-8">
`default-style` | Feuille de styles à utiliser de préférence pour la page. La valeur de `content` doit contenir la valeur de l'attribut `id` de l'élément link pointant sur la feuille de style désirée.
`refresh` | Définit le nombre de secondes qu'il faut attendre pour que la page soit rechargée automatiquement. Exemple pour un rechargement toutes les 10 secondes :
    <meta http-equiv="refresh" content="10">
Définit le nombre de secondes qu'il faut attendre pour qu'une autre page soit affichée automatiquement. Exemple pour une redirection vers google après 5 secondes :
    <meta http-equiv="refresh"
          content="5; url=http://www.google.fr">
`set-cookie` | A ne plus utiliser. Permet de créér un cookie.

Exemple : métadonnées
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="refresh" content="5; url=http://www.google.fr"> <title>Métadonnées</title> </head> <body> Après 5 secondes d'affichage de cette page, le navigateur affichera la page d'accueil de google. </body> </html>

### meta name

    <meta name="nom-métadonnée" content="valeur associée">

Avec cette syntaxe l'élément meta définit une métadonnée portant sur le contenu entier du document. C'est à ce titre une réelle métadonnée (ie une donnée sur les données).

Les valeurs possibles pour l'attribut `name` sont fixées précisément :

`application-name` | Nom d'un application Web dont la page fait partie.
`author` | Informations sur l'auteur de la page.
`description` | Description, résumé du contenu de la page. Utilisé éventuellement dans l'affichage des résultats d'une recherche par un moteur de recherche (ie google, bing, etc).
`generator` | Nom de l'éditeur de texte ayant servi à générer le contenu de la page.
`keywords` | Mots-clés séparés par une virgule, prévus à l'origine pour l'indexation de la page.

Exemple : métadonnées
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="application-name" content="Tutoriel HTML"> <meta name="author" content="François Piat"> <meta name="description" content="L'élement meta dans l'en-tête du document HTML"> <meta name="generator" content="Eclipse 3.0.2"> <meta name="keywords" content="Piat, html, head, meta, tutoriel"> <title>Métadonnées</title> </head> <body> Les métadonnées ne sont pas affichées par le navigateur. </body> </html>