a
<a> タグは主にハイパーリンクを指定するための要素です。HTML5 からは親要素が <section> 等の場合に <a> 要素内に <p> や <div> などのフローコンテンツ(HTML4 で言うブロックレベル要素)を含むことができるようになりました。
- 分類
- フローコンテンツ、フレージングコンテンツ、インタラクティブコンテンツ
- 内包できるもの
- 透過コンテンツ(インタラクティブコンテンツは含まない)
属性
他ファイルにリンクする
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
- 連続した文書において次の文書へのリンク