Tipos MIME en HTML — Content-Type, charset, accept

Las Extensiones Multipropósito de Correo de Internet, conocidas como tipo MIME (también llamadas tipo de medio o tipo de contenido), son una cadena estandarizada que los navegadores y servidores utilizan para identificar el tipo de contenido que se transfiere. La especificación está definida en el IETF RFC 6838.

Un tipo MIME es una cadena identificadora, no una extensión de archivo. Los navegadores generalmente dependen del tipo MIME — enviado por el servidor en la cabecera de respuesta Content-Type — en lugar de la extensión del archivo para decidir cómo procesar un documento. Por eso los servidores deben configurarse para adjuntar el tipo MIME correcto a cada respuesta. Si el tipo es incorrecto, los navegadores pueden interpretar mal el contenido de un archivo: una hoja de estilos podría ser ignorada, un script bloqueado o una respuesta JSON mostrada como texto plano.

Dónde aparecen los tipos MIME en HTML

Aunque los tipos MIME provienen del mundo del correo electrónico y las cabeceras HTTP, se escriben directamente en HTML con más frecuencia de lo que se podría esperar. Los lugares más comunes son:

type en <link> y <script> — declara el tipo de medio de un recurso vinculado, por ejemplo <link rel="stylesheet" type="text/css"> o <script type="module">. Consulta la etiqueta <link> y la etiqueta <script>.
type en <source> — indica a <audio>/<video>/<picture> el formato de cada fuente, para que el navegador pueda omitir las que no puede reproducir. Consulta la etiqueta <source>.
accept en <input type="file"> — filtra qué tipos de archivo ofrece el selector de archivos, usando tipos MIME o extensiones. Consulta el atributo accept y la etiqueta <input>.
enctype en <form> — establece cómo se codifican los datos del formulario al enviarse; el valor es un tipo MIME como multipart/form-data. Consulta la etiqueta <form>.
<meta http-equiv="Content-Type"> — declaraba históricamente el tipo y la codificación de caracteres del documento. En HTML5 esto se reemplaza por la forma más corta <meta charset="UTF-8">. Consulta la etiqueta <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>

Sintaxis: tipo, subtipo y parámetros

Todo tipo MIME tiene la misma estructura — un tipo y un subtipo, separados por una barra diagonal (/), sin espacios:

type/subtype

Un tipo MIME siempre debe incluir ambas partes; cada tipo tiene su propio conjunto de subtipos:

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

El tipo es la categoría amplia (text, image, audio, video, application, …) y el subtipo nombra el formato exacto dentro de esa categoría. Los tipos MIME no distinguen entre mayúsculas y minúsculas, pero convencionalmente se escriben en minúsculas.

Puedes añadir un parámetro opcional después de un punto y coma (;) para agregar más detalle:

type/subtype;parameter=value

El parámetro `charset`

El parámetro más común es charset, que indica al navegador qué codificación de caracteres utiliza un recurso de texto. Para páginas HTML esto debería ser casi siempre UTF-8:

text/html; charset=UTF-8

Normalmente verás esta cadena exacta en la cabecera HTTP Content-Type. En HTML puedes configurar la misma información con una sola etiqueta en el <head> del documento:

<meta charset="UTF-8" />

Si la codificación falta o es incorrecta, las letras acentuadas y los caracteres no latinos pueden aparecer como símbolos ilegibles (por ejemplo Ã© en lugar de é).

Los tipos MIME se dividen en dos categorías: discretos y multiparte. Cada uno tiene subtipos específicos.

Tipos discretos

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

Los tipos discretos indican la categoría de un documento único e independiente. Pueden ser uno de los siguientes:

Tipo	Descripción	Ejemplo de subtipos típicos
application	Contiene datos binarios	application/javascript, application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml, application/pdf
audio	Archivo de audio	audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
font	Datos de fuente tipográfica	font/woff, font/ttf, font/otf
image	Archivo de imagen	image/png, image/jpeg, image/gif, image/webp, image/svg+xml
message	Mensaje que envuelve otro mensaje	message/rfc822, message/partial
model	Datos de modelo para objetos 3D	model/3mf, model/vrml
text	Documento de texto	text/plain, text/html, text/css, text/javascript
video	Archivo de vídeo	video/webm, video/ogg, video/mp4

Para describir un documento de texto que no pertenece a un subtipo concreto, se usa text/plain. Los documentos que contienen datos binarios sin un subtipo específico se describen con application/octet-stream.

Tipos multiparte

Tipos MIME

multipart/form-data
multipart/byteranges

Los tipos multiparte describen documentos compuestos de varias partes, cada una de las cuales puede tener su propio tipo MIME. El que más se encuentra en HTML es multipart/form-data, que es el valor que se asigna al atributo enctype de un formulario cuando sube archivos.

Tipo	Descripción	Ejemplo de subtipos típicos
multipart	Datos compuestos por múltiples componentes	multipart/form-data, multipart/byteranges

Tipos MIME comunes

La siguiente tabla lista los tipos MIME modernos más utilizados. Muchos tipos heredados con el prefijo x- (por ejemplo, image/x-icon) están obsoletos y deben evitarse en proyectos nuevos. Para una lista completa y oficial, consulta el registro de tipos de medios de la IANA.

Extensión de archivo	Tipo de medio
`.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`

Elegir el tipo MIME correcto en HTML

Unas pocas reglas prácticas cubren la mayor parte del HTML cotidiano:

Para CSS, usa text/css. En HTML moderno incluso puedes omitirlo: <link rel="stylesheet" href="..."> ya implica CSS, por lo que el atributo type es opcional.
Para JavaScript, usa text/javascript (el tipo registrado estándar). Un <script> clásico no necesita type en absoluto; añade type="module" solo para activar los módulos ES.
Para elementos <source> de medios, incluye siempre un type como video/mp4 o audio/ogg. Permite al navegador omitir los formatos que no puede decodificar sin tener que descargarlos primero.
Para entradas de archivo, el atributo accept acepta una lista de tipos MIME separada por comas (image/png), tipos con comodín (image/*) o extensiones de archivo (.pdf).

La cabecera Content-Type real la establece tu servidor web (Nginx, Apache, Express, etc.), no HTML — consulta la documentación de tu servidor, o el registro de tipos de medios de la IANA, para asignar correctamente las extensiones a los tipos.

Práctica

Un tipo MIME se escribe como tipo/subtipo. ¿Qué afirmaciones sobre los tipos MIME son correctas?

Un tipo MIME siempre tiene un tipo y un subtipo separados por una barra diagonal, por ejemplo 'image/png'.En 'text/html; charset=UTF-8', la parte 'charset=UTF-8' es un parámetro opcional que establece la codificación de caracteres.En 'image/jpeg', 'image' es el subtipo y 'jpeg' es el tipo.Los navegadores generalmente dependen de la extensión del archivo en lugar del tipo MIME para decidir cómo procesar un recurso.'multipart/form-data' es el valor de enctype que se usa cuando un formulario HTML sube archivos.