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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

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

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

[CSS] 自動ナンバリングする方法

どうも、べ〜やんです。 今回は、counterを使って自動でナンバリングする方法を紹介します。 自動ナンバリング 見出しなどに番号をつけて表示する場合に、手動で入力すると面倒ですし途中で順番が変わった …

HTML文法チェックサービスMarkup Validation Service

どうも、べ〜やんです。 今回は、HTMLの文法にミスがないかを自動で判別してくれるサービスMarkup Validation Serviceを紹介します。 HTMLを独学で勉強していて自分の知識がどれ …

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

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

[HTML] articleとsectionの使い方

どうも、べ〜やんです。 今回は、HTMLのarticleとsectionの使い方を紹介します。 articleとsection div、article、sectionどれを使っても見た目上は同じ様に表 …