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 :

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 :

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

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