要素の概要と主要属性
HTMLの <a> 要素は、ドキュメント間のハイパーリンク構築や外部リソースへの参照を定義するための標準コンポーネントです。主に以下の機能群を提供します:外部Webサイトまたはローカルドキュメントへの遷移、メディア/アーカイブファイルの参照とダウンロード制御、同一ドキュメント内または別ページでのフラグメントナビゲーション、そしてOS標準アプリの呼び出しプロトコル処理。
| 属性名 | 役割と説明 | 代表的な値 |
|---|---|---|
href |
リンクの参照先URIを指定。相対パス、絶対パス、プロトコルスキームに対応。 | URL、ファイルパス、フラグメント、tel: など |
target |
リンククリック時の表示コンテキストを制御。 | _self(同一)、_blank(新規) |
download |
存在する場合、ブラウザにインライン表示ではなくファイル保存を強制。 | 保存するファイル名(省略可能) |
id |
ドキュメント内で一意の識別子。ナビゲーションのターゲティングに使用。 | 文字列(英字で開始推奨) |
1. ドキュメント間遷移の制御
href 属性にURIを記述し、target 属性でレンダリングウィンドウの動作を決定します。HTML5仕様では、<a> 要素がフローコンテンツ(ブロック要素を含む)をラップすることが許可されているため、ナビゲーションカードやボタングループ全体をリンク化できます。
<!-- 別コンテキストで外部ドキュメントを開く -->
<a href="https://developer.mozilla.org/ja/" target="_blank">Mozilla開発者向けドキュメント</a>
<!-- 同一ウィンドウでローカルファイルを表示 -->
<a href="./assets/docs/specification_v2.html" target="_self">仕様書を確認する</a>
2. ファイル参照とダウンロード動作
ブラウザは href で指定されたMIMEタイプを判定し、ネイティブサポートされる形式はインラインレンダリング、サポートされない形式は自動ダウンロードダイアログをトリガーします。明示的に保存処理を強制したい場合は download 属性を使用します。
<!-- ブラウザがサポートするメディア/ドキュメント -->
<a href="./media/architecture_diagram.png">設計図を閲覧</a>
<a href="./media/tutorial_video.mp4">解説動画を再生</a>
<a href="./docs/archive_manual.pdf">マニュアルを開く</a>
<!-- 未知の形式や圧縮ファイルは自動ダウンロードへ移行 -->
<a href="./data/project_assets.zip">リソースパックを取得</a>
<!-- 強制的にダウンロードをトリガー(ファイル名をカスタマイズ可能) -->
<a href="./media/tutorial_video.mp4" download="lesson_intro.mp4">動画をローカルに保存</a>
※ download 属性を付与すると、MIMEタイプに関わらずブラウザはファイルを開く代わりにローカルストレージへの保存処理を実行します。
3. フラグメントナビゲーション(アンカーリンク)
ページ内の特定セクションへ直接スクロールさせるには、ターゲット要素に一意の id を設定し、リンク先URIの末尾に # 記号と識別子を結合して参照します。
<!-- 遷移先のターゲット設定(任意の要素にidを付与) -->
<section id="pricing-plan">料金プランの詳細</section>
<footer id="page-footer">サイト情報</footer>
<!-- 遷移元のリンク設定 -->
<nav>
<a href="#pricing-plan">料金セクションへ移動</a>
<a href="#page-footer">フッターへスクロール</a>
<a href="./other_page.html#pricing-plan">別ページ内の指定セクションへ遷移</a>
</nav>
※ # のみの指定または href を空文字にした場合、ブラウザはドキュメントの最上部へビューポートをリセットします。また、HTML5では <a> の name 属性によるアンカー設定は非推奨であり、現代的な実装ではすべての要素で id を使用するのが標準的です。
4. URIスキームによるデバイスアプリ起動
標準URIプロトコルスキームを利用することで、リンククリック時にOS組み込みアプリケーションを起動できます。これらのスキームは主にモバイル環境や関連ネイティブアプリがインストールされたデスクトップ環境で機能します。
<!-- 電話アプリを起動し番号を入力状態にする -->
<a href="tel:+81-90-1234-5678">サポートデスクへ連絡</a>
<!-- メールクライアントを起動(クエリパラメータで件名・本文をプリセット) -->
<a href="mailto:support@example.com?subject=お問い合わせ&body=内容を入力してください">問い合わせフォームを開く</a>
<!-- SMSアプリを起動 -->
<a href="sms:+81-90-9876-5432">テキストメッセージを送信</a>
※ クエリパラメータを含む mailto: スキームは & をHTMLエスケープ(&)して記述する必要があります。デスクトップ環境ではプロンプトが表示されないか、デフォルトアプリの関連付け設定に依存します。