HTMLでハイパーリンクを作成する方法

Webページを作成するときは、別のWebページまたはWebサイトを参照することをお勧めします。たとえば、ブログを作成していて、関連性があると思われる記事にリンクしたい場合があります。

ハイパーリンク 、またはリンクは、あるWebページを別のWebページに接続し、ユーザーが複数のWebページ間をすばやく移動できるようにするために使用されます。 ハイパーリンク 自分のサイトの他のページや別のWebサイトのページにリンクするために使用できます。

このガイドでは、HTMLでのハイパーリンクの基本を説明します。 リンクのターゲットを設定する方法、ブックマークのアンカーを作成する方法、メールアドレスやウェブ要素へのリンクについて説明します。

HTMLハイパーリンク

<a href="your_url">This text will go to a URL.</a>

タグ間のテキストは、開始タグで指定したURLにリンクします。 hrefを使用します URLのターゲットを選択するための属性。これは、絶対URLまたは https://www.careerkarma.comなどの絶対リンクである可能性があります。 または、当サイトのどこかに関連するURL。

キャリアカルマのホームページのウェブアドレスを指すリンクの例を次に示します。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

<a href="https://www.careerkarma.com">Career Karma</a>

HTMLハイパーリンクタグタイプ

ブラウザに表示される可能性のあるリンクには3つのタイプがあります。これらは次のとおりです。

• 未訪問のリンク 、青色で表示されます
• 訪問したリンク 、紫色で表示されます
• アクティブリンク 、赤で表示されます

一部のウェブサイトはこれらの色を上書きします。つまり、表示が異なりますが、 HTMLでスタイルを設定できる主な種類のリンクです。 。

ハイパーリンクHTML：ターゲット

リンクを開く方法を変更できます。たとえば、ユーザーのウェブブラウザの新しいタブでリンクを開く必要があるとします。これにより、ユーザーは現在表示しているWebページでの位置を失うことがなくなります。

ここにリンクtargetHTML 属性が入ります。リンクtargetを使用する 属性を使用すると、リンク先のリソースをブラウザが開く場所を指定できます。

使用できるターゲットには、次の4種類があります。

• _self ：同じウィンドウとタブでWebリソースにアクセスします。これは、 HTMLで使用されるデフォルトのターゲットです。 ハイパーリンク。
• _parent ：親ウィンドウのWebリソースにアクセスします。
• _blank ：新しいウィンドウまたはタブでWebリソースにアクセスします。
• _top ：ブラウザウィンドウ全体でWebリソースにアクセスします。

これらのリンクの実際の例を次に示します。

<a href="https://www.careerkarma.com" target="_self">This link will open in this tab.</a>
<a href="https://www.careerkarma.com" target="_parent">This link will open a parent window.</a>
<a href="https://www.careerkarma.com" target="_blank">This link will open in a new tab.</a>
<a href="https://www.careerkarma.com" target="_top">This link will open in a full browser window.</a>

ハイパーリンクHTML：ブックマークアンカー

ハイパーリンク HTML HTMLの特定の部分を参照することもできます 資料。これは、長いWebページがあり、ユーザーをテキスト内の特定の場所に誘導する場合に役立ちます。

ブックマークアンカーの使用を開始する前に、まず、ユーザーが移動する要素にID属性を定義する必要があります。 WebページのタイトルでID属性を宣言する例を次に示します。

<h3 id="subtitle3">Subtitle 3</h3>

HTMLの見出しタグにIDsubtitle3を付けました 、これを使用してハイパーリンクで参照できます 。

これがハイパーリンクの例です この見出しを参照しています：

<a href="#subtitle3">Go to Subtitle 3</a>

hrefでURLを指定する代わりに タグには、リンクする要素のIDを指定します。そのID（＃）の前にハッシュ記号を追加して、リンクされたドキュメントがWebページにあることをブラウザが認識できるようにします。

HTMLアンカータグ

HTMLアンカータグはタグを参照します。このタグは、ユーザーを別のWebリソースにリンクします。 「href」属性は、ユーザーがリンクをクリックしたときに使用されるリソースを定義します。

HTMLアンカータグの例

相対URL

開発中と同じHTMLドキュメント上のリソースにリンクしている場合は、相対URLを使用できます。相対URLはローカルリンクとも呼ばれ、「https://www.sitename.com」構文を使用しません。代わりに、相対URLは、ローカルサーバー上の特定のWebリソースのファイルパスを指します。

Career Karma Webサイトに、ブログを指すリンクを作成しているとします。私たちのサイトはCareerKarmaサイトであるため、絶対URLを使用する代わりに、ローカルURLを使用することもできます。このリンクを作成するために使用するコードは次のとおりです。

<a href="/blog">Career Karma blog</a>

テキストCareerKarma blogをクリックすると 、 / blogに送信されます 当サイトのリソース。

メールアドレス

アンカータグを使用して、電子メールアドレスにリンクすることもできます。メールアドレスへのリンクをクリックすると、ユーザーのデフォルトのメールプログラムが開きます。指定したメールアドレスにメッセージを送信するかどうかを尋ねられます。

メールアドレスにリンクするには、mailto：プロトコルでリンクを開始する必要があります。 HTMLでメールアドレスにリンクする例を次に示します。

<a href="mailto:nothing@google.com">Send an email to us!</a>

リンクをクリックすると、メールプログラムが開き、「nothing@google.com」にメールを送信するように求められます。

要素へのリンク

アンカータグは、Webページ上の要素にリンクできます。このリンクを作成するには、アンカーが指す要素のIDを指定します。ユーザーを見出しTestHeadingに移動するためのリンクが必要だったとします。 Webページで。次のコードを使用してこのリンクを作成できます：

<a href="#test_heading">Jump to Test Heading</a>

<h2 id="test_heading">Test Heading</h2>

リンクをクリックすると、WebページがID test_headingの要素までスクロールダウンします。 。

結論

ハイパーリンク HTMLで使用して、あるWebページまたはリソースを別のWebページまたはリソースにリンクできます。 ハイパーリンクを使用できます サイトまたは他のWebサイトのリソースに接続します。このガイドでは、ハイパーリンクの使用方法を詳しく説明しました。 HTML ドキュメント。

これらの情報がすべて揃ったら、ハイパーリンクを作成する準備が整います。 HTML マスターのように！

HTMLでのコーディングの詳細については、HTMLの学習方法ガイドをご覧ください。