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] linear-gradient()グラデーション

どうも、べ〜やんです。 今回は、グラデーションを指定するlinear-gradient()を紹介します。 linear-gradient()とは linear-gradient()は背景色をグラデーシ …

[HTML] ルビを振る方法

どうも、べ〜やんです。 今回こんかいは、HTMLでルビを振ふる方法ほうほうを紹介しょうかいします。 ルビを振るとは ご存知の方がほとんどだと思いますが、ルビとは(ふりがな)のことです。 なんで(ふりが …

[css] font-sizeの種類

どうも、べ〜やんです。 今回は、CSSで指定するフォントサイズの種類と簡単な使い方をまとめて紹介します。 フォントサイズの種類 フォントサイズを適当に決めてませんか?なんとなくpxだけを使ってませんか …

[HTML] 特殊文字で空白スペース

どうも、べ〜やんです。 今回は、特殊文字を使って空白スペースを挿入する方法を紹介します。 空白スペース htmlではひとつの半角スペースは空白スペースとして使用できますが、連続した半角スペースはひとつ …

[CSS] 3点リーダーの作り方

どうも、べ〜やんです。 今回は、3点リーダーの作り方を紹介します。 3点リーダーとは 3点リーダーって知ってますか? 文章が長くて表示仕切れない場合に、はみ出た部分を「…」とピリオド3つで …