HTML MIME Types

HTML MIME Types

A MIME type, also called a media type, identifies the format and intended use of content transferred across the web.

Web servers send media types in HTTP responses so browsers can determine how content should be handled. HTML elements can also use media type information when linking to or embedding certain resources.

MIME Type Structure

A media type consists of a top-level type followed by a subtype, separated by a forward slash.

type/subtype

For example, the media type for an HTML document is text/html, while a PNG image uses image/png.

HTML MIME Type

The standard media type for an HTML document is text/html. A web server normally sends this value in the HTTP Content-Type response header when serving an HTML page.

Content-Type: text/html; charset=utf-8

The charset=utf-8 parameter indicates that the document uses UTF-8 character encoding.

Text & Data MIME Types

Text and structured-data formats are used for webpages, stylesheets, scripts, plain text, and data exchanged between applications.

Image MIME Types

Image media types identify image formats used by elements such as <img>, <picture>, <source>, and other web resources.

Audio MIME Types

Audio media types identify sound formats that can be referenced by HTML media elements. Browser support also depends on the codec used inside the media file.

Video MIME Types

Video media types identify video containers used with HTML media. The container format alone does not guarantee playback because browser support also depends on the audio and video codecs contained in the file.

Font MIME Types

Web fonts are normally loaded through CSS. Servers should send the appropriate media type for each font format.

Document MIME Types

Document media types identify common files that may be linked to or downloaded from a webpage.

Archive MIME Types

Archive and compressed file formats are commonly used when multiple files need to be packaged or distributed as a download.

MIME Types in HTML

Some HTML elements support the type attribute, which can provide information about the media type of a referenced resource.

<source src="video/example.mp4" type="video/mp4">
<source src="video/example.webm" type="video/webm">

For media sources, supplying a valid type value can help the browser determine whether it can use a resource before downloading it.

The type attribute can also be used with certain links to provide an advisory media type for the linked resource.

<a href="downloads/guide.pdf" type="application/pdf">Download Guide</a>

HTTP Content-Type

The web server is responsible for sending the correct media type in the HTTP Content-Type response header. Browsers use this information when deciding how a resource should be processed.

Content-Type: text/html; charset=utf-8
Content-Type: text/css
Content-Type: image/png
Content-Type: application/pdf

A file extension and a media type are related but are not the same thing. The extension is part of the filename, while the media type describes the format of the resource to software receiving it.

MIME Type Best Practices

• Configure the web server to send the correct Content-Type for each resource.
• Serve HTML documents as text/html.
• Use UTF-8 for modern HTML documents and declare the character encoding correctly.
• Serve CSS as text/css and JavaScript as text/javascript.
• Use registered media types rather than inventing custom values for standard file formats.
• Remember that a filename extension does not replace the HTTP Content-Type header.
• For audio and video, remember that browser playback depends on both the container format and the codecs it contains.
• Test downloadable and embedded resources to make sure the server sends the expected media type.