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] 横並び、flexboxの使い方

どうも、べ〜やんです。 今回は、CSSで要素を横並びにする方法のflexboxの基本的な使い方を紹介します。 flexboxとは? 要素を横並びに配置する方法のひとつに、flexboxがあります。 f …

[HTML] ルビを振る方法

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

[jQuery] jQueryのアコーディオンの作り方

どうも、べ〜やんです。 今回は、jQueryでのアコーディオンの作り方を紹介したいと思います。 アコーディオンとは よくメニューバーやQ&Aなどで使われているクリックすると、楽器のアコーディオ …

[CSS] CSSで縦書きにする方法

どうも、べ〜やんです。 今回は、CSSで簡単にテキストを縦書きにする方法を紹介します。 和風のデザインやサイドにメニューバーを配置する時などに便利です。 縦書きデザイン 和風テイストのデザインやサイド …

BEMを意識しよう

どうも、べ〜やんです。 今回は、代表的なCSSの設定規則のBEMの基礎を紹介します。 HTML、CSSに慣れてきた方やクラス名で迷ってしまう方、チームでプロジェクトを進めたい方におすすめです。 BEM …