CODING

HTMLでリンクをはる

投稿日:2019年10月13日 更新日:




どうも、べ〜やんです。

今回は、HTMLでリンクを貼る方法をざっくり紹介します。

テキストや画像をクリックしたら、別のページに移動できるあれです。

<a href=""></a>






aタグ

<a>タグのaはAnchor(アンカー)の略です。

<a></a>



href属性

aタグの開始タグの中に、href属性を書きます。

href=””の中にリンク先のURLを書きます。

<a href="ここにURL"></a>
<a href="https://beeyanblog.com"></a>



テキストor画像

開始タグと終了タグの間にテキストを書きます。このテキストをクリックしてもらうことになります。このテキストのことをアンカーテキストと呼びます。

<a href="https://beeyanblog.com">ここをクリック</a><br>
<a href="https://beeyanblog.com">こちら</a>
<!-- <br>で改行しています。-->

ここをクリック
こちら

アンカーテキストの代わりに画像を配置することで画像をクリックするリンクになります。

<a href="https://beeyanblog.com"><img src="" alt=""></a>



外窓でリンク

リンクを新しい画面で開くようにするには、開始タグにtarget=”_blank”を追加します。

セキュリティー上の理由でtarget=”_blank”を使用する場合はrel=”noopener”も追加することが推奨されています。

noopenerとセキュリティー

<a href="https://beeyanblog.com" target="_blank" rel="noopener">別窓リンク</a>

別窓リンク




SEOとアンカーテキスト

アンカーテキストの部分にどんな言葉を書くかは、リンク先の検索結果にも影響があります。

検索エンジンはリンク先のページ内容を、アンカーテキストで表現されている内容とみなす傾向が強いようです。

リンク先の内容がHTMLについてのページだったらアンカーテキストは「HTML」にするなど、アンカーテキストはリンク先の内容と合致するようにする必要があります。

ですが、全てのアンカーテキストをそのようにするのは難しいですよね。

そんな時は、開始タグにrel=”nofollow”を追加するとアンカーテキストを無効にできます。

<!-- アンカーテキスト無効 -->
<a href="https://beeyanblog.com" rel="nofollow">アンカーテキスト無効</a>
<!-- 別窓で開いてアンカーテキスト無効 -->
<a href="https://beeyanblog.com" target="_blank" rel="noopener nofollow">別窓で開いてアンカーテキスト無効</a>

アンカーテキスト無効
別窓で開いてアンカーテキスト無効




おわりに

HTMLでリンクを貼る方法をざっくり紹介しました。

この他にもリンクにはさまざまな設定ができますので、リファレンスなどで確認してみてください。




-CODING
-, ,

執筆者:


comment

関連記事

[CSS] 中央揃え

どうも、べ〜やんです。 今回はCSSでテキストやブロックを中央配置する方法を紹介します。 ブロックとインライン ブロック要素とインライン要素とでは中央揃えの方法が違うので、まずはブロック要素とインライ …

[CSS] CSSで吹き出し風デザイン・三角形

どうも、べ〜やんです。 今回は、三角形の作り方と吹き出し風のデザインの作り方を紹介します。 三角形がぴょこって付いているアレです。 三角形 まずはCSSで三角形を作る方法をざっくり紹介します。 三角形 …

[CSS] CSSの単位vwやvh知ってますか?

どうも、べ〜やんです。 今回は、CSSで使用される単位のvw、vhを紹介します。 Viewport ビューポート vwやvhは、Viewport  Width、Viewport  heightの略で、 …

[css] borderで枠線をつける方法

どうも、べ〜やんです。 今回はCSSで枠線を指定する方法のborderの使い方を紹介します。 borderとは borderは枠線を指定できるプロパティです。 線の種類、太さ、色などを指定してさまざま …

[CSS] リストの最初や最後だけなどに便利な擬似要素

どうも、べ〜やんです。 今回は、リストで最初や最後だけなど任意の箇所だけ違うデザインにしたい時などに便利な擬似クラスを紹介します。 リスト一部だけ リストの最初や最後だけなど任意のリストだけデザインを …