aタグとは

aタグの「a」とは「anchor」の省略形で、HTMLにおいて他のページや他の項目に移動（ジャンプ）する機能を持つタグです。

初期設定はインライン要素として設定されているため、文章の途中に組み込むことが可能です。

aタグを使用する場合は必ず開始タグにhref属性を追加する必要があります。

基本的な書き方

<a href="">テキスト/画像</a>

href属性とは

href属性は「hypertext reference」の省略形で「ハイパーテキストの参照」という意味です。

href属性に入力する値には、現在作成しているファイルからリンクさせたいページまでのパスを指定する「相対パス」と、URLを指定する「絶対パス」があります。

別タブで開く方法

<a href="" target="_blank">テキスト/画像</a>

target属性の値に「_blank」を設定すると新しくタブを開いてリンク先を表示することができます。

全てのリンクに設定してしまうと、リンクをクリックするたびにタブが増えてしまい、端末のメモリを消費してしまうため、外部サイトへのリンクや広告のリンクなどにだけ設置するようにしましょう。

注意点

<a href="" target="_blank" rel="noopener noreferrer">テキスト/画像</a>

target属性の値に「_blank」を設定すると、外部サイトから悪意のある攻撃をされたり、外部サイトで負荷の高いJavaScriptを使用している場合、自分の見ているサイトのパフォーマンスが低下するといった危険性があります。

そのため、target属性の値に「_blank」を設定する場合は、rel属性に「noopener」「noreferrer」を設定するのを推奨しています。

WordPress5.1以降は自動的に「noopener noreferrer」が設定され、Chrome88以降、FireFox79以降、Safari12.1以降は自動的に「noopener」が設定されるようになりました。しかし、全てのユーザーが上記のブラウザを使用しているとは限らないため、コーディングの際に対策をしましょう。

リンク先ファイルのダウンロード

<a href="" download>ファイル（Word、Excel、PDFなど）</a>

ユーザーにファイルをダウンロードさせたい場合はdownload属性を追加することによってダウンロードさせることが可能です。

<a href="" download="日本語のファイル名">（Word、Excel、PDFなど）</a>

また、download属性にデータのファイル名を入力することにより、ダウンロードした際のファイル名を決めることが可能です。