Tipi MIME in HTML — Content-Type, charset, accept

Le Multipurpose Internet Mail Extensions, note come tipo MIME (detto anche media type o content type), sono una stringa standardizzata che browser e server utilizzano per identificare il tipo di contenuto trasferito. La specifica è definita nell'IETF RFC 6838.

Un tipo MIME è una stringa identificativa, non un'estensione di file. I browser generalmente si affidano al tipo MIME — inviato dal server nell'intestazione di risposta Content-Type — piuttosto che all'estensione del file per decidere come elaborare un documento. Per questo motivo i server devono essere configurati per allegare il tipo MIME corretto a ogni risposta. Se il tipo è errato, i browser possono interpretare erroneamente il contenuto di un file: un foglio di stile potrebbe essere ignorato, uno script bloccato, o una risposta JSON mostrata come testo normale.

Dove compaiono i tipi MIME in HTML

Sebbene i tipi MIME provengano dal mondo della posta elettronica e delle intestazioni HTTP, li si scrive direttamente in HTML più spesso di quanto ci si aspetti. I posti più comuni sono:

type su <link> e <script> — dichiara il media type di una risorsa collegata, ad es. <link rel="stylesheet" type="text/css"> o <script type="module">. Vedi il tag <link> e il tag <script>.
type su <source> — indica a <audio>/<video>/<picture> il formato di ciascuna sorgente, in modo che il browser possa saltare quelle che non può riprodurre. Vedi il tag <source>.
accept su <input type="file"> — filtra i tipi di file che il selettore di file propone, usando tipi MIME o estensioni. Vedi l'attributo accept e il tag <input>.
enctype su <form> — imposta il modo in cui i dati del modulo vengono codificati all'invio; il valore è un tipo MIME come multipart/form-data. Vedi il tag <form>.
<meta http-equiv="Content-Type"> — dichiarava storicamente il tipo e la codifica dei caratteri del documento. In HTML5 è sostituito dal più breve <meta charset="UTF-8">. Vedi il tag <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>

Sintassi: type, subtype e parametri

Ogni tipo MIME ha la stessa struttura — un type e un subtype, separati da una barra (/), senza spazi:

type/subtype

Un tipo MIME deve sempre includere entrambe le parti; ogni tipo ha il proprio insieme di subtype:

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

Il type è la categoria generale (text, image, audio, video, application, …) e il subtype indica il formato esatto all'interno di quella categoria. I tipi MIME non sono sensibili alle maiuscole/minuscole, ma per convenzione vengono scritti in minuscolo.

È possibile aggiungere un parametro opzionale dopo un punto e virgola (;) per fornire dettagli aggiuntivi:

type/subtype;parameter=value

Il parametro `charset`

Il parametro più comune è charset, che indica al browser quale codifica dei caratteri utilizza una risorsa testuale. Per le pagine HTML questa dovrebbe essere quasi sempre UTF-8:

text/html; charset=UTF-8

Questa stringa esatta si trova normalmente nell'intestazione HTTP Content-Type. In HTML si imposta la stessa informazione con un singolo tag nel <head> del documento:

<meta charset="UTF-8" />

Se la codifica è assente o errata, le lettere accentate e i caratteri non latini possono essere visualizzati come simboli illeggibili (ad esempio Ã© al posto di é).

I tipi MIME sono suddivisi in due categorie: discreti e multipart. Ognuna ha sottotipi specifici.

Tipi discreti

Tipi 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
…

I tipi discreti indicano la categoria di un documento singolo e autonomo. Possono essere uno dei seguenti:

Tipo	Descrizione	Esempi di sottotipi tipici
application	Contiene dati binari	application/javascript, application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml, application/pdf
audio	File audio	audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
font	Dati di font/caratteri tipografici	font/woff, font/ttf, font/otf
image	File immagine	image/png, image/jpeg, image/gif, image/webp, image/svg+xml
message	Messaggio che racchiude un altro messaggio	message/rfc822, message/partial
model	Dati di modello per oggetti 3D	model/3mf, model/vrml
text	Documento testuale	text/plain, text/html, text/css, text/javascript
video	File video	video/webm, video/ogg, video/mp4

Per descrivere un documento testuale che non appartiene a un particolare subtype, si utilizza text/plain. I documenti contenenti dati binari senza un subtype specifico vengono descritti con application/octet-stream.

Tipi multipart

Tipi MIME

multipart/form-data
multipart/byteranges

I tipi multipart descrivono documenti composti da più parti, ognuna delle quali può avere il proprio tipo MIME. Quello che si incontra più spesso in HTML è multipart/form-data, che è il valore da assegnare all'attributo enctype di un form quando carica file.

Tipo	Descrizione	Esempi di sottotipi tipici
multipart	Dati composti da più componenti	multipart/form-data, multipart/byteranges

Tipi MIME comuni

La tabella seguente elenca i tipi MIME moderni e ampiamente utilizzati. Molti tipi legacy con prefisso x- (ad es. image/x-icon) sono deprecati e dovrebbero essere evitati nei nuovi progetti. Per un elenco completo e autorevole, fare riferimento al registro IANA Media Types.

Estensione file	Media Type
`.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`

Scegliere il tipo MIME giusto in HTML

Alcune regole pratiche coprono la maggior parte dell'HTML quotidiano:

Per CSS, usare text/css. Nell'HTML moderno è possibile ometterlo: <link rel="stylesheet" href="..."> implica già CSS, quindi l'attributo type è opzionale.
Per JavaScript, usare text/javascript (il tipo registrato standard). Un <script> classico non ha bisogno di alcun type; aggiungere type="module" solo per optare per i moduli ES.
Per gli elementi <source> multimediali, includere sempre un type come video/mp4 o audio/ogg. Permette al browser di saltare i formati che non riesce a decodificare senza doverli prima scaricare.
Per gli input di file, l'attributo accept accetta un elenco separato da virgole di tipi MIME (image/png), tipi con carattere jolly (image/*) o estensioni di file (.pdf).

L'intestazione Content-Type effettiva è impostata dal tuo web server (Nginx, Apache, Express, ecc.), non da HTML — consulta la documentazione del server o il registro IANA Media Types per associare correttamente le estensioni ai tipi.

Esercitati

Pratica

Un tipo MIME è scritto come type/subtype. Quali affermazioni sui tipi MIME sono corrette?

Un tipo MIME ha sempre sia un type che un subtype separati da una barra, ad esempio 'image/png'.In 'text/html; charset=UTF-8', la parte 'charset=UTF-8' è un parametro opzionale che imposta la codifica dei caratteri.In 'image/jpeg', 'image' è il subtype e 'jpeg' è il type.I browser di solito si affidano all'estensione del file invece del tipo MIME per decidere come elaborare una risorsa.'multipart/form-data' è il valore enctype usato quando un form HTML carica file.