HTMLのaタグとは?基本的な使い方やよく使われる属性を解説

今回はHTMLのaタグの使い方について解説をしていきます!

aタグは文章や画像などの指定した要素をハイパーリンクにすることができます。

この記事では、

・aタグとは
・aタグの基本的な使い方
・aタグでよく使われる属性

について解説をしていきます。

実用的なコードも交えて解説していくのでぜひ、ご覧ください!

aタグとは

aタグは、一般的には指定した部分の要素をハイパーリンクとして扱うことができるタグです。

ハイパーリンクと聞くとあまり聞き馴染みが無いかもしれませんが、クリックするとマウスポインタが変わってページが切り替わるようなリンクをイメージして貰えれば大丈夫です。

このaタグでは文章だけではなく、画像などの要素になるものをリンクにさせることができます。

aタグの基本的な使い方

それでは基本的なaタグの使い方について見ていきましょう。

こちらのコードをご覧ください。

<html>
    <p>ここはリンクになっていません。</p>
    <a href="指定したリンク先"><p>ここはリンクになっています。</p></a>
</html>

実行結果

pタグだけで囲った部分には特に何も起きていませんが、aタグで囲った部分は青い色に変わって下線が引かれて、リンクになっていることがわかるかと思います。

ここで大事なのがhref属性で、このhref属性で移動先のリンクを指定することでリンクを機能させることができます。

またWebサイトの開発中で、リンクにする部分をaタグで囲ったものの、リンク先がまだ出来ていない場合も考えられます。

そのようなときは、

<html>
    <p>ここはリンクになっていません。</p>
    <a href="#"><p>ここはリンクになっています。</p></a>
</html>

実行結果

のように、「href="#"」と表記させることで、クリックをしてもどこにも飛ばないように設定することが出来ます。

ただし、この表記は実際には、ページの最上部へのリンクという意味になっているので、この表記を使うことで、ページが見つからないというエラーを回避することが出来ています。

aタグの属性

ここでよく使われるaタグの属性についても見ていきましょう。

ここでは、

・target属性
・無効化(disable)する方法

について解説していきます。

target属性

target属性はリンク先をどのように表示させるか、指定することが出来ます。

こちらのコードをご覧ください。

<html>
    <a href="#" target="_blank"><p>ここはリンクになっています。</p></a>
</html>

実行結果

このブラウザで実行して実際にリンクをクリックすると、新しいタブが開くと思います。

これが「target="_blank"」の効果で、リンク先を新しいタブで開くということを指定しています。

ただしブラウザでポップアップブロック機能が有効になっている場合、新しいタブで開くことが出来ない場合もあるので気をつけましょう。

無効化(disable)する方法

aタグを一時的に停止してリンク先に飛べないようにしたい場合、HTMLを使ってきた方ならなんとなく「disabled」という属性をつければ無効化されるのでは?と思うかもしれません。

しかし、aタグにはdisabledという属性はありません。

そこで、CSSを使って特定のclassを無効化する方法について解説してきます。

こちらのコードをご覧ください。

<style>
    .link-disabled {
        pointer-events: none;
        text-decoration: none;
    }
</style>

<html>
    <a href="#" class="link-disabled" target="_self"><p>ここはリンクになっています。</p></a>
</html>

実行結果

ここでは、無効化させたいリンクに「class="link-disabled"」を追加しています。

さらにCSSでは、そのclassに対して「pointer-events: none;」で実際にリンクを無効化させて、「text-decoration: none;」でリンクに自動的に引かれる下線を無効にしました。

aタグを無効化したい場合はこのようにCSSを使いましょう。

まとめ

この記事ではaタグの基本的な解説からよく使われる属性について解説をしてきました。

aタグの使い方については分かっていただけたでしょうか?

基本的にはhref属性で移動先のリンクを指定しましょう。

また、リンクを無効化させるときはclassをつけてCSSを使いましょう

aタグについて忘れてしまった場合はまたぜひ、この記事をご覧ください!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

侍テック編集部

侍テック編集部