公開日時:2022.04.28
最終更新日:2022/05/06
【初心者向け】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ページに移動します。
相対パスで書くとこのようになります。
<a href="../company/index.html">会社概要</a>
パスの詳しい説明は(Webディレクトリとは?ディレクトリについて解説!)こちら
tel:
「href」の中に「tel:」を入れて番号を入力すると入力した番号に電話をかけることができます。
<p><a href="tel:0000000000">000-0000-0000</a></p>
番号をクリックすると発信するボタンが表示されます。
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が読み込まれます。外部リンクなど同じWebページでないときによく使われます。
まとめ
今回はaタグについて書いてみました。aタグがあるおかげで、各ページをリンクして見ることができます。
「tel:」「mailto:」などを上手く使ってWeb制作にいかしてくださいね!