まぬねこの足跡。。。

備忘録＋たのしさ＋ひっそりと

トップ > HTML > <a>タグ：アンカー要素、プレースホルダ（場所取り）

<a>タグ：アンカー要素、プレースホルダ（場所取り）

HTML

概要

ハイパーリンクの作成

別のウェブページ、ファイル、メールアドレス、同一ページ内の場所、または他の URL へのハイパーリンクを作成

＜a href="https://www.xxxx.xxx.xx"(ハイパーリンクが指す先)＞XXXXXX(ハイパーリンク先名)＜/a＞

※絶対・相対URL共に指定OK。

ちょこっとメモ

絶対URL

・https://www.xxxx.com

・https(http)から全てを指定する記載方法

URL相対URL

・//xxxxxxx.com

・先のURLをディレクトリの位置関係になぞってファイルの位置だけを指定する記載方法

ちょこっとメモ

URL

・Uniform Resource Locator（ユニフォームリソースロケータ）

・Webサイトやファイルの位置や情報を示すもの

プレースホルダ（場所取り）・・・href属性を指定しない。

リンク先が準備中の時とかの場所取り

＜a＞プレースホルダ＜/a＞

ちょこっとメモ

プレースホルダ

リンクは機能させたくないが、その内容だけは表示しておきたい内容

属性の解説

href属性：リンク先のURLを指定

＜a href="https://www.xxxx.xxx.xx"＞(ハイパーリンクが指す先)＜/a＞

hreflang属性：リンク先ドキュメントの言語コードを指定

※href属性と一緒に使用する。

＜a href="https://www.xxxx.xxx.xx" hreflang="en-US"(言語コード)＞海外のサイトへ＜/a＞

type属性：リンク先のMIMEタイプを指定

※href属性と一緒に使用する。

＜a href="https://www.www.xxxx.xxx.xx" type="text/html"(MIMEタイプ)＞リンクテキスト＜/a＞

ちょこっとメモ

MIMEタイプ（IANA メディアタイプ）

・Multipurpose Internet Mail Extensions(マルチパーパス インターネット メッセージ エクステンション)略してMIME(マイム)タイプ

・文書、ファイル、またはバイト列の性質や形式

代表的なMIMEタイプ
text/htmlHTML image/pngPNGvideo/mpegMPEG
text/xmlXML image/jpegJPEGvideo/mp4MP4
text/cssスタイルシート（CSS）image/gifGIFapplication/pdfPDF
text/plainテキストaudio/mpegMP3application/x-shockwave-flashFlash

※詳しくはよくあるMIMEタイプへ

rel属性：リンク先ドキュメントとの関係を指定

※href属性と一緒に使用する。

＜a href="https://www.xxxx.xxx.xx" rel="license"(リンク種別)＞著作権情報＜/a＞

※半角スペース区切りで複数指定可能

リンク種別説明
alternate代替ドキュメントへのリンク
author著者へのリンク
bookmarkブックマークのためのパーマリンク（固定リンク）
external外部へのハイパーリンク
helpヘルプ・ドキュメントへのリンク
license著作権情報へのリンク
me (en-US)現在のリソースがリンク先で表現されていることを示す。 RelMeAuth のような分散型認証で使用。
next次のドキュメントへのリンク
nofollowリンク先ドキュメントをフォローしない。
noopenerリンク先に現ドキュメントへのアクセスを非許可。
noreferrerリンク先へHTTPリファラを送らない。
prev前のドキュメントへのリンク
search現在のドキュメントとその関連ページを検索するために使用可能なリソースへのリンク
tagタグ

target属性

※href属性と一緒に使用する。

＜a href="https://www.xxxx.xxx.xx" target="_blank"(リンク先の表示方法)＞リンクテキスト＜/a＞

リンク先の表示方法
表示方法 内容
_blank新規ウィンドウに開く。
_self現在のウィンドウ、現在のフレームに開く。
_parent親ウィンドウ、親フレームに開く。
_parentウィンドウ全体に開く。フレームは解除する。
ウィンドウ名指定したウィンドウに開く。
フレーム名指定したフレームに開く。

download属性

※href属性と一緒に使用する。

＜a href="https://www.xxxx.xxx.xx" download="dlfile"(ダウンロードファイル名)＞DLリンク＜/a＞

※省略OK

ping属性：リンクをクリック時、ping（POSTリクエスト）を送信

※href属性と一緒に使用する。

＜a href="https://www.xxxx.xxx.xx" ping="log.cgi"(pingの送信先
（cgiプログラム名）)＞CMテキスト＜/a＞

※ping送信先：ping（POSTリクエスト）受信して処理するプログラム

※別途、受信と処理をする（cgi）プログラムが必要

※半角スペース区切りで複数指定可能

ちょこっとメモ

.cgi拡張子：Common Gateway Interface

Webブラウザからの要求に応じてWebサーバー上で実行されるプログラム

referrerpolicy属性：リンク先にアクセスする際のリファラーポリシーを指定

※href属性と一緒に使用する。

＜a href="https://www.xxxx.xxx.xx" referrerpolicy="no-referrer"(リファラポリシー)＞リンクテキスト＜/a＞

ちょこっとメモ

リファラ：HTTPリファラ

・HTTPヘッダ

・Webページまたはリソースから見て、リンクしているWebページやリソースのアドレスを指す。

・ファラを参照することで、どこからそのページに要求が来たのかを知ることができる。

リファラポリシー

・referer送信の挙動指示

リファラポリシーの値
種類 内容
no-referrerリファラーを送信しない
no-referrer-when-downgradehttpsから httpへ送信しない
以外全リファラー送信
same-origin同一のオリジン間全リファラー送信
異なるオリジン間リファラー送信しない
originリファラーのオリジン情報のみを送信
strict-originhttpsから httpへ送信しない
以外リファラーのオリジン情報のみを送信
origin-when-cross-origin同一のオリジン間リファラー全体を送信
異なるオリジン間リファラーのオリジン情報のみを送信
strict-origin-when-cross-originhttps から http へ送信しない（既定値）
同一のオリジン間リファラー全体を送信
異なるオリジン間リファラーのオリジン情報のみを送信
unsafe-urlリファラー全体を送信する（安全ではない）

使い方

ハイパーリンクの作成

絶対リンク

書き方
<a href="https://www.oyatuippai.com">おやついっぱい</a>
表示イメージ
おやついっぱい

相対リンク

書き方
<a href="//oyatuippai.com">おやついっぱい</a>
表示イメージ
おやついっぱい

※base:タグ：相対リングの基準を設定できる。

ページ内リンク

書き方

リンク先

<h3 id="fullOfCake">ケーキいっぱい</h3>・・・ID：「fullOfCake」を指定

リンク元

<a href="#fullOfCake">「ケーキいっぱい」へ行く</a>
表示イメージ
「ケーキいっぱい」へ行く

ちょこっとメモ

ID名付け

・同ページ内に重複しないＩＤ名

・大文字小文字区別なしの半角英数字、ハイフン(「ー」)、アンダーバー(「＿」)、コロン(「：」)、ピリオド(「．」)のみ

アルファベットではじめる。

別ページ特定箇所へのリンク

書き方

リンク先：textA.html

<h3 id="#fullOfCookie">クッキーいっぱい</h3>・・・ID：「fullOfCookie」を指定

リンク元：textB.html

<a href="textA.html#fullOfCookie">クッキーいっぱい</a>
表示イメージ
クッキーいっぱい・・・「htmlファイル名＃ID名」を指定

メールアドレスへのリンク

書き方
<a href="mailto:AAAAA@XXXX.com">メールはこちらへ</a>・・・「maito:メールアドレス」を指定

※だと文書内に直接の記載は迷惑メールの元。なのでアットマーク(＠)を文字参照(「&#64;」)とするとよい。


<a href="mailto:AAAAA&#64;XXXX.com">メールはこちらへ</a>・・・「maito:メールアドレス」を指定

【おまけ】メールに予め件名、本文など挿入しておける

<a href="mailto:AAAAA&#64;XXXX.com?subject=きょうの夕飯&amp;body=ご記入ください">
　　大盛チキンカレーです。</a>・・・「maito:メールアドレス?subject=件名&amp;body=本文内容」を指定
表示イメージ
メールはこちらへ

【おまけ】

大盛チキンカレーです。

電話番号へのリンク

書き方
<a href="tel:000-1234-5678">000-1234-5678</a>・・・国内電話
<a href="tel:+81-90-0000-0000">国際電話：090-0000-0000</a>・・・日本：＋81（先頭の「０」をなくすこと）
表示イメージ
000-1234-5678
国際電話：090-0000-0000

画像リンク

書き方
<a href="sample2.html"><img src="/img/眠い猫.jpg" alt="眠い猫の画像" width="160" height="160"></a>
表示イメージ

※別のまぬるサイトへリンクしてます。

眠い猫の画像

スクリプトへのリンク

書き方
<a href="javascript:alert('警告！')">JSで警告！</a> 
　　・・・「javascript:関数（アラート関数）」でJSの関数を実行できる。
<a href="javascript:voide(0)">遷移しないリンク</a>
　　・・・「javascript:voide(0)」で遷移しないリンク
表示イメージ
JSで警告！
遷移しないリンク

語源

aタグ：アンカー要素、プレースホルダ（場所取り）

Anchor

読み方：アンカー

意　味：船を止めるいかり

href属性：リンク先のURLを指定

hyper reference

読み方：ハイパー　リファレンス

意　味：ハイパーリファレンス

hreflang属性：リンク先ドキュメントの言語コードを指定

hyper reference language

読み方：ハイパー　リファレンス　ラングウィッジ

意　味：ハイパーリファレンス言語

rel属性：リンク先ドキュメントとの関係を指定

relationship

読み方：リレーションシップ

意　味：関係、つながり

ping属性：リンクをクリック時、ping（POSTリクエスト）を送信

ping pong

読み方：ピング　ポング

意　味：おもにネットワークの疎通を確認するために使用されるコマンド

　　　　pingコマンド・・・パケット送信

　　　　pongコマンド・・・pingに対するパケット返信/p>

参考

【MDNMDN Web Docs】<a>タグ：アンカー要素、プレースホルダ（場所取り）