aタグの書き方

aタグ

a要素

a要素機能の表”
カテゴリ タグ 機能 使用属性 要素分類
リンク <a></a> リンクの作成、指定先への移動 href インライン
使用例
<a href="○"> </a>

説明

ハイパーリンクといいこれを設定した部分をクリックすると他のページや外部のサイトへ移動する仕組みです。ホームページを作るにあたって最重要な要素になります。

1.リンク設定:サイト内他ページ、他のサイトへのリンク

絶対パスで記述してもいい。例を示すと、絶対パスというのは「https://youtukuru.com/contact」URL全てを記述することです。

相対パスというのは現在のページから別のページへのパス「/contact」や「../contact」などとなります。/は現在のページと同階層を表します。../は現在のページより上の階層を表します。

詳しくはパスの書き方をご確認ください。
はじめてのホームページ作成方法(パスの書き方)

2.ページ内の指定個所へのリンク。

※abcには任意の名前を指定します。『ページの先頭に戻る』をクリックすると<h1>まで戻る指定をします。
<h1>に戻る場所を指定します。これをアンカーといいます。日本語で錨のこと表します。※上の例は<h1>に指定した場合ですが、ページの一番上に戻るなら、<header>や<div id="wrapper">などに指定するといいでしょう。
アンカーを設定した場所に戻る仕組みになります。書き方は下記を参照ください。

3.他ページの指定個所へのリンク

リンク先のパスを記述し、その後ろに#任意の名前を記述する。リンク先の指定個所に<id="任意の名前">を記述することで、
他ページの指定個所へのリンクを作ることができる。

絶対パスでも相対パスでも可能です。

aタグまとめ

ページ内のリンクを使うケースとして、上記で説明したページの一番上に戻るボタンの他に、目次を作って各項目に移動するなどの使い方があります。

目次は記事が長い場合、スクロールせずに指定の項目まで飛べるのでユーザーさんにとっても良い対策になります。