Edited at

MIMEタイプってなんだ?

More than 1 year has passed since last update.

自分用の忘備録なので、とても基礎的な基礎な内容ですが残しておきます。


HTML5には文法が2種類ある

MIMEタイプというものを知る前に、こんな経緯がありました。

HTML5の勉強をし始めたばかりの自分は、

HTML5には2種類の文法があるよ。という話を初めて聞きました。

1.MIMEタイプ「text/html」で配信するページ向けのHTML構文

拡張子:.htmまたは.html

通常HTML5といえばこちらの構文。

2.MIMEタイプ「application/xhtml+xml」で配信するページ向けのXHTML構文

拡張子:.xml

XMLの仕様に従う構文。

と、ここで早速疑問が浮かびます。

そもそも、「MIMEタイプ」って何ぞや?

あいまいみーまいんというやつなのか?


拡張子はよく知っているけど、「MIMEタイプ」って?

webの世界では、ファイルの種別を何であるか示す「拡張子」という概念と、もうひとつ「MIMEタイプ」という概念があるそうです。


MDNさんはこう言っておりました。


MIME タイプはクライアントに対して、転送するドキュメントの種類を伝える機能です。ウェブにおいて、ファイル名の拡張子は意味を持ちません。従って、サーバーはそれぞれのドキュメントと共に正しい MIME タイプを転送するよう適切に設定することが重要です。ブラウザーはたいてい MIME タイプを、読み込んだリソースに対して行う既定のアクションを決めるために使用します。



MIMEタイプ構文


type/subtype


拡張子はファイルの種別を分けるのに使いますが、MIMEタイプはさらにもう少し詳しい情報をブラウザに伝えるためのもの。

画像ファイルのgif、テキストファイルのcssみたいな。

確かに見た目が同じ画像ファイルと言っても、gifとjpgは違うファイルですしね。

タイプ
説明
代表的なサブタイプの例

text
テキストを含んでおり、理論上は人間が読めるドキュメントを表します。
text/plain, text/html, text/css, text/javascript

image
なんらかの種類の画像を表します。動画は含まれませんが、アニメーションする画像 (アニメーション GIF など) は画像のタイプで表します。
image/gif, image/png, image/jpeg, image/bmp, image/webp

audio
なんらかの種類の音声ファイルを表します。
audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav

video
なんらかの種類の動画ファイルを表します。
video/webm, video/ogg

application
なんらかの種類のバイナリーデータを表します。
application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml, application/pdf

(MDNさんより引用)

例えばこう……

ブラウザ「サーバーさん、logo.gifくんを呼びたいんだけど」

サーバー「おお、そいつは画像のgif形式だね、任せとけ~」

ブラウザ「そうそう、そいつだよ!ありがとう、表示出来たよ!」

みたいな感じなのか。

そもそものきっかけだったHTML5の文法が2種類な理由から大分外れましたが……

拡張子以外の方法で、転送するドキュメントの種類をブラウザに伝える方法という認識でよいのかなーという結論になりました。

HTML5の文法が2種類であることについてはまた記事を分けよう…