aタグの基本的な使い方についてまとめます。
aタグの使い方
aタグは、他のサイトやページにリンクしたいときに使います。
<!-- aタグの記述例(絶対パスで指定) --> <a href="https://www.google.com/">Googleのサイトへ移動</a>
href属性にリンク先のURLを指定します。また、aタグの間に任意の文言を記述します。外部サイトにリンクする場合、上記のように絶対パスで指定します。自サイト内の別ページにリンクする場合は、現在のページを起点にして相対パスで指定します。
<!-- 相対パスで指定する例 --> <a href="./about.html">Aboutページへ</a> <a href="./contact/contact.html">お問い合わせへ</a>
別タブで開く
外部サイトにリンクする場合に使われることが多いです。外部サイトを別タブで開くことで、今いるサイトと区別するような働きが期待されます。
<!-- 記述例 --> <a href="https://www.yahoo.co.jp/" target="_blank">Yahooのサイトへ移動</a>
ページ内リンク
同じページ内の特定の箇所にジャンプ(移動・遷移)するリンクのことです。当ブログでは、「記事の目次」のところが、ページ内リンクになっています。
<!-- 遷移元の記述 --> <a href="#article">タイトルの位置へジャンプする</a> <!-- 遷移先の記述 --> <h1 id="article">タイトル</h1>
遷移元のhref属性に#id名と指定します。遷移先のid属性にid名を指定します。
よくページトップへスクロールして戻るボタンがありますが、それはJavaScript(jQuery)で作ります。機会があれば他の記事で取り上げたいと思います。
リンクが飛ばない原因
- スペルミス
- 記号の間違い("と`など)
- URLの間違い
- 相対パスの間違い
- aタグの閉じタグがない
おまけ(次への>>記号の表示の仕方)
「>>」のように2文字ではなく1文字で表示するには、特殊文字を使います。
- 「»」は、「»」と記述します。
- 次へ»
- 「«」は、「«」と記述します。
- «前へ
HTML入門のまとめ記事なら... » HTML入門まとめ
