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

Die Multipurpose Internet Mail Extensions, bekannt als MIME-Typ (auch Medientyp oder Content-Type genannt), sind ein standardisierter String, den Browser und Server verwenden, um den Typ des übertragenen Inhalts zu identifizieren. Die Spezifikation ist in IETF RFC 6838 definiert.

Ein MIME-Typ ist ein Bezeichner-String, kein Dateiformat. Browser verlassen sich in der Regel auf den MIME-Typ — der vom Server im Content-Type-Antwort-Header gesendet wird — und nicht auf die Dateiendung, um zu entscheiden, wie ein Dokument verarbeitet wird. Deshalb müssen Server so konfiguriert werden, dass sie jeder Antwort den richtigen MIME-Typ hinzufügen. Wenn der Typ falsch ist, können Browser den Inhalt einer Datei falsch interpretieren: Ein Stylesheet könnte ignoriert, ein Skript blockiert oder eine JSON-Antwort als Klartext angezeigt werden.

Wo MIME-Typen in HTML vorkommen

Obwohl MIME-Typen aus der Welt der E-Mail und HTTP-Header stammen, schreibt man sie in HTML öfter direkt, als man vielleicht erwartet. Die häufigsten Stellen sind:

type bei <link> und <script> — deklariert den Medientyp einer verlinkten Ressource, z. B. <link rel="stylesheet" type="text/css"> oder <script type="module">. Siehe den <link>-Tag und den <script>-Tag.
type bei <source> — teilt <audio>/<video>/<picture> mit, welches Format jede Quelle hat, damit der Browser Formate überspringen kann, die er nicht abspielen kann. Siehe den <source>-Tag.
accept bei <input type="file"> — filtert, welche Dateitypen der Dateiauswahldialog anbietet, mithilfe von MIME-Typen oder Dateiendungen. Siehe das accept-Attribut und den <input>-Tag.
enctype bei <form> — legt fest, wie Formulardaten beim Absenden kodiert werden; der Wert ist ein MIME-Typ wie multipart/form-data. Siehe den <form>-Tag.
<meta http-equiv="Content-Type"> — deklarierte historisch den Typ und die Zeichenkodierung des Dokuments. In HTML5 wird dies durch das kürzere <meta charset="UTF-8"> ersetzt. Siehe den <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: Typ, Subtyp und Parameter

Jeder MIME-Typ hat dieselbe Struktur — einen Typ und einen Subtyp, getrennt durch einen Schrägstrich (/), ohne Leerzeichen:

type/subtype

Ein MIME-Typ muss immer beide Teile enthalten; jeder Typ hat seinen eigenen Satz von Subtypen:

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

Der Typ ist die übergeordnete Kategorie (text, image, audio, video, application, …) und der Subtyp benennt das genaue Format innerhalb dieser Kategorie. MIME-Typen sind nicht case-sensitiv, werden aber üblicherweise in Kleinbuchstaben geschrieben.

Man kann einen optionalen Parameter nach einem Semikolon (;) anhängen, um weitere Details hinzuzufügen:

type/subtype;parameter=value

Der `charset`-Parameter

Der häufigste Parameter ist charset, der dem Browser mitteilt, welche Zeichenkodierung eine Textressource verwendet. Für HTML-Seiten sollte dies fast immer UTF-8 sein:

text/html; charset=UTF-8

Dieser genaue String ist normalerweise im HTTP-Content-Type-Header zu sehen. In HTML setzt man dieselbe Information mit einem einzigen Tag im <head> des Dokuments:

<meta charset="UTF-8" />

Wenn die Kodierung fehlt oder falsch ist, können Buchstaben mit Akzenten und nicht-lateinische Zeichen als unleserliche Symbole dargestellt werden (zum Beispiel Ã© statt é).

MIME-Typen werden in zwei Kategorien unterteilt: diskrete und Multipart-Typen. Jede hat spezifische Subtypen.

Diskrete Typen

MIME-Typen

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
…

Diskrete Typen geben die Kategorie eines einzelnen, in sich geschlossenen Dokuments an. Sie können einer der folgenden sein:

Typ	Beschreibung	Beispiele typischer Subtypen
application	Enthält Binärdaten	application/javascript, application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml, application/pdf
audio	Audiodatei	audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
font	Schriftart-/Typeface-Daten	font/woff, font/ttf, font/otf
image	Bilddatei	image/png, image/jpeg, image/gif, image/webp, image/svg+xml
message	Nachricht, die eine andere Nachricht umschließt	message/rfc822, message/partial
model	Modelldaten für 3D-Objekte	model/3mf, model/vrml
text	Textdokument	text/plain, text/html, text/css, text/javascript
video	Videodatei	video/webm, video/ogg, video/mp4

Zur Beschreibung eines Textdokuments, das zu keinem bestimmten Subtyp gehört, wird text/plain verwendet. Dokumente mit Binärdaten ohne spezifischen Subtyp werden mit application/octet-stream beschrieben.

Multipart-Typen

MIME-Typen

multipart/form-data
multipart/byteranges

Multipart-Typen beschreiben Dokumente, die aus mehreren Teilen bestehen, wobei jeder Teil seinen eigenen MIME-Typ haben kann. Der in HTML am häufigsten anzutreffende Typ ist multipart/form-data, der als Wert für das enctype-Attribut eines Formulars verwendet wird, wenn Dateien hochgeladen werden.

Typ	Beschreibung	Beispiele typischer Subtypen
multipart	Daten aus mehreren Komponenten	multipart/form-data, multipart/byteranges

Häufige MIME-Typen

Die folgende Tabelle listet weit verbreitete, moderne MIME-Typen auf. Viele veraltete Typen mit dem Präfix x- (z. B. image/x-icon) sind veraltet und sollten in neuen Projekten vermieden werden. Eine vollständige, verbindliche Liste findet sich im IANA Media Types-Register.

Dateiendung	Medientyp
`.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`

Den richtigen MIME-Typ in HTML wählen

Einige praktische Regeln decken den größten Teil des alltäglichen HTML ab:

Für CSS verwendet man text/css. In modernem HTML kann man es sogar weglassen: <link rel="stylesheet" href="..."> impliziert bereits CSS, daher ist ein type-Attribut optional.
Für JavaScript verwendet man text/javascript (den standardmäßig registrierten Typ). Ein klassisches <script> benötigt überhaupt kein type; type="module" wird nur hinzugefügt, um ES-Module zu aktivieren.
Für <source>-Elemente bei Medien sollte immer ein type wie video/mp4 oder audio/ogg angegeben werden. So kann der Browser Formate, die er nicht dekodieren kann, überspringen, ohne sie zuerst herunterzuladen.
Für Datei-Inputs akzeptiert das accept-Attribut eine kommagetrennte Liste von MIME-Typen (image/png), Wildcard-Typen (image/*) oder Dateiendungen (.pdf).

Der eigentliche Content-Type-Header wird vom Webserver (Nginx, Apache, Express usw.) gesetzt, nicht durch HTML — konsultiere die Dokumentation deines Servers oder das IANA Media Types-Register, um Dateiendungen korrekt Typen zuzuordnen.

Übung

Ein MIME-Typ wird als Typ/Subtyp geschrieben. Welche Aussagen über MIME-Typen sind korrekt?

Ein MIME-Typ hat immer sowohl einen Typ als auch einen Subtyp, getrennt durch einen Schrägstrich, zum Beispiel 'image/png'.In 'text/html; charset=UTF-8' ist der Teil 'charset=UTF-8' ein optionaler Parameter, der die Zeichenkodierung festlegt.In 'image/jpeg' ist 'image' der Subtyp und 'jpeg' der Typ.Browser verlassen sich normalerweise auf die Dateiendung statt auf den MIME-Typ, um zu entscheiden, wie eine Ressource verarbeitet wird.'multipart/form-data' ist der enctype-Wert, der verwendet wird, wenn ein HTML-Formular Dateien hochlädt.