Compass note

未踏の地へ踏み出すコンパス的エンジニアノート

【使えている?】a href の安全なオプションをセットするのを忘れずに。

* 本ページはプロモーションが含まれています

a hrefはHTMLのアンカータグ(<a>)の属性で、他のページやサイトへのリンクを作成する際に使用します。以下に基本的な使い方とオプションを示します。

基本的な使い方:

<a href="リンク先のURL">リンクテキスト</a>

このコードは、"リンクテキスト"をクリックすると"リンク先のURL"に移動します¹。

オプション:

  1. target属性: リンクを開く場所を指定します¹²。

    • _self: デフォルトの設定で、現在のウィンドウまたはタブでリンクを開きます³。
    • _blank: 新しいウィンドウまたはタブでリンクを開きます²³。
    • _parent: リンクを親フレームで開きます³。
    • _top: リンクを最上位のフレームで開きます³。
  2. download属性: リンク先のリソースをダウンロードします¹。

  3. 相対パスと絶対パス: リンク先の指定方法には相対パスと絶対パスの2種類があります¹。

    • 相対パス: 現在の位置から見て遷移先がどこにあるかを示します¹。
    • 絶対パス: 現在の位置に関係なく一番頭からリンクまでのパスを示します¹。
  4. id属性: ページ内の特定位置(アンカーポイント)を指定することができます²。

以上が基本的な使い方とオプションです。詳細な情報は参考リンクをご覧ください。

target="_blank" には脆弱性が含まれるとされているため、rel="noopener noreferrer" オプションも付与します。

例えば、このページを別ウィンドウで立ち上げるには以下のような記述が適しています。

<a href="https://compass-note.hatenablog.com/ahref-safety-option/" target="_blank" rel="noopener noreferrer" >【使えている?】a href の安全なオプションをセットするのを忘れずに。</a>

↓実際のリンク

【使えている?】a href の安全なオプションをセットするのを忘れずに。

参考

  1. 【HTML入門】href属性の使い方やオプションを理解しよう! | 侍 .... https://www.sejuku.net/blog/77158.
  2. HTMLアンカーリンク(a hrefタグ)とは~使い方と別ページ .... https://seolaboratory.jp/44165/.
  3. HTMLでhref属性の使い方を現役エンジニアが解説【初心者向け .... https://bing.com/search?q=a+href+%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9+%e3%82%aa%e3%83%97%e3%82%b7%e3%83%a7%e3%83%b3.
  4. HTMLのhrefの使い方 #Rails - Qiita. https://qiita.com/ayamo/items/c15c73e5845dcc72cafa.
  5. リンクのhtmlタグ - ホームページの作り方. https://www.homepage-tukurikata.com/html/a-href.html.