MIME-типы в HTML — Content-Type, charset, accept

Многоцелевые расширения интернет-почты, известные как MIME-тип (также называемый медиатипом или типом содержимого), — это стандартизированная строка, которую браузеры и серверы используют для определения типа передаваемого содержимого. Спецификация определена в IETF RFC 6838.

MIME-тип — это строка-идентификатор, а не расширение файла. Браузеры, как правило, опираются на MIME-тип — передаваемый сервером в заголовке ответа Content-Type — а не на расширение файла, чтобы решить, как обрабатывать документ. Именно поэтому серверы должны быть настроены на присвоение правильного MIME-типа каждому ответу. Если тип указан неверно, браузеры могут неправильно интерпретировать содержимое файла: таблица стилей может быть проигнорирована, скрипт заблокирован, а JSON-ответ отображён как обычный текст.

Где MIME-типы встречаются в HTML

Хотя MIME-типы пришли из мира электронной почты и HTTP-заголовков, вы записываете их непосредственно в HTML чаще, чем можно ожидать. Наиболее распространённые места:

type в <link> и <script> — объявляет медиатип связанного ресурса, например <link rel="stylesheet" type="text/css"> или <script type="module">. См. тег <link> и тег <script>.
type в <source> — сообщает <audio>/<video>/<picture>, в каком формате находится каждый источник, чтобы браузер мог пропустить те, которые не поддерживает. См. тег <source>.
accept в <input type="file"> — фильтрует типы файлов, предлагаемые диалогом выбора файла, используя MIME-типы или расширения. См. атрибут accept и тег <input>.
enctype в <form> — задаёт способ кодирования данных формы при отправке; значением является MIME-тип, например multipart/form-data. См. тег <form>.
<meta http-equiv="Content-Type"> — исторически объявлял тип документа и кодировку символов. В HTML5 он заменён более кратким <meta charset="UTF-8">. См. тег <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>

Синтаксис: тип, подтип и параметры

Каждый MIME-тип имеет одинаковую структуру — тип и подтип, разделённые косой чертой (/), без пробелов:

type/subtype

MIME-тип всегда должен включать обе части; каждый тип имеет собственный набор подтипов:

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

Тип — это широкая категория (text, image, audio, video, application, …), а подтип обозначает конкретный формат внутри этой категории. MIME-типы не чувствительны к регистру, но по соглашению записываются в нижнем регистре.

После точки с запятой (;) можно добавить необязательный параметр для уточнения:

type/subtype;parameter=value

Параметр `charset`

Наиболее распространённый параметр — charset, который сообщает браузеру, какую кодировку символов использует текстовый ресурс. Для HTML-страниц это почти всегда должно быть UTF-8:

text/html; charset=UTF-8

Эту строку обычно можно увидеть в HTTP-заголовке Content-Type. В HTML ту же информацию задают одним тегом в <head> документа:

<meta charset="UTF-8" />

Если кодировка отсутствует или указана неверно, буквы с диакритическими знаками и символы не-латинского алфавита могут отображаться в виде искажённых символов (например, Ã© вместо é).

MIME-типы делятся на две категории: дискретные и составные. У каждой есть свои подтипы.

Дискретные типы

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
…

Дискретные типы обозначают категорию единственного самодостаточного документа. Они могут быть одним из следующих:

Тип	Описание	Примеры типичных подтипов
application	Содержит двоичные данные	application/javascript, application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml, application/pdf
audio	Аудиофайл	audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
font	Данные шрифта	font/woff, font/ttf, font/otf
image	Файл изображения	image/png, image/jpeg, image/gif, image/webp, image/svg+xml
message	Сообщение, оборачивающее другое сообщение	message/rfc822, message/partial
model	Данные модели для 3D-объектов	model/3mf, model/vrml
text	Текстовый документ	text/plain, text/html, text/css, text/javascript
video	Видеофайл	video/webm, video/ogg, video/mp4

Для описания текстового документа, не относящегося к конкретному подтипу, используется text/plain. Документы, содержащие двоичные данные без конкретного подтипа, описываются с помощью application/octet-stream.

Составные типы

MIME-типы

multipart/form-data
multipart/byteranges

Составные типы описывают документы, состоящие из нескольких частей, каждая из которых может иметь собственный MIME-тип. Чаще всего в HTML встречается multipart/form-data — это значение, которое задаётся атрибуту enctype формы при загрузке файлов.

Тип	Описание	Примеры типичных подтипов
multipart	Данные, состоящие из нескольких компонентов	multipart/form-data, multipart/byteranges

Распространённые MIME-типы

В следующей таблице перечислены широко используемые современные MIME-типы. Многие устаревшие типы с префиксом x- (например, image/x-icon) являются устаревшими и не должны использоваться в новых проектах. Полный авторитетный список см. в реестре медиатипов IANA.

Расширение файла	Медиатип
`.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`

Выбор правильного MIME-типа в HTML

Несколько практических правил охватывают большинство повседневных задач HTML:

Для CSS используйте text/css. В современном HTML его можно даже опустить: <link rel="stylesheet" href="..."> уже подразумевает CSS, поэтому атрибут type является необязательным.
Для JavaScript используйте text/javascript (стандартный зарегистрированный тип). Обычному тегу <script> атрибут type вообще не нужен; добавляйте type="module" только для использования ES-модулей.
Для элементов <source> медиаконтента всегда указывайте type, например video/mp4 или audio/ogg. Это позволяет браузеру пропускать форматы, которые он не поддерживает, без их предварительной загрузки.
Для файловых полей ввода атрибут accept принимает список MIME-типов через запятую (image/png), типы с маской (image/*) или расширения файлов (.pdf).

Фактический заголовок Content-Type задаётся вашим веб-сервером (Nginx, Apache, Express и т.д.), а не HTML — обратитесь к документации вашего сервера или реестру медиатипов IANA, чтобы правильно сопоставить расширения с типами.

Практика

MIME-тип записывается в формате type/subtype. Какие утверждения о MIME-типах верны?

MIME-тип всегда содержит тип и подтип, разделённые косой чертой, например 'image/png'.В 'text/html; charset=UTF-8' часть 'charset=UTF-8' — это необязательный параметр, задающий кодировку символов.В 'image/jpeg' слово 'image' — это подтип, а 'jpeg' — это тип.Браузеры обычно опираются на расширение файла, а не на MIME-тип, чтобы решить, как обрабатывать ресурс.'multipart/form-data' — это значение enctype, используемое при загрузке файлов через HTML-форму.