98
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

MIMEタイプってなんだ?

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

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種類であることについてはまた記事を分けよう…

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
98
Help us understand the problem. What are the problem?