MIME Types Reference

What Are MIME Types?

MIME types (Multipurpose Internet Mail Extensions) label the format of a file or data stream— for example text/html for web pages or image/png for images. They tell browsers and apps how to interpret the bytes.

Pattern:  type / subtype
Examples: text/html · image/png · application/json

Servers send them as:
  Content-Type: text/html; charset=UTF-8

Extensions (.png) are hints — Content-Type is authoritative

Why Do MIME Types Matter?

Without the right type, browsers may download CSS instead of applying it, block scripts, or show garbage instead of an image.

Type / Subtype Format

Every MIME type has two parts separated by a slash:

Common Web MIME Types

These cover most everyday front-end assets:

Complete MIME Types List

Searchable reference of file extensions, MIME types, and descriptions. Filter by extension, type name, or document kind.

Content-Type in HTTP

Servers send MIME types with the Content-Type response header:

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234

<!DOCTYPE html>...

For HTML pages, also declare encoding in the document with <meta charset="UTF-8"> rather than relying on deprecated http-equiv="Content-Type" meta tags.

MIME Types on a Real Page

One HTML file often pulls in several MIME types when served over HTTP:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>MIME Types Demo</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 1.5rem; }
    .box { background: #eff6ff; border: 1px solid #93c5fd; padding: 1rem; border-radius: 8px; }
  </style>
</head>
<body>
  <h1>MIME Types in Action</h1>
  <p>This page is <strong>text/html</strong>. The CSS above is <strong>text/css</strong>.</p>
  <div class="box" id="msg">JavaScript below runs as <strong>application/javascript</strong>.</div>
  <script>
    document.getElementById("msg").innerHTML += " ✓ Loaded!";
  </script>
</body>
</html>

MIME Types in Action
This page is text/html. The CSS above is text/css.
JavaScript below runs as application/javascript. ✓ Loaded!

How It Works

1. HTML. The document itself is served as text/html.

2. CSS. Embedded or linked styles use text/css.

3. JavaScript. Scripts use application/javascript (or text/javascript).

Where MIME Types Show Up

You will set or read MIME types in many places:

Key Takeaways