【HTML】aタグでよく使う属性について

2020年11月6日 2024年4月1日

こんにちは！Kです！

前回、aタグの基本的な使い方について説明しましたが、今回はaタグでよく使う属性について書いていきます。

属性とは？という方もいると思うので簡単に説明すると、タグの要素に何かしらの設定（オプション）をつけるものと考えておけば大丈夫です。

前回、href属性に触れましたが、それもaタグで囲んだ文章をハイパーテキストに設定するためのものです。

それではhref属性以外でよく使う属性について説明します！

target属性

target属性は、リンク先のページを同じタブで開くか、新しいタブで開くかを設定する属性です。

<html>
    <a href="#" target="_blank"><p>新しいタブでページを開きます</p></a>
</html>

「target="_blank"」を入れるだけで、新しいタブでページを表示できます。

自身のサイトのページ以外の外部サイトのページを表示する場合などに使ったりします。

ちなみに同じタブのままページを開く場合は、「target="_self"」ですが、デフォルトの設定なので、わざわざ設定することは滅多にありません。

rel 属性は、現在のページとhref属性で指定しているページとの間で、どのような関係があるかを示す属性です。
ちなみにrelは、relation（関係）の略です。

SEO対策だけでなくセキュリティ対策としても、汎用的に利用される属性です。

「rel="キーワード"」と書きますが、指定するキーワードは多数あります。
また、キーワードを複数指定することもできます。
複数指定の場合は、キーワードとキーワードの間に半角スペースをつけます。

【例】

<html>
    <a href="#" rel="nofollow noopener noreferrer" target="_blank" >複数指定できます</a>
</html>

今回は一部紹介しますが、それ以外で使い方を知りたい方はググればすぐ出てくるので調べてみてください。

<html>
    <a href="#" rel="nofollow">ノーフォローと読みます</a>
</html>

nofollowは「リンク先のページを信頼しません」という意味になります。

通常のリンクは、ページの評価をリンク先ページに渡します。
（渡された評価は、リンク先のページのページランクを上げることに繋がります。）

しかしnofollowが指定されているリンク先には、評価を渡しません。
これはSEO（検索エンジン最適化）で重要になります。

例えば広告のリンクを貼る時などに使うイメージですかね。

<html>
    <a href="#" rel="noopener" target="_blank">ノーオープナーと読みます</a>
</html>

noopenerは、新しいタブでページを開いたときに、元のページを操作できないようにするために使います。
先ほどの「target="_blank"」を使って信頼できないリンクを別タブで開くときに使用します。

「target="_blank"」でnoopenerを使っていない場合、例えば、悪質なページと知らずリンクを貼っていたら、そのページを別タブで開いたときに、元のページがフィッシングサイトや変なサイトに強制的に遷移させられたりと悪用されます。

これを防ぐために使うのが「noopener」です。

そのため、別タブで外部サイトを開く設定（「target="_blank"」）をしているときは信頼できるページでない限りnoopenerを指定することをオススメします。

<html>
　　　　<a href="#" rel="noreferrer" target="_blank">ノーリファラーと読みます</a>
</html>

noreferrerも信頼できない外部サイトのリンクを貼る時のセキュリティ対策として使います。

リンク先を開くときに、新しいページに元のページのアドレスなどの情報を送信しないようにする設定です。

aタグでよく使う属性の紹介をしましたが、結構使うことが多いので覚えておきましょう！

一つのタグだけでもその使い方や属性の付与によってバリエーションがかなりあります。

まずは基本的なものから覚えて少しずつ使いこなしていけば十分です。

焦らず一つずつ学んでいきましょう！

他のタグの説明や一つのタグを掘り下げて説明したりと教えたいことはたくさんあるのでまた記事にしたいと思います！

ではまた！

Follow me!