6.

HTML a要素 type 属性 完全ガイド(MIME タイプ一覧 / 用途 / hint としての扱い / ブラウザ挙動)

編集
この記事の要点
  • <a> 要素の type 属性はリンク先リソースの MIME タイプを示すヒント
  • 構文: <a href="URL" type="MIMEタイプ">テキスト</a>
  • ブラウザはあくまでヒントとして扱い、実際の解釈はサーバが返す Content-Type ヘッダを優先
  • 代表的な MIME: text/html, application/pdf, image/jpeg, video/mp4, application/zip など
  • SEO 効果は無いが、支援技術(スクリーンリーダー)がリンク先の種類を案内する材料になる

type 属性とは

HTML の a 要素(アンカー要素)に指定できる type 属性は、リンク先リソースの MIME タイプ(メディアタイプ)を示すための属性です。リンク先を実際に取得・解釈する際の参考情報(ヒント)として利用されます。

構文

<a href="URL" type="MIMEタイプ">テキスト</a>

具体例

<!-- PDF へのリンク -->
<a href="/docs/manual.pdf" type="application/pdf">マニュアル(PDF)</a>

<!-- ZIP ダウンロード -->
<a href="/dl/sample.zip" type="application/zip" download>サンプル一式(ZIP)</a>

<!-- 動画ファイル -->
<a href="/movie/intro.mp4" type="video/mp4">紹介動画</a>

代表的な MIME タイプ一覧

テキスト・文書

MIME タイプ内容
text/htmlHTML 文書
application/xhtml+xmlXHTML
application/xml / text/xmlXML
text/plainプレーンテキスト
text/cssカスケーディングスタイルシート(CSS)
application/javascriptJavaScript
application/jsonJSON
application/pdfPDF

画像

MIME タイプ内容
image/gifGIF
image/jpegJPEG
image/pngPNG
image/webpWebP
image/svg+xmlSVG
image/x-iconICO(ファビコン)

音声・動画

MIME タイプ内容
audio/mpegMP3
audio/mp4MPEG-4 オーディオ
audio/midiMIDI
audio/oggOGG Vorbis
audio/wavWAV
video/mp4MPEG-4 / MP4
video/mpegMPEG
video/quicktimeMOV(QuickTime)
video/webmWebM

アーカイブ・バイナリ

MIME タイプ内容
application/zipZIP
application/gzipGZIP
application/x-tarTAR
application/x-7z-compressed7-Zip
application/octet-streamバイナリ形式の既定値(不明な型)

type 属性は「ヒント」にすぎない

重要なのは、type 属性で指定した MIME タイプはあくまでヒント(hint)で、ブラウザは実際にはサーバから返される HTTP Content-Type ヘッダを優先するという点です。

たとえば type="application/pdf" と書いていても、サーバが Content-Type: text/html を返せば、ブラウザは HTML として扱います。逆に type を書いていなくても、サーバが正しく PDF を返せば PDF として開かれます。

使うとよい場面

  • ダウンロードリンクのアイコン分岐 — JavaScript / CSS で a[type="application/pdf"] のように属性セレクタで装飾を切替
  • 支援技術への配慮 — スクリーンリーダーが「PDF ドキュメントへのリンク」と読み上げる材料になる
  • UA への先回りヒント — ブラウザがリソース取得前にハンドラを準備できる

関連属性との併用

属性用途
downloadクリック時に保存ダイアログを開く(同一オリジン推奨)
rel関係性(noopener, noreferrer, nofollow 等)
target表示先(_blank, _self 等)
hreflangリンク先の言語

組み合わせ例

<a href="/dl/manual_ja.pdf"
   type="application/pdf"
   hreflang="ja"
   download
   rel="noopener">
  マニュアル(日本語版・PDF)をダウンロード
</a>

注意点

  • SEO に直接の効果は無い(ヒント属性なので Google も特別な扱いはしない)
  • 誤った MIME タイプを指定すると支援技術がユーザを誤誘導する恐れがあるため、確信が持てない場合は省略する方が安全
  • 同名の属性が <link>, <script>, <input>, <button> にも存在するが、意味はそれぞれ別物<input type="text"> は MIME ではなく入力種別)

MIME タイプ判定の優先順位

ブラウザは複数の情報源から MIME タイプを判断し、次の順序で優先します。

  1. HTTP Content-Type ヘッダ — サーバが返した値。最優先
  2. HTML 要素の type 属性 — ヒントとして参照
  3. URL の拡張子.pdf, .zip など
  4. コンテンツスニッフィング — ファイル先頭バイトを見て自動判別(セキュリティリスクあり)

Web サーバ側で正しい Content-Type を返すことが最も重要です。Apache の mime.types、Nginx の include mime.types 設定を確認しましょう。コンテンツスニッフィングは XSS の温床になるため、X-Content-Type-Options: nosniff ヘッダで無効化するのが現代のベストプラクティスです。

type 属性の歴史

仕様type 属性の扱い
HTML 4.01「アドバイザリ情報」として導入
XHTML 1.x同上、推奨される場合あり
HTML5 / HTML Living Standard「リソースの種類を予測するヒント」と再定義

使うかどうかは任意で、現代の HTML5 仕様でも互換のため残されているという立ち位置です。

関連

  • a要素 — 親カテゴリ
  • href 属性 / target 属性 / rel 属性 / download 属性
  • HTML — 上位カテゴリ
編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. href属性
  2. target属性
  3. download 属性
  4. rel 属性
  5. hreflang属性
  6. type属性

最近更新/作成されたページ