WebMaster Index

a

<a> タグは主にハイパーリンクを指定するための要素です。HTML5 からは <a> 要素内に <p> や <div> など、HTML4 で言う『ブロックレベル要素』を含むことができるようになりました。

属性

href=””
他のファイルにリンクする
target=””
リンク先の表示方法
rel=””
リンク先ファイルとの関係
title=””
リンク先のタイトル

他ファイルにリンクする

a 要素に href 属性を指定すると他のファイルにリンクすることが出来ます。

<a href="page002.html">次のページへ</a>

ページ内リンク

ページ内の特定の位置にスクロールして移動することもできます。スクロールして移動したい場所のタグ内に「id」を指定します。ここでは例として「abc」としました。リンクの href には頭に「#」を付け「#abc」と記入します。

<a href="#abc">次のページへ</a>
<section id="abc">
<h3>セクション見出し</h3>
<p>本文</p>
</section>

リンクをクリックすると別のページには移動せず「id=”abc”」が指定されている要素が見える位置までページがスクロールします。ただし、ページの内容がすべて画面内に納まりスクロールバーが表示されていない時は動作しません。また、アニメーション効果を Javascript 等で与えない限りは一瞬で指定された要素の位置まで移動します。

ページ内リンクは主に、ページ内で目次のリンクをクリックして該当のセクションに移動する場合などに使うことができます。

リンクのターゲットを指定する

target 属性はリンクの表示先を指定することが出来ます。主にフレームを使っている際に使用します。

_blank
新規ウインドウを開いて表示(外部サイトへのリンクなどに使われることが多い)

<a href="page002.html" target="_blank">新規ウインドウで</a>
_self
同じウインドウ内で表示

<a href="page002.html" target="_self">同じウインドウで</a>
_parent
親ウインドウで表示(ひとつ上のフレームに表示)

<a href="page002.html" target="_parent">親ウインドウで</a>
_top
いちばん上のレベルのウインドウで表示(全フレームを解除しページ全体に表示)

<a href="page002.html" target="_top">いちばん上のウインドウで</a>

リンク先ファイルとの関係

rel 属性は href 属性に指定したファイルとの関係を示します。

alternate
代替文書

<a href="page002.html" rel="alternate">モバイル版はこちら</a>
auther
著者情報

<a href="page002.html" rel="auther">著者のプロフィール</a>
bookmark
ブックマーク等に利用する固定リンク

<a href="madosma_q601.html" rel="bookmark">MADOSMA Q601 商品ページ</a>
help
ヘルプページ

<a href="help.html" rel="help">ヘルプ</a>
license
著作権、ライセンスページ
next
連続した文書において次の文書へのリンク
投稿日時
2020年8月16日 03:36
カテゴリー
HTML タグ
タグ