A040 リンクの表示

<a>タグ

リンクを表示させるためには<a>タグを用います。

<a>タグはアンカー（Anchor）の略で、出発点、または到達点を示す要素です。href属性が指定されたa要素は出発点として、name属性やid属性が指定されたa要素は到達点として機能します。

またファイルの特定場所を到達点とする場合には、name属性やid属性を使用して、その場所に名前をつけて到達点指定を行います。

<a>タグの使い方

href属性

<a href="https://www.erkennt.co.jp/">株式会社エアケント</a>

上記では、 “株式会社エアケント” という文字列が表示され、リンク先が ” https://www.erkennt.co.jp/” ページになります。

target属性

target属性とはリンク先のドキュメントをどこに表示するかを指定する際に用います。

<a href="https://www.erkennt.co.jp/" target="_blank">株式会社エアケント</a>

target=”_blank”を用いると、現在いるページから新しいページに遷移し新しいタブでリンク先のページを開くことができます。

rel属性

rel属性とはリンク先の URL との関係を示す際に用います。

<a href="https://www.erkennt.co.jp/" target="_blank" rel="noreferrer">株式会社エアケント</a>

noreferrerを用いることで、参照先に対して参照元のリンクを渡さないようにすることができます。

イメージが湧きにくいかと思いますので外部リンク(別のサイト)へのリンクを表示させる際に用いるものと今は覚えておきましょう。

例題

以下の中で新しいタブで開く際に用いる属性と指定はどれか

1. target=”_new”
2. rel=”noopener”
3. target=”_blank”
4. rel=”noreferrer”

エンジニアからのアドバイス

内部リンク(サイト内の別のページ)へのリンクを指定する際には相対パスを用いて表示させることが一般的です。

<a href="/top.html">TOPへ</a>

今表示しているページとリンク先として表示させたいページのフォルダ構成を確認してパスを指定しましょう。