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

50種類以上のIT教材を無料で使える!
0円から学習できるオンラインITスクール「侍テラコヤ」
→さっそく登録する

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

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

この記事では、

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

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

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

aタグとは

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

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

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


【なかなかエラーが解決できない…そんな悩みを解決します!】

登録無料で始められるプログラミングスクール「侍テラコヤ」

・回答率100%のQ&A掲示板でエラーを解決!
現役エンジニアとのオンライン相談で悩みを解決!
・50種類以上の教材で複数言語を習得!

侍テラコヤについて詳しく見る

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タグについて忘れてしまった場合はまたぜひ、この記事をご覧ください!

プログラミング学習中、
誰かへ相談したいことはありませんか?

SAMURAI TERAKOYA

プログラミングはエラーの連続。作業を進めるなかで誰かに教えてほしい場面は多いですよね。

そんな悩みを解決できるのが、侍テラコヤです。登録無料で始められて、現役エンジニアとオンラインで相談できるほか、回答率100%のQA掲示版でプログラミングに関する悩みを解決します!

気になる方はぜひ詳細をご覧ください。

→侍テラコヤの詳細をみる

Writer

侍テック編集部

株式会社SAMURAI

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。侍テック編集部では技術系コンテンツを中心に有用な情報を発信していきます。

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI TERAKOYA

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら
Close