プログラミング

【HTML】aタグを使ったリンク作成まとめ【貼り方・別タブ・別ウィンドウ・ページ内リンク・ページトップに戻る】

【HTML】aタグを使ったリンクの作成まとめ【貼り方・別タブ・別ウィンドウ・ページ内リンク・ページトップに戻る】

 

HTMLのリンクは、ページを作成するときに必須と言ってもよいほど使用する場面が多いです。

リンクはページ同士を繋ぐ役割があり、ページ同士を繋ぐ外部リンクページ内同士を繋ぐ内部リンクがあります。

これらを正しく使うことでSEO効果(アクセスアップ)があるとも言われているくらい大事なタグになっています。

そんなリンクタグには、使い方がいくつかあります。

 

この記事の要点

・別タブ、別ウィンドウで開くリンクの作り方

・ページ内リンクの作り方

・ページの最初へ戻るリンクの作り方

よると
よると
リンクタグには応用的な使い方がいくつかあるので、まとめて紹介していきます。

HTMLのリンクとは?

HTMLのリンクとは?

 

よると
よると
リンクは主に、ページ同士を繋げる役割があります。

リンクには「外部リンクと内部リンク」の2種類があります。

外部リンク

・自分のサイトと外部サイト同士を繋ぐ。

 

内部リンク

・自分のサイト同士(ページ・メニュー・見出しなど)を繋ぐ。

 

たとえば、下のリンクは内部リンクです。(このサイトの別ページへ飛びます)

 

下のリンクは外部リンクです。(プログラミング学習サイトへ飛びます)

ドットインストール(※別タブで開きます)

 

内部リンクと外部リンクを正しく使えば、SEO効果が期待できます。

・関連のある内部リンクを貼れば、ユーザーがサイトに滞在している時間を伸ばすことができる

・参考となるサイトへの外部リンクを貼れば、ユーザーに良いコンテンツを提供したことによってGoogleからの評価も上がる

 

HTMLリンクの貼り方

HTMLリンクの貼り方

 

よると
よると
リンクを貼るためには、「aタグとhref属性」を使ってリンクを作成していきます。

aタグとは?

 

aタグは「anchor(アンカー)の略」で、他のページへリンクを貼りたいときに使います。

リンクを作成するには「テキストか画像のURL」が必要で、どちらもaタグで囲むことでリンクになります。

また、aタグで囲うテキストのことを「アンカーテキスト」と呼びます。

 

href属性とは?

 

href属性は、「hypertext reference(ハイパーテキスト リファレンス)の略」です。

aタグとセットで使い、リンク先のURLを指定します。

 

【書き方】

<a href=”リンク先のURL“>アンカーテキスト</a>

 

【画像にリンクを貼る】

画像にリンクを貼りたい場合、「imgタグにsrc属性」を使って画像のURLを指定します。

<a href=”リンク先のURL><img src=”画像のURL“></a>

 

リンクを「別タブ・別ウィンドウ」で開く

リンクを「別タブ・別ウィンドウ」で開く

 

リンクを作成するときに、何も指定をしないと今見ているページが切り替わり、リンク先のページを表示します。

通常のリンク (このページに飛びます)

 

別のタブで開きたい場合は、target属性に「_blank」という値を追加すれば別タブで開くことができます。

【書き方】

<a href=”リンク先のURL” target=”_blank”>テキスト文字</a>

 

別タブで開きます。(このページに飛びます)

 

PCになりますが、別ウィンドウで開きたい場合「Shiftキー」を押しながらリンクを選択すると、新規ウィンドウで開くことができます。

 

ページ内リンクの作り方

ページ内リンクの作り方

 

よると
よると
ページ内の別の場所「もくじ・見出し」や、「ページの先頭へ戻るリンク」なども作ることができます。

【動作確認のための目次】

「見出し・もくじ」などにリンクをつける

 

「見出し・もくじ」などへリンクを作りたい場合、href属性に「#(パウンド記号) 」と「好きな識別子名」を付けます。

リンク先には「id 属性」を使い、さきほどの「識別子」を付けます。

 

【書き方】

<a href=”#好きな識別子の名前“>見出し1へのリンク</a>

<h2 id=”好きな識別子の名前“>見出し1</h2>

※この見出し内にある目次をクリックすると、リンクの動きを見ることができます。

 

ページの先頭へ戻るリンク

 

ページを下に読み進めているときに、ページの先頭へ戻って読み直したいなどということがあるかも知れません。

その場合、href属性に「#」か「#top」どちらかを書くとページの先頭へ戻るリンクを作ることができます。

【書き方】

<p><a href=”# か #top”>ここをクリックで先頭へ戻ります</a></p>

 

ここをクリックで先頭へ戻ります。

 

・ページ内リンクに飛んだときは、URLの最後に識別子がつきます。

 

これらの内部リンクは、「ul・li」などの「リストタグ」と組み合わせて使うこともできます。

【HTML】リストを使ってページの見た目を整えよう!【タグの使い方】
【HTML】リストを使ってページの見た目を整えよう!【タグの使い方】 HTMLでWebページを作成するときにリストタグを使うと、そのページを見やすくさせることができます。 リストは「箇条書きリ...

 

リンクを正しく使ってSEO対策をしよう!【まとめ】

リンクを正しく使ってSEO対策をしよう!【まとめ】

 

HTMLのリンクを正しく使うとSEO対策(アクセスアップ)にもなるので、ページを作成していく上でとても必須なタグのひとつになります。

リンクタグを使えば出来ること

  • 「テキスト・画像」にリンクを入れることができる
  • 「別タブ・別ウィンドウ」で開くリンクを作ることができる
  • 「ページ内のもくじ・見出し」へのリンクを作ることができる
  • 「ページの最初へ戻る」リンクを作ることができる

 

リンクタグを使う想定と、その効果

・関連のあるページに内部リンクを貼ると、サイトへ訪れたユーザーが関連したページへ飛ぶので、滞在時間を伸ばすことができてSEO対策になる。

・参考となるページへの外部リンクを貼ると、自サイトを訪れたユーザーが参考ページへ飛ぶので、ユーザーに良いコンテンツを提供したとしてGoogleからの評価が上がってSEO対策になる。

 

よると
よると
「外部リンクと内部リンク」を正しく使い分けて、より良いコンテンツを作っていきましょう!