HTMLのエレメントの一つである＜a＞要素について説明します。
<a>要素： URL へのハイパーリンクを示す
- アンカー(Anchor)要素
- 開始タグ・終了タグが必須 （例）<a> ~ </a>
- href属性を使って同じ又は他のWebページやURL 、ファイル、メールアドレスなどリンクをする際に使用 （例）<a 属性=”属性値”> ~ </a>
<a>要素と一緒に使用可能な属性
が使える
ハイパーリンク先の位置・URLを指定します。（例）<a href="URL">リンク</a>
リンク先の種類やリンク先との関係を表します。
relの属性値
- alternate ： 異なるURLで同じHTML文書がある時、両URLが同じHTML文書を使用していることを指定する（例えば異なるメディア版）
- author ： HTML文書の著者情報を示す
- bookmark ： 特定文書にハイパーリンクを指定する
- external ： 外部サイトにリンクされていることを表す
- help ： ヘルプへのリンクであることを示す
- license ： ライセンス情報に載っている文書へのハイパーリンクであることを示す
- next ：「現在の文書」の「次の文書」へのリンクを指定する
- nofollow ： リンク先の文書がリンク元と関係ないことを示す
- noopener ： 新しいブラウザウィンドウでWindow.openerプロパティを設定しないことを示す
- noreferrer ： 別のURLに移動する際にリンク元のURLをリファラー(Referer)として送信しないように指定する
- opener ： targetのリンクにnoopenerの動作が発生しないようにする
- prev ： 「現在の文書」の「前の文書」へのリンクを指定する
- search ： 検索するための文書を参照することを表す
- tag ： タグのページへのリンクであることを示す
リンク先の言語を示します。
リンク先(URL)の MIME タイプ(メディアタイプ)を指定します。 (例)「type=タイプ/サブタイプ」 リンク先がHTMLであれば「type=”text/html”」 リンク先がCSSであれば「type=”text/css”」
リンク先ファイルをダウンロードできるようにします。 (例)<a href="" download="">～</a>
リンク先を開く際にWebブラウザ上の表示場所を指定します。
targetの属性値
- _self ： 現在のブラウザウィンドウに表示 (既定値)。特にtargetでの指定がなければ、現在のウィンドウに表示
- _parent ： 現在のブラウザウィンドウの親ウィンドウに表示。親ウィンドウがなければ「_self」と同じく現在のウィンドウに表示
- _blank ： ブラウザの新しいタブ又は新しいウィンドウに表示
- _top ： 現在のブラウザウィンドウの最上階層ウィンドウに表示。親ウィンドウがなければ「_self」と同じく現在のウィンドウに表示
<a>要素の使用例
リンク先の種類がヘルプであることを示します。
<a href="tabi.html" rel="help">旅行ヘルプ</a>リンク先の言語が日本Google語(ja)であることを表す
<a href="https://sollamu.com" hreflang="ja">SAKAブログ</a>jpgファイルがHTML文書と同じ位置にあることを表す【相対パス】
<a href="nature.jpg" download="" alt="自然のイメージ">自然</a>jpgファイルがHTML文書と同じディレクトリ(directory)にあるということを表す(上記と同じ)。【相対パス】
<a href="./nature.jpg" download="" alt="自然のイメージ">自然</a>jpgファイルがHTML文書とHTMLの位置より１つ上のディレクトリにあることを示す 【相対パス】
<a href="/nature.jpg" download="" alt="自然のイメージ">自然</a>jpgファイルがHTML文書と関係なく位置(階層)が特定できる 【絶対パス】
<a href="https://sollamu.com/nature.jpg" download="" alt="自然のイメージ">自然</a>相対パス・絶対パス
- 相対パス：パスが記述されている「ファイル」の位置(階層)を基準として指定された「リンク先」の位置を特定する
- 絶対パス：「リンク先」の位置をURLで指定する。HTMLファイルの位置(階層)と関係なく独立で位置が特定される
