【初心者でもわかる】aタグによく使う属性たち一覧

#どうも7noteです。aタグによく使う・使える属性をまとめました

「aタグ<a hrf=""></a>」 → リンクを設置するための要素

href属性(リンク先の指定)

<a href="https://hogehoge.com"></a>

aタグの属性の中で主役となる**「href属性」**ですね。
これがなくてはaタグの属性の話は始まりません。

初心者のうちはimgタグにつかう属性のsrc属性と混合してしまう方もいるので間違えないように注意しましょう。

またhrefの値に#を使うことで、指定したID名の要素の位置までスクロールさせることができます。

例）id名hogeまでスクロールする

<a href="#hoge"></a>

target属性(リンク先の表示方法を指定)

<a href="https://hogehoge.com" target="_blank"></a>

hrefと合わせて次に使うことが多いのがこの**「target属性」**。
特にtarget="_blank"として使うことが多いです。

target="_blank"は別ウィンドウで開く表示方法になります。
_blank以外にも、_selfや_parentなどがあります。

rel属性(リンク先との関係性を明示)

<a href="https://hogehoge.com" rel="nofollow"></a>

rel属性は指定したリンク先との関係性を表すことができます。
その中でも使う頻度が高いのが、rel="nofollow"。

これは「リンク先にはこのホームページのSEOの評価を渡さないよ」という意味になります。
SEO（検索エンジン最適化）において、ページの評価はとても重要です。
googleで検索上位に入りたいサイトなどであれば、自分のサイト以外へのリンクにはrel="nofollow"を入れておいたほうが良いとされています。

※あくまでSEO対策の1つとして言われていることのため、これだけで検索順位が上がる事は保証できませんのであしからず。

他にもrelには前後のページであることを示すnext、prevなどがあります。

詳しくは以下の記事が見やすかったのでご覧ください。
https://reference.hyper-text.org/html5/attribute/rel/

他の属性

他にも、nameやcharset、tabindexなどいくつかありますが、通常のWEBページを作る上では上の3つがあればだいたいなんとかなるかと思います。

もっと知りたい方は以下より。
https://www.tagindex.com/html_tag/elements/a.html

おまけ(aタグをクリックしたときにjavascriptを起動させる)

aタグをクリックした際にjavasriptを起動させるためにonClick=""を指定する方法がありますが、それよりは以下の方法がオススメです。

<a href="javascript:OnLinkClick();"></a>

まとめ

aタグといっても、単にリンクを設置するだけではなく、どうリンク先を開くのか、そのリンク先との関係性はどうなのかを確認しながら設置する必要があります。

ただ教本にはhref以外の属性についてはあまり触れていなかったり、webで属性を調べると逆に情報が多すぎて混乱してしまうので、実践で実用的なものを紹介しました。

inputなどのフォーム系のタグや、link、metaタグの次に属性が使われやすいタグかなと思ったので記事としてまとめてみました。
私個人が使っていないだけで、この属性もこんなふうに使いますよなどがあればぜひコメントください。

参考：
https://www.ipentec.com/document/javascript-exec-javascript-on-hyperlink-click
https://www.tagindex.com/html_tag/elements/a.html
https://reference.hyper-text.org/html5/attribute/rel/

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ