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

As Extensões Multipropósito de Correio da Internet, conhecidas como tipo MIME (também chamado de media type ou content type), são uma string padronizada que navegadores e servidores usam para identificar o tipo de conteúdo sendo transferido. A especificação está definida no IETF RFC 6838.

Um tipo MIME é uma string identificadora, não uma extensão de arquivo. Os navegadores geralmente confiam no tipo MIME — enviado pelo servidor no cabeçalho de resposta Content-Type — em vez da extensão do arquivo para decidir como processar um documento. É por isso que os servidores devem ser configurados para anexar o tipo MIME correto a cada resposta. Se o tipo estiver errado, os navegadores podem interpretar mal o conteúdo de um arquivo: uma folha de estilos pode ser ignorada, um script bloqueado ou uma resposta JSON exibida como texto simples.

Onde os tipos MIME aparecem em HTML

Embora os tipos MIME venham do mundo do e-mail e dos cabeçalhos HTTP, você os escreve diretamente em HTML com mais frequência do que se poderia esperar. Os locais mais comuns são:

type em <link> e <script> — declara o media type de um recurso vinculado, ex.: <link rel="stylesheet" type="text/css"> ou <script type="module">. Consulte a tag <link> e a tag <script>.
type em <source> — informa ao <audio>/<video>/<picture> qual formato cada fonte possui, para que o navegador possa ignorar os que não consegue reproduzir. Consulte a tag <source>.
accept em <input type="file"> — filtra quais tipos de arquivo o seletor de arquivos oferece, usando tipos MIME ou extensões. Consulte o atributo accept e a tag <input>.
enctype em <form> — define como os dados do formulário são codificados ao serem enviados; o valor é um tipo MIME como multipart/form-data. Consulte a tag <form>.
<meta http-equiv="Content-Type"> — historicamente declarava o tipo e a codificação de caracteres do documento. Em HTML5, isso é substituído pela forma abreviada <meta charset="UTF-8">. Consulte a 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>

Sintaxe: tipo, subtipo e parâmetros

Todo tipo MIME tem a mesma estrutura — um tipo e um subtipo, separados por uma barra (/), sem espaços:

type/subtype

Um tipo MIME deve sempre incluir ambas as partes; cada tipo possui seu próprio conjunto de subtipos:

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

O tipo é a categoria ampla (text, image, audio, video, application, …) e o subtipo nomeia o formato exato dentro dessa categoria. Os tipos MIME não diferenciam maiúsculas de minúsculas, mas são convencionalmente escritos em letras minúsculas.

Você pode acrescentar um parâmetro opcional após um ponto e vírgula (;) para adicionar detalhes:

type/subtype;parameter=value

O parâmetro `charset`

O parâmetro mais comum é charset, que informa ao navegador qual codificação de caracteres um recurso de texto usa. Para páginas HTML, isso deve ser quase sempre UTF-8:

text/html; charset=UTF-8

Normalmente você encontra essa string exata no cabeçalho HTTP Content-Type. Em HTML, você define a mesma informação com uma única tag no <head> do documento:

<meta charset="UTF-8" />

Se a codificação estiver ausente ou incorreta, letras acentuadas e caracteres não latinos podem ser exibidos como símbolos distorcidos (por exemplo, Ã© em vez de é).

Os tipos MIME são divididos em duas categorias: discretos e multipart. Cada um tem 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
…

Os tipos discretos indicam a categoria de um documento único e autossuficiente. Eles podem ser um dos seguintes:

Tipo	Descrição	Exemplo de subtipos típicos
application	Contém dados binários	application/javascript, application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml, application/pdf
audio	Arquivo de áudio	audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
font	Dados de fonte/tipografia	font/woff, font/ttf, font/otf
image	Arquivo de imagem	image/png, image/jpeg, image/gif, image/webp, image/svg+xml
message	Mensagem que encapsula outra mensagem	message/rfc822, message/partial
model	Dados de modelo para objetos 3D	model/3mf, model/vrml
text	Documento de texto	text/plain, text/html, text/css, text/javascript
video	Arquivo de vídeo	video/webm, video/ogg, video/mp4

Para descrever um documento de texto que não pertence a um subtipo específico, utiliza-se text/plain. Documentos que contêm dados binários sem um subtipo específico são descritos usando application/octet-stream.

Tipos Multipart

Tipos MIME

multipart/form-data
multipart/byteranges

Os tipos multipart descrevem documentos compostos por várias partes, cada uma podendo ter seu próprio tipo MIME. O que você encontra com mais frequência em HTML é multipart/form-data, que é o valor atribuído ao atributo enctype de um formulário quando ele envia arquivos.

Tipo	Descrição	Exemplo de subtipos típicos
multipart	Dados compostos por múltiplos componentes	multipart/form-data, multipart/byteranges

Tipos MIME Comuns

A tabela a seguir lista tipos MIME modernos e amplamente usados. Muitos tipos legados com prefixo x- (ex.: image/x-icon) estão obsoletos e devem ser evitados em novos projetos. Para uma lista completa e oficial, consulte o registro de Media Types da IANA.

Extensão de arquivo	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`

Escolhendo o tipo MIME correto em HTML

Algumas regras práticas cobrem a maior parte do HTML do dia a dia:

Para CSS, use text/css. Em HTML moderno, você pode até omiti-lo: <link rel="stylesheet" href="..."> já implica CSS, portanto o atributo type é opcional.
Para JavaScript, use text/javascript (o tipo registrado padrão). Um <script> clássico não precisa de nenhum type; adicione type="module" apenas para usar módulos ES.
Para elementos <source> de mídia, sempre inclua um type como video/mp4 ou audio/ogg. Isso permite que o navegador ignore formatos que não consegue decodificar sem precisar baixá-los primeiro.
Para inputs de arquivo, o atributo accept aceita uma lista separada por vírgulas de tipos MIME (image/png), tipos com curinga (image/*) ou extensões de arquivo (.pdf).

O cabeçalho Content-Type real é definido pelo seu servidor web (Nginx, Apache, Express, etc.), não pelo HTML — consulte a documentação do seu servidor, ou o registro de Media Types da IANA, para mapear extensões para tipos corretamente.

Prática

Um tipo MIME é escrito como tipo/subtipo. Quais afirmações sobre tipos MIME estão corretas?

Um tipo MIME sempre tem um tipo e um subtipo separados por uma barra, por exemplo 'image/png'.Em 'text/html; charset=UTF-8', a parte 'charset=UTF-8' é um parâmetro opcional que define a codificação de caracteres.Em 'image/jpeg', 'image' é o subtipo e 'jpeg' é o tipo.Os navegadores geralmente confiam na extensão do arquivo em vez do tipo MIME para decidir como processar um recurso.'multipart/form-data' é o valor de enctype usado quando um formulário HTML envia arquivos.