婚活LABより、ブライダルネットの期間限定クーポン配布中!!

HTML5 aタグの使用方完全版!! 主要属性解説付

HTML5 aタグの使用方完全版!! 主要属性解説付

HTML5におけるaタグの全要素一覧と、必ず抑えておくべき属性の使い方についてサンプルHTMLと挙動を確認しながら解説します。

aタグの属性一覧

まずはHTML5で使用可能な全属性を良く使う順で一覧を確認します。

href ハイパーリンク先を指定
target リンクの開き方を指定
rel リンク先との関連性や位置づけを指定
hreflang リンク先の言語コードの指定
download ユーザーにダウンロードを促す
ping クリックされた際のping の送信先を指定
referrerpolicy リンク先にアクセスする際のリファラーポリシーを指定

これだけおさえれば大丈夫!!主要属性の使い方

href属性の使い方

href属性は、基本的には属性値に指定したURLにリンクさせる際に使用されます。
任意の指定したid属性に移動すること等、様々な使用方も可能です。

では早速サンプルHTMLを見てみましょう。

サンプル1

HTML

<a href=”http://howto.logilab.jp”>当サイトトップページ</a>

表示

この場合は、hrefの属性値に記述した、当サイトのトップページ『http://howto.logilab.jp』に移動します。

次は、id属性にジャンプしてみましょう。あらかじめ当ページの『aタグの属性一覧』の見出しにid名に”a-tag”を指定しています。

サンプル2

HTML

<a href=”#a-tag”>『aタグの属性一覧』にジャンプ</a>

表示

表示されているリンクをクリックすると『aタグの属性一覧』の見出しに移動しました。

組み合わせると別ページの任意の場所に移動する事が出来ます。
今回は別記事の『絶対パス、相対パスとは』の見出しに移動してみます。

サンプル3

HTML

<a href=”http://howto.logilab.jp/howtoweb5#zettaipath”>他ページの『絶対パス、相対パスとは』見出しにジャンプ</a>

表示

a要素のhref属性値にはサンプル3のリンクの『絶対パス、相対パスとは』にあるように、このような方法でもマークアップ出来るので合わせてごらんください。

target属性の使い方

aタグでは一般に以下の2つの属性値をtarget属性の値として指定します。

_self 現在表示中の画面に表示(デフォルト)
_blank 新しいウィンドウ、新しいタブに表示
※ブラウザに依存

何も指定しなければ『_self』が既定となっているので実際は_selfと指定する場合はまずありません。

target属性の属性値を『_blank』とした場合のサンプルHTMLをみてみましょう。

サンプル4

HTML

<a href=”http://howto.logilab.jp” target=”_blank”>当サイトトップページ</a>

表示

新しいウインドウ、またはタブに当サイトのトップページが表示されたと思います。

rel属性の使い方

rel属性は的確にしていすると若干ではありますがSEO効果が得られると考えられています。
まずは主要なrel属性の属性値を確認しましょう。

author 著者の情報
nofollow リンク先の情報を保証しない。
検索ロボットにリンクをたどらせない。
noreferrer リンク先にリンク元の情報を送信しない。

大体、この3つを覚えておけば対応できると思います。

『author』は著者の情報ページへのリンクであることを表します。信頼に足らないサイトには『nofollow』を指定して、関係性がないことを検索ロボットに伝えたほうが良いとされています。『noreferrer』は自分の作成したサイトから訪れたことを相手に知られたくない場合などに指定します。

以上、aタグの使用法について、href,target,rel属性を覚えておけば殆どの場合に対応できると思います。

グループサイト。婚活LABより!婚活無料診断実施中!

CTA-IMAGE 簡単な質問に答えるだけですあなたに最適な婚活タイプが丸わかり!