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

The Multipurpose Internet Mail Extensions, known as a MIME type (also called a media type or content type), is a standardized string that browsers and servers use to identify the type of content being transferred. The specification is defined in IETF RFC 6838.

A MIME type is an identifier string, not a file extension. Browsers generally rely on the MIME type — sent by the server in the Content-Type response header — rather than the file extension to decide how to process a document. That is why servers must be configured to attach the correct MIME type to each response. If the type is wrong, browsers can misinterpret a file's contents: a stylesheet might be ignored, a script blocked, or a JSON response shown as plain text.

Where MIME types appear in HTML

Although MIME types come from the world of email and HTTP headers, you write them directly in HTML more often than you might expect. The most common places are:

type on <link> and <script> — declares the media type of a linked resource, e.g. <link rel="stylesheet" type="text/css"> or <script type="module">. See the <link> tag and the <script> tag.
type on <source> — tells <audio>/<video>/<picture> which format each source is, so the browser can skip ones it cannot play. See the <source> tag.
accept on <input type="file"> — filters which file types the file picker offers, using MIME types or extensions. See the accept attribute and the <input> tag.
enctype on <form> — sets how form data is encoded when submitted; the value is a MIME type such as multipart/form-data. See the <form> tag.
<meta http-equiv="Content-Type"> — historically declared the document's type and character encoding. In HTML5 this is replaced by the shorter <meta charset="UTF-8">. See the <meta> tag.

<!-- 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>

Syntax: type, subtype, and parameters

Every MIME type has the same structure — a type and a subtype, separated by a slash (/), with no spaces:

type/subtype

A MIME type must always include both parts; each type owns its own set of subtypes:

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

The type is the broad category (text, image, audio, video, application, …) and the subtype names the exact format within that category. MIME types are not case-sensitive, but they are conventionally written in lower case.

You can append an optional parameter after a semicolon (;) to add detail:

type/subtype;parameter=value

The `charset` parameter

The most common parameter is charset, which tells the browser which character encoding a text resource uses. For HTML pages this should almost always be UTF-8:

text/html; charset=UTF-8

You normally see this exact string in the HTTP Content-Type header. In HTML you set the same information with a single tag in the document <head>:

<meta charset="UTF-8" />

If the encoding is missing or wrong, accented letters and non-Latin characters can render as garbled symbols (for example Ã© instead of é).

MIME types are divided into two categories: discrete and multipart. Each has specific subtypes.

Discrete Types

MIME Types

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
…

Discrete types indicate the category of a single, self-contained document. They can be one of the following:

Type	Description	Example of typical subtypes
application	Contains binary data	application/javascript, application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml, application/pdf
audio	Audio file	audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
font	Font/typeface data	font/woff, font/ttf, font/otf
image	Image file	image/png, image/jpeg, image/gif, image/webp, image/svg+xml
message	Message that wraps another message	message/rfc822, message/partial
model	Model data for 3D objects	model/3mf, model/vrml
text	Text document	text/plain, text/html, text/css, text/javascript
video	Video file	video/webm, video/ogg, video/mp4

For describing a text document that doesn’t belong to a particular subtype, text/plain is used. Documents containing binary data without a specific subtype are described using application/octet-stream.

Multipart Types

MIME Types

multipart/form-data
multipart/byteranges

Multipart types describe documents made up of several parts, each of which can have its own MIME type. The one you meet most often in HTML is multipart/form-data, which is the value you give to a form's enctype attribute when it uploads files.

Type	Description	Example of typical subtypes
multipart	Data composed of multiple components	multipart/form-data, multipart/byteranges

Common MIME Types

The following table lists widely used, modern MIME types. Many legacy types prefixed with x- (e.g., image/x-icon) are deprecated and should be avoided in new projects. For a complete, authoritative list, refer to the IANA Media Types registry.

File extension	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`

Choosing the right MIME type in HTML

A few practical rules cover most day-to-day HTML:

For CSS, use text/css. In modern HTML you can even omit it: <link rel="stylesheet" href="..."> already implies CSS, so a type attribute is optional.
For JavaScript, use text/javascript (the standard registered type). A classic <script> needs no type at all; add type="module" only to opt into ES modules.
For media <source> elements, always include a type such as video/mp4 or audio/ogg. It lets the browser skip formats it cannot decode without downloading them first.
For file inputs, the accept attribute takes a comma-separated list of MIME types (image/png), wildcard types (image/*), or file extensions (.pdf).

The actual Content-Type header is set by your web server (Nginx, Apache, Express, etc.), not by HTML — consult your server's documentation, or the IANA Media Types registry, to map extensions to types correctly.

Practice

A MIME type is written as type/subtype. Which statements about MIME types are correct?

A MIME type always has both a type and a subtype separated by a slash, for example 'image/png'.In 'text/html; charset=UTF-8', the 'charset=UTF-8' part is an optional parameter that sets the character encoding.In 'image/jpeg', 'image' is the subtype and 'jpeg' is the type.Browsers usually rely on the file extension instead of the MIME type to decide how to process a resource.'multipart/form-data' is the enctype value used when an HTML form uploads files.