T-file

一歩踏み出す勇気を全力で応援するブログ

aタグのtitle属性の使い方【初心者向け】

こんにちは、webエンジニア歴4年のtakaです。

この記事では、aタグのtitle属性について記載していきます。
HTML・CSSを勉強したての方用の記事となっています。

aタグのtitle属性とは?

aタグの「a」はanchor(アンカー:錨【いかり】)の略で、このようにリンク先に遷移できるタグです。

<a href="https://www.google.com/">Googleに飛ぶ</a>

タグには属性というものを設定できます。

aタグにhref属性を設定することで、href属性に設定したURLに遷移することができます。
先ほどの例では、「https://www.google.com/」に遷移するように設定しています。

リンク先のタイトルや説明などの情報をaタグに持たせるために、title属性を設定することができます。
使い方はこのような感じです。

<a href="https://www.google.com/" title="Google">Googleに飛ぶ</a>

tips!

title属性はaタグ専用の属性ではなく、グローバル属性なのでHTML5の全ての要素に指定することができます。

aタグにtitle属性を設定することで、マウスカーソルを重ねたときに属性値が表示されるようになります。
吹き出しが出る

コード

<a href="https://t-file.blog/profile/" title="プロフィール詳細">プロフィール詳細 ></a>

出力
プロフィール詳細 >

SEOへの効果は?

やっていないないより、やったほうがいいだろうという温度感ですかね。
どのくらい効果があるかわかりませんが、ユーザーにとってより便利になる=SEOにも効果があるはずなので、試してみてください。