【HTML】リンクを埋め込む

連続でHTMLのアウトプットをしていきます。

HTMLにリンクを埋め込む(その1)

HTMLで下記のようにリンクを埋め込むにはaタグとhrefを使う。
yskmtg’s blogはこちら

  • aタグ:「anchor(アンカー)」の略

  • href: 「hypertext reference」の略で、直訳すると「ハイパーテキストの参照」。 hrefとはa(アンカー)タグの属性の一つで、いくつかあるaタグの属性の中でも一番重要なもの!主にhrefでリンク先の場所を指定することが役割になっている。

<a href="URL">yskmtg's blog</a>

同じタブで開くのではなく、違う新しいタブでページを開きたいときは、target属性の値を使う。

target属性の値を_blankにする。

<a href="URL" target="_blank">yskmtg's blog</a>

こうすることで別のタブにリンク先を表示してくれて便利!


HTMLにリンクを埋め込む(その2)

次に同じページ内にリンクを飛ばす方法。 例えば「このサービスについて」の見出しにリンクをつけて、同ページ内の「このサービスについて」の説明場所に飛ばせたい。

  • リンクを貼る側は、herf属性と「#(パウンド記号)をつけて、その後に好きな識別子をつける」
<a href="#about">このサービスについて</a>
  • このサービスについて」の説明場所にはidを貼り付ける
<h2 id = "about">このサービスについて</h2>
<p>このサービスについての説明このサービスについての説明このサービスについての説明このサービスについての説明このサービスについての説明</p>


HTMLにリンクを埋め込む(その3)

最後に同じページ内で一番上に戻る方法。
ページの先頭に戻るには、href属性を単に#とするか#topと書いてあげるとリンクをつけられる。

<p><a href= "#top">先頭に戻る</p>