aタグの使い方
aタグの主な役割は、ユーザーがクリックしたときに指定した場所に移動させることです。リンク先のウェブページやドキュメント、画像、動画などへのアクセスを提供します。
<a>は HTML の要素（アンカー要素）で、href属性を用いて、別のウェブページ、ファイル、メールアドレス、同一ページ内の場所、または他の URL へのハイパーリンクを作成します。参考：mdn web docs
<a>の内容は、リンク先を示すものであるべきです。href属性が存在する場合、<a>要素にフォーカスがある状態で Enter キーを押すと起動します。
aタグの書き方と属性について
aタグは属性を使い分けることでさまざまな機能や動作を追加し、リンクの挙動や見た目を制御するのに役立ちます。
aタグの基本的な書き方
リンク先のURLは「href」属性に指定し、クリックしたときに表示されるテキストはaタグの間に入力します。例えば、Googleのウェブサイトへのリンクを作成する場合は以下のようになります。
<a href="https://www.google.com/">詳しくはこちら</a>aタグ-別画面を開く
aタグの移動先を別の画面で開くためには、target属性に"_blank"を指定します。先ほどのGoogleのリンクで以下に具体的なコードの例を示します。
<a href="https://www.google.com/" target="_blank">リンクを別画面で開く</a>href属性にリンク先のURLを指定し、target属性に_blankを指定しています。これにより、クリックしたときに指定したURLが新しいウィンドウやタブで開かれます。
aタグ-電話番号
aタグを使用してスマートフォンで電話をかけるためには、href属性にtel:を接頭辞として電話番号を指定します。
href属性にtel:0123456789という形式で電話番号を指定します。ユーザーがリンクをクリックすると、その電話番号に自動的に通話が開始されます。
なお、この機能は主にモバイルデバイスでサポートされており、デスクトップブラウザでは直接電話をかけることはできません。
<a href="tel:0123456789">電話をかける</a>しかし、パソコンでもaタグは反応してしまうのでcssでスマホのみに反応するよう設定することができます。
その他の属性
href属性
リンク先のURLを指定します。
aタグとして設定された文字列「アンカーテキスト」をクリックすると、hrefで指定したリンク先に遷移することができるようにします。
target
リンク先の表示方法を指定します。”_blank”は新しい元のWebページを表示しているタブを残したまま、別タブでページを開くことができます。
download
リンク先のファイルをダウンロードする際のファイル名を指定します。
rel
リンク先との関係性を示すための属性です。例えば、”nofollow”は検索エンジンのクローラーにリンクをたどらせないことを示します。
title
リンクにマウスオーバーしたときに表示されるテキストを指定します。
id
リンクに一意の識別子を付けるための属性です。
class
リンクにクラス名を付けるための属性です。
style
リンクのスタイルを直接指定するための属性です。
tabindex
キーボード操作におけるリンクの順序を指定します。
これらの属性を使用することで、aタグのリンクの動作やスタイルを制御することができます。
aタグのまとめ
- WEBサイトでリンクを作成するときに使う
- href属性にURLを指定する
- 電話をかけれるようにするにはtel属性を使う
aタグはリンクを作成するために使用され、クリックしたときに指定した場所に移動します。リンク先のURLを「href」属性で指定し、表示されるテキストをaタグの間に入力します。aタグはウェブページやドキュメントへのアクセスを提供し、他のウェブサイトとの連携やナビゲーションを可能にします。