【初心者向け】HTMLのaタグをご紹介

こんにちは！Global Web Designの福田です。Web制作になくてはならない「aタグ」。
「aタグ」はHTMLの中でも使用頻度がかなり高いタグです。
電話番号やメーラーにつなげたりさまざま機能があるのをご存じですか？

今回はそんな「aタグ」についてご紹介します。

基本的な書き方

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

aタグの基本的な書き方は、「href」の中に移動先のURLを入れて、アンカーテキストがクリックされると「href」に書いたURLに移動します。

そんな「href」の中にはさまざまな書き方があります。

絶対パスと相対パス

まず絶対パスで書いてみます。

<a href="https://www.google.com/?hl=ja">google</a>

google

書くとアンカーテキストの部分が表示されました。
上のgoogleを押すとgoogleページに移動します。

相対パスで書くとこのようになります。

<a href="../company/index.html">会社概要</a>

パスの詳しい説明は（Webディレクトリとは？ディレクトリについて解説！）こちら

tel:

「href」の中に「tel:」を入れて番号を入力すると入力した番号に電話をかけることができます。

<p><a href="tel:0000000000">000-0000-0000</a></p>

000-0000-0000

番号をクリックすると発信するボタンが表示されます。

mailto:

「href」の中に「mailto:」を入れてメールアドレスを入力するとメールのアプリケーションが起動します。

<p><a href="mailto:test@test.com">メールが開く</a></p>

メールが開く

メールのアプリケーションが開いて宛先に「 test@test.com」が入力されています。

aタグの属性

aタグにはグローバル属性があります。

download

リンクされたURLに移動するのではなく、「download=”ファイル名”」ファイル名をダウンロードします。

target=”_self”

リンク先のURLを表示する場所を(タブやウインドウ)で指定します。
「target=”_self”」は初期値になり現在開いてるページにURLが読み込まれます。

target=”_blank”

新しいタブにURLが読み込まれます。

<p><a href="https://www.google.com/?hl=ja" target="_blank">google</a></p>

google

クリックすると新しいタブが開いてgoogleが読み込まれます。外部リンクなど同じWebページでないときによく使われます。

まとめ

今回はaタグについて書いてみました。aタグがあるおかげで、各ページをリンクして見ることができます。
「tel:」「mailto:」などを上手く使ってWeb制作にいかしてくださいね！

この記事を書いた人

福田 弦

2020年にGlobal Web Desingを立ち上げ。得意分野は、コーディング、CMS構築、ディレクション。現在はブログ、マーケティングなどを勉強中。趣味はドラム。