【HTM5】aタグの基本的な使い方

今回は、HTML、Webサイトのコーディングにおいてかなり重要なaタグについて解説いたします！

aタグとは？

aタグとは、リンクを設定することができるタグになります。

リンクとは「繋がれている」という意味であり、まさにWebページとWebページを繋ぐことができます。

ちなみに「a」は繋ぐという意味を持つanchorの略であり、aタグで繋いだリンクのことをアンカーリンクと呼んだりします。

同じWebサイト内のページのリンクを設置することはもちろん、PDFや画像ファイルなどもリンクさせることができます。

Webの由来とは、たくさんのWebサイトがクモの巣のように繋がれていることからついた名前ですが、繋ぐ役割はまさにこのaタグが担っているのです！

aタグの基本的な使い方

それでは、aタグの基本的な使い方を見てみましょう。

See the Pen aタグについて by spiqa design (@spiqa_design) on CodePen.

aタグで囲っているテキストは、色が変わってクリックすることができるのがわかると思います。

色はブラウザの初期値で青色が適用されますが、CSSで変更可能です。

aタグの属性

代表的なaタグの属性についてご紹介します。

href

aタグの最も使われる属性です。

aタグで囲むだけではリンクをつなぎこむことはできません。リンク先を指定するために、href属性を書く必要があります。

例のようにリンク先を指定すると、aタグをクリックした時に指定したページに移動します。

例

<a href="./index.html">トップページへ</a>

idを指定することで、該当idが指定されているところまで移動させる「ページ内リンク」を実装することもできます。

<a href="#section01">トップページへ</a>

また、href属性には電話番号やメールアドレスを指定することもできます。

例

<a href="tel:03-0000-0000">03-0000-0000</a>
<a href="mailto:example@example.com">example@example.com</a>

hrefの中にtel:～と入力すると電話アプリが立ち上がります。

同じようにmailto:～と入力するとメールアプリが立ち上がります。

クリック・タップしたらアプリが立ち上がるなんて難しい想像をしてしまいますが、とっても簡単ですね！

mailtoの具体的な使い方はこちら！

[card url=”https://note.spiqa.design/wp/mailto/”]

target

リンク先のページの表示方法を指定する属性です。

デフォルトではtarget="_self"で、同じタブ内で開くという意味になります。こちらはデフォルト値なので、わざわざ記述することはありません。

最も使われる指定はリンク先ページをブラウザの新規タグで開くtarget="_blank"です。

rel

設置するWebページとリンク先ページの関係を記述する属性です。

実は、上記でご紹介したtarget="_blank"は、セキュリティ上問題があります。

以下のように、rel属性に値を入力しておくことでセキュリティ対策することができるため、新規タブで表示させる際は合わせて記述しておくことをおすすめします。

▼新規タブで開く際に合わせて書いておくことをおすすめ

<a href="外部サイトのURL" target="_blank" rel="noopener noreferrer">外部サイト</a>

▼参考サイト
https://wwg.co.jp/blog/3807

download

リンク先がダウンロードファイルであることを示す属性です。リンクをクリックしたらダウンロードされます。

値はダウンロードする際のデフォルトのファイル名をテキストで入力します。

<a href="URL" download="ファイル名.pdf">リンクテキスト</a>

まとめ

その他にも属性がありますが基本は上記4つ覚えておけば問題ないでしょう。

HTMLの基礎であり、コーディングで必ず使うタグなのでしっかり覚えておきましょう！

こちらの記事もおすすめ

[card url=”https://note.spiqa.design/wp/list-style-type/”]