サイト内リンクと外部リンクの設定

リンクについて

ほとんどのWebページにはリンクが設定されますが、リンクは大きく分けて次の3種類あります。

• サイト内のコンテンツへのリンク – URLを相対パスで指定。アンカーを指定することも。
• ページ内のリンク – パス指定はなし。アンカー指定のみ。
• 外部サイトへのリンク – URLを絶対パスで指定。必要に応じてアンカーを指定。

リンク自体はURLが正しければ機能しますが、用途に応じて別ウインドウを開いたり、アンカーを設定するなど細かい設定が必要です。
そこで今回はリンクをサイト内、ページ内、外部リンクの3つに分けて設定を解説していきます。

サイト内のリンク

サイト内のリンクは、主に相対パスを使って指定します。
例えば、サイトに次のようなページがあるとします。

• トップページ 「https://gray-code.com/」
• 記事一覧ページ 「https://gray-code.com/html_css/」
• 記事ページ 「https://gray-code.com/html_css/setting-charset-of-html-page/」

これらを相対パスにすると、次のようになります。

• トップページ 「/」
• 記事一覧ページ 「/html_css/」
• 記事ページ 「/html_css/setting-charset-of-html-page/」

ドメイン部分「https://gray-code.com」以降のパスのみを指定する形です。
これらをa要素にすると、次のような指定になります。

コード例

<a href="/">トップページへのリンク</a>
<a href="/html_css/">記事一覧へのリンク</a>
<a href="/html_css/setting-charset-of-html-page/">記事詳細へのリンク</a>

サイト内URLで絶対パスを使っても特に問題ありませんが、記述が短くなるこちらの方法がよく使われます。

ページ内のリンク

記事の目次など、同一ページ内の該当箇所へ移動するリンクは「アンカー」を指定します。
例えば、次のようなHTMLコードがあるとします。

コード例

<h3>目次</h3>
<ol>
<li><a href="#section1">文字コードとは？</a></li>
<li><a href="#section2">どうして文字コードを指定するの？</a></li>
<li><a href="#section3">HTMLページに文字コードを設定する</a></li>
</ol>

--- 途中省略 ---

<section id="section1">
	<h2>文字コードとは？</h2>
	<p>コンテンツ</p>
</section>

<section id="section2">
	<h2>どうして文字コードを指定するの？</h2>
	<p>コンテンツ</p>
</section>

<section id="section3">
	<h2>HTMLページに文字コードを設定する</h2>
	<p>コンテンツ</p>
</section>

「目次」のリストにある、「#section1」などの「#」がついたものがアンカーリンクの指定です。
アンカーは、#以降の文字と同じid属性を持つ要素にリンクされます。

上記のコードであれば「#section1」は「id=”section1″」が設定されたsection要素へのリンクに、同様に「#section2」は「id=”section2″」へ、「#section3」は「id=”section3″」にリンクします。

アンカーはサイト内リンク、後述する絶対パスを使った外部サイトへのリンクでも同様に使用可能です。
パスの後ろに、「#アンカー」という形で使用します。

コード例

<a href="/html_css/#receipe">HTMLのレシピ一覧</a>
<a href="https://gray-code.com/html_css/#receipe">HTMLのレシピ一覧</a>

外部サイトへのリンク

外部サイトへのリンクは絶対パスを使用します。

コード例

<a href="https://gray-code.com/html_css/" target="_blank" rel="nofollow">HTML&CSSオンラインドキュメント - GRAYCODE</a>

外部サイトへのリンクではhref属性の他に、target属性とrel属性を設定することがあります。

target属性はリンク先の開き方を指定する属性です。
外部サイトは現在表示しているページとは別タブ／別ウインドウで表示することがありますが、そのときは「target=”_blank”」を指定します。

target属性の他の値については、こちらのドキュメントの「属性」項目内の「target」欄を確認してください。
<a> – MDN Web Docs

rel属性を使った「rel=”nofollow”」は、リンク先のコンテンツが自信の管理下にない場合や、リンク先の情報を信頼できない場合に使用します。
リンク先を信用できる場合、もしくはオススメしたい場合は指定する必要はありません。

rel属性に指定できる他の値については、こちらのドキュメントを確認してください。
リンク種別 – MDN Web Docs

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。