ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
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/html | HTML 文書 |
application/xhtml+xml | XHTML |
application/xml / text/xml | XML |
text/plain | プレーンテキスト |
text/css | カスケーディングスタイルシート(CSS) |
application/javascript | JavaScript |
application/json | JSON |
application/pdf |
画像
| MIME タイプ | 内容 |
|---|---|
image/gif | GIF |
image/jpeg | JPEG |
image/png | PNG |
image/webp | WebP |
image/svg+xml | SVG |
image/x-icon | ICO(ファビコン) |
音声・動画
| MIME タイプ | 内容 |
|---|---|
audio/mpeg | MP3 |
audio/mp4 | MPEG-4 オーディオ |
audio/midi | MIDI |
audio/ogg | OGG Vorbis |
audio/wav | WAV |
video/mp4 | MPEG-4 / MP4 |
video/mpeg | MPEG |
video/quicktime | MOV(QuickTime) |
video/webm | WebM |
アーカイブ・バイナリ
| MIME タイプ | 内容 |
|---|---|
application/zip | ZIP |
application/gzip | GZIP |
application/x-tar | TAR |
application/x-7z-compressed | 7-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 タイプを判断し、次の順序で優先します。
- HTTP
Content-Typeヘッダ — サーバが返した値。最優先 - HTML 要素の
type属性 — ヒントとして参照 - URL の拡張子 —
.pdf,.zipなど - コンテンツスニッフィング — ファイル先頭バイトを見て自動判別(セキュリティリスクあり)
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 — 上位カテゴリ
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページはありません
- href属性
- target属性
- download 属性
- rel 属性
- hreflang属性
- type属性
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- IPv6とは|128bitアドレス・コロン16進表記/::省略・リンクローカル・SLAAC・デュアルスタック 2026-06-22 12:34:44
- VPNとは|暗号トンネル・サイト間/リモートアクセス・IPsec/SSL-VPN/WireGuardを解説 2026-06-22 12:19:10
- MAC アドレスフィルタリングの仕組みと限界 | ネットワーク入門 2026-06-22 12:19:10
- gRPC とは HTTP/2 + Protocol Buffers の高速 RPC | ネットワーク入門 2026-06-22 12:17:25
- WebSocket とは 全二重リアルタイム通信 ws/wss | ネットワーク入門 2026-06-22 12:17:25
- WebRTC とは ブラウザ間 P2P の音声・映像・データ通信 | ネットワーク入門 2026-06-22 12:17:25
- HTTP/3 (QUIC) とは UDP ベースの低遅延 Web 通信 | ネットワーク入門 2026-06-22 12:17:25
- HTTP/2 とは 多重化・HPACK・バイナリフレーム | ネットワーク入門 2026-06-22 12:17:25
- Web通信プロトコル入門 HTTP/2・HTTP/3・WebSocket・gRPC・WebRTC | ネットワーク入門 2026-06-22 12:17:25
- 証明書と認証局(CA)とは|X.509・信頼チェーン・DV/OV/EV・失効(CRL/OCSP)を解説 2026-06-22 12:17:24
- ファイアウォールとは|パケットフィルタ・ステートフル・DMZ・次世代FW(L4/L7)を解説 2026-06-22 12:17:24
- iptables/nftablesとは|テーブル・チェーン・ルール例・永続化をLinux視点で解説 2026-06-22 12:17:24
- HAProxy とは frontend/backend と設定例 | ネットワーク入門 2026-06-22 12:17:24
- TLS/SSLの仕組み|ハンドシェイク・暗号スイート・前方秘匿性・証明書検証をわかりやすく解説 2026-06-22 12:17:24
- CDN とは エッジキャッシュ・TTL・Cloudflare/CloudFront | ネットワーク入門 2026-06-22 12:17:24
コメントを削除してもよろしいでしょうか?