ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子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
- 4 YouTube Data API v3 エラー一覧|403・400・404 の原因と対処
- 5 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 6 Spring Frameworkのアノテーション一覧
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- PHP $_SERVERとは|DOCUMENT_ROOT・PHP_SELFなど主な要素 2026-08-07 17:15:57
- PHPでのファイルアップロード方法|multipart/form-dataと$_FILES 2026-08-07 17:15:57
- Scratchのアカウントの作り方|メールアドレスとユーザー名の登録手順 2026-08-07 17:15:57
- Bluetoothとは|仕組み・BLEとClassicの違い・用途 2026-08-07 17:15:57
- Spring Bootのテスト入門|@SpringBootTestとJUnitでの単体・結合テスト 2026-08-07 17:15:57
- djangoにおけるMVCアプリケーション実装例 2026-08-07 17:15:57
- インストール(eclipseプラグイン) 2026-08-07 17:15:56
- データベースとは?RDB / NoSQL / SQL の基礎 2026-08-07 17:15:56
- Scratch 作品の公開方法 2026-08-07 17:15:56
- インストール方法(Windows版) 2026-08-07 17:15:56
- 【PHPフレームワーク】Laravelの使い方 2026-08-07 17:15:56
- APIキー取得方法 2026-08-07 17:15:56
- Spring Frameworkの使い方 2026-08-07 17:15:56
- Java とは?言語仕様・JVM・主要フレームワーク一覧 2026-08-07 17:15:56
- Google OAuth 2.0 認証の実装方法 2026-08-07 17:15:56
コメントを削除してもよろしいでしょうか?