HTML5

2021.04.27

【HTM5】aタグの基本的な使い方

今回は、HTML、Webサイトのコーディングにおいてかなり重要なaタグについて解説いたします!

aタグとは?

aタグとは、リンクを設定することができるタグになります。

リンクとは「繋がれている」という意味であり、まさにWebページとWebページを繋ぐことができます。

ちなみに「a」は繋ぐという意味を持つanchorの略であり、aタグで繋いだリンクのことをアンカーリンクと呼んだりします。

同じWebサイト内のページのリンクを設置することはもちろん、PDFや画像ファイルなどもリンクさせることができます。

Webの由来とは、たくさんのWebサイトがクモの巣のように繋がれていることからついた名前ですが、繋ぐ役割はまさにこのaタグが担っているのです!

aタグの基本的な使い方

それでは、aタグの基本的な使い方を見てみましょう。

See the Pen aタグについて by spiqa design (@spiqa_design) on CodePen.

aタグで囲っているテキストは、色が変わってクリックすることができるのがわかると思います。

色はブラウザの初期値で青色が適用されますが、CSSで変更可能です。

aタグの属性

代表的なaタグの属性についてご紹介します。

href

aタグの最も使われる属性です。

aタグで囲むだけではリンクをつなぎこむことはできません。リンク先を指定するために、href属性を書く必要があります。

例のようにリンク先を指定すると、aタグをクリックした時に指定したページに移動します。

▼例

<a href="./index.html">トップページへ</a>

また、href属性には電話番号やメールアドレスを指定することもできます。

▼例

<a href="tel:03-0000-0000">03-0000-0000</a>
<a href="mailto:example@example.com">example@example.com</a>

hrefの中にtel:~と入力すると電話アプリが立ち上がります。

同じようにmailto:~と入力するとメールアプリが立ち上がります。

クリック・タップしたらアプリが立ち上がるなんて難しい想像をしてしまいますが、とっても簡単ですね!

target

リンク先のページの表示方法を指定する属性です。

デフォルトではtarget="_self"で、同じタブ内で開くという意味になります。こちらはデフォルト値なので、わざわざ記述することはありません。

最も使われる指定はリンク先ページをブラウザの新規タグで開くtarget="_blank"です。

rel

設置するWebページとリンク先ページの関係を記述する属性です。

実は、上記でご紹介したtarget="_blank"は、セキュリティ上問題があります。

以下のように、rel属性に値を入力しておくことでセキュリティ対策することができるため、新規タブで表示させる際は合わせて記述しておくことをおすすめいたします。

▼新規タブで開く際に合わせて書いておくことをおすすめ

<a href="外部サイトのURL" target="_blank" rel="noopener noreferrer">外部サイト</a>

▼参考サイト
https://wwg.co.jp/blog/3807

まとめ

その他にも属性がありますが基本は上記3つ覚えておけば問題ないでしょう。

HTMLの基礎であり、コーディングで必ず使うタグなのでしっかり覚えておきましょう!

こちらの記事もおすすめ

0

関連記事

  • 2021.04.28

    【HTML5】HTML5からのsmallタグの使い方

    HTML5

  • 2021.04.20

    【HTML5】見出しタグの違いと使い方とは?

    HTML5

  • 2021.04.13

    【HTML5】strongタグとWordPressテーマ作成時の注意事項

    HTML5

おすすめ記事

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

  • コーディングで画像を好きな形に切り抜く方法

    2021.02.10

    【CSS】コーディングで画像を好きな形に切り抜く方法【IEにも対応】

    CSS

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!