Les types MIME en HTML — Content-Type, charset, accept

Les extensions de messagerie Internet polyvalentes, connues sous le nom de type MIME (également appelé type de média ou type de contenu), constituent une chaîne standardisée que les navigateurs et les serveurs utilisent pour identifier le type de contenu transféré. La spécification est définie dans la RFC IETF RFC 6838.

Un type MIME est une chaîne d'identification, pas une extension de fichier. Les navigateurs s'appuient généralement sur le type MIME — envoyé par le serveur dans l'en-tête de réponse Content-Type — plutôt que sur l'extension du fichier pour décider comment traiter un document. C'est pourquoi les serveurs doivent être configurés pour associer le type MIME correct à chaque réponse. Si le type est erroné, les navigateurs peuvent mal interpréter le contenu d'un fichier : une feuille de style peut être ignorée, un script bloqué, ou une réponse JSON affichée en texte brut.

Où apparaissent les types MIME en HTML

Bien que les types MIME proviennent du monde des e-mails et des en-têtes HTTP, vous les écrivez directement en HTML plus souvent que vous ne le pensez. Les endroits les plus courants sont :

type sur <link> et <script> — déclare le type de média d'une ressource liée, par exemple <link rel="stylesheet" type="text/css"> ou <script type="module">. Voir la balise <link> et la balise <script>.
type sur <source> — indique à <audio>/<video>/<picture> quel format représente chaque source, afin que le navigateur puisse ignorer ceux qu'il ne peut pas lire. Voir la balise <source>.
accept sur <input type="file"> — filtre les types de fichiers proposés par le sélecteur de fichiers, en utilisant des types MIME ou des extensions. Voir l'attribut accept et la balise <input>.
enctype sur <form> — définit la façon dont les données du formulaire sont encodées lors de la soumission ; la valeur est un type MIME tel que multipart/form-data. Voir la balise <form>.
<meta http-equiv="Content-Type"> — déclarait historiquement le type et l'encodage des caractères du document. En HTML5, cela est remplacé par la balise plus courte <meta charset="UTF-8">. Voir la balise <meta>.

<!-- type on <link> and <script> -->
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="module" src="app.js"></script>

<!-- type on <source> -->
<video controls>
  <source src="movie.webm" type="video/webm" />
  <source src="movie.mp4" type="video/mp4" />
</video>

<!-- accept on a file input, and enctype on the form -->
<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="picture" accept="image/png, image/jpeg" />
  <button type="submit">Upload</button>
</form>

Syntaxe : type, sous-type et paramètres

Chaque type MIME a la même structure — un type et un sous-type, séparés par une barre oblique (/), sans espaces :

type/subtype

Un type MIME doit toujours inclure les deux parties ; chaque type possède son propre ensemble de sous-types :

text/html
image/png
application/json
video/mp4

Le type est la catégorie générale (text, image, audio, video, application, …) et le sous-type désigne le format exact au sein de cette catégorie. Les types MIME ne sont pas sensibles à la casse, mais ils sont conventionnellement écrits en minuscules.

Vous pouvez ajouter un paramètre optionnel après un point-virgule (;) pour apporter plus de précision :

type/subtype;parameter=value

Le paramètre `charset`

Le paramètre le plus courant est charset, qui indique au navigateur quel encodage de caractères utilise une ressource textuelle. Pour les pages HTML, cela doit presque toujours être UTF-8 :

text/html; charset=UTF-8

Vous rencontrez normalement cette chaîne exacte dans l'en-tête HTTP Content-Type. En HTML, vous définissez les mêmes informations avec une seule balise dans le <head> du document :

<meta charset="UTF-8" />

Si l'encodage est absent ou incorrect, les lettres accentuées et les caractères non latins peuvent s'afficher sous forme de symboles illisibles (par exemple Ã© au lieu de é).

Les types MIME sont divisés en deux catégories : discrets et multipart. Chacun possède des sous-types spécifiques.

Types discrets

Types MIME

text/plain
text/html
image/jpeg
image/png
audio/mpeg
audio/ogg
audio/*
video/mp4
application/*
application/json
application/javascript
application/ecmascript
application/octet-stream
…

Les types discrets indiquent la catégorie d'un document unique et autonome. Il peut s'agir de l'un des types suivants :

Type	Description	Exemples de sous-types courants
application	Contient des données binaires	application/javascript, application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml, application/pdf
audio	Fichier audio	audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
font	Données de police/caractères	font/woff, font/ttf, font/otf
image	Fichier image	image/png, image/jpeg, image/gif, image/webp, image/svg+xml
message	Message encapsulant un autre message	message/rfc822, message/partial
model	Données de modèle pour objets 3D	model/3mf, model/vrml
text	Document texte	text/plain, text/html, text/css, text/javascript
video	Fichier vidéo	video/webm, video/ogg, video/mp4

Pour décrire un document texte qui n'appartient à aucun sous-type particulier, on utilise text/plain. Les documents contenant des données binaires sans sous-type spécifique sont décrits avec application/octet-stream.

Types multipart

Types MIME

multipart/form-data
multipart/byteranges

Les types multipart décrivent des documents composés de plusieurs parties, chacune pouvant avoir son propre type MIME. Celui que vous rencontrez le plus souvent en HTML est multipart/form-data, qui est la valeur que vous donnez à l'attribut enctype d'un formulaire lors du téléchargement de fichiers.

Type	Description	Exemples de sous-types courants
multipart	Données composées de plusieurs composants	multipart/form-data, multipart/byteranges

Types MIME courants

Le tableau suivant liste les types MIME modernes largement utilisés. De nombreux types hérités préfixés par x- (par exemple, image/x-icon) sont obsolètes et doivent être évités dans les nouveaux projets. Pour une liste complète faisant autorité, consultez le registre des types de médias IANA.

Extension de fichier	Type de média
`.html`, `.htm`	`text/html`
`.css`	`text/css`
`.js`	`application/javascript`
`.json`	`application/json`
`.png`	`image/png`
`.jpg`, `.jpeg`	`image/jpeg`
`.gif`	`image/gif`
`.svg`	`image/svg+xml`
`.mp3`	`audio/mpeg`
`.mp4`	`video/mp4`
`.pdf`	`application/pdf`
`.zip`	`application/zip`

Choisir le bon type MIME en HTML

Quelques règles pratiques couvrent la plupart des situations HTML quotidiennes :

Pour le CSS, utilisez text/css. En HTML moderne, vous pouvez même l'omettre : <link rel="stylesheet" href="..."> implique déjà CSS, donc un attribut type est optionnel.
Pour JavaScript, utilisez text/javascript (le type standard enregistré). Un <script> classique n'a besoin d'aucun type ; ajoutez type="module" uniquement pour activer les modules ES.
Pour les éléments <source> multimédias, incluez toujours un type tel que video/mp4 ou audio/ogg. Cela permet au navigateur d'ignorer les formats qu'il ne peut pas décoder sans les télécharger au préalable.
Pour les entrées de fichiers, l'attribut accept accepte une liste de types MIME séparés par des virgules (image/png), des types génériques (image/*) ou des extensions de fichiers (.pdf).

L'en-tête Content-Type réel est défini par votre serveur web (Nginx, Apache, Express, etc.), pas par HTML — consultez la documentation de votre serveur, ou le registre des types de médias IANA, pour associer correctement les extensions aux types.

Pratique

Un type MIME s'écrit sous la forme type/sous-type. Quelles affirmations sur les types MIME sont correctes ?

Un type MIME a toujours un type et un sous-type séparés par une barre oblique, par exemple 'image/png'.Dans 'text/html; charset=UTF-8', la partie 'charset=UTF-8' est un paramètre optionnel qui définit l'encodage des caractères.Dans 'image/jpeg', 'image' est le sous-type et 'jpeg' est le type.Les navigateurs s'appuient généralement sur l'extension du fichier plutôt que sur le type MIME pour décider comment traiter une ressource.'multipart/form-data' est la valeur enctype utilisée lorsqu'un formulaire HTML télécharge des fichiers.