HTMLでhref属性の使い方を現役エンジニアが解説【初心者向け】

HTMLでhref属性の使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

 

HTMLでhref属性の使い方について

サイト作成では必ず登場する、aタグとそれに紐づくhref属性の使い方について解説してみます。

aタグとは。リンク＝次のページ・コンテンツへつながるドアのようなもの。と理解しておくと良いでしょう。ドアの先には行き先が必ずあるものです。行き先がhref属性と覚えておきましょう。

これらはセットです。hrefの中が空白であると構文エラーになり、表示動作も不安定になります。注意しておきましょう。

<a href="https://techacademy.jp/">テックアカデミー</a>

これを和訳すると、「テックアカデミー」と書かれた箇所をクリックすると、実際のテックアカデミーのサイトに遷移する。となります。

 

hrefのよくある「行き先」5種

リンクの行き先は、内部と外部のどちらも設定することができます。主に以下の5つになるでしょう。

1. サイト内の別のページへ遷移する
2. 同じページ内の違う位置へ遷移する（ページ内リンク）
3. 外部サイトへ遷移する
4. サイト内のファイルに直接遷移する（例えばPDFなど）
5. サイト内のファイルに直接遷移、そしてダウンロードする（例えばzipファイルなど）

以下がそれぞれのリンクの書き方です。　※４、5番目は実際のリンクではありません。

<a href="https://techacademy.jp/webdesign-wordpress-set">テックアカデミー　※講座のページへ遷移する</a>
<a href="https://techacademy.jp/#training-top">テックアカデミー　※トップページの「トレーニング」部分へ遷移する</a>
<a href="https://www.kiramex.com/">テックアカデミー　※運営会社のキラメックス株式会社へ遷移する</a>
<a href="https://techacademy.jp/download/design.pdf">pdfファイルを表示させる。　※サンプルなので表示しません</a>
<a href="pdf/design.pdf">pdfファイルをダウンロードさせる。　※サンプルなので動作しません</a>

 

[PR] Webデザインで副業する方法とは

hrefの指定方法

指定をするには、合わせてパスの構造を理解しておきましょう。

絶対パス

絶対パスは呼び出したいファイルが同じディレクトリ内になく、外部で公開されている場合などに使います。世界中の誰が見ても参照できる位置を示します。

東京都港区南青山1-2-3建物名・号室〜といったような住所と同じような、ものです。

<a href="https://techacademy.jp/">テックアカデミー</a>

相対パス

基本となるパスの書き方です。「パスを書くそのファイルから見た、呼び出すファイルの位置」になります。

<a href="index.html">テックアカデミー</a>

ルートパス

サイトのルートから（今回の例であれば「demo」フォルダがルート）見たパスになります。最初につける/がルートを意味します。サイトルートから見た位置関係になるのですべて/からはじめます。WordPressなどや、.htaccessで指定している場合のみ利用できます。

<a href="/webdesign/training/">テックアカデミー</a>

 

hrefの指定方法その２

同じページ内での位置指定をする事もできます。これは、html構文内で、#（id）を記述している場合に指定できます。

<a href="https://techacademy.jp/#training-top">テックアカデミー　※トップページの「トレーニング」部分へ遷移する</a>

 

hrefと、そのターゲット属性

リンクの行き先は、同じページタブで開くこともできますし、別のウィンドウにて遷移させる。という方法があります。

それが、「target属性」です。4種類ありますが、_blankが頻度が高く、それ以外は近年はあまり使用されていません。

1. _self／通常パターン。現在のウィンドウで開く指定。
2. _blank／別のウィンドウで開く指定。
3. _top／フレームセットは解除、単一のページのみが表示される指定。
4. _parent／リンク先のページは親フレームに表示される指定。

 

実際に書いてみよう

<a href="https://techacademy.jp/webdesign-wordpress-set">テックアカデミーのウェブデザイン・WordPress講座</a>
<a href="https://techacademy.jp/#training-top">テックアカデミー「トレーニング」へ</a>
<a href="https://www.kiramex.com/" target="_blank" rel="noopener">キラメックス株式会社（外部サイト）</a>
<a href="https://techacademy.jp/download/design.pdf">pdfファイル(XXXkb)。　※サンプルです</a>
<a href="pdf/design.pdf">pdfファイルのダウンロードはこちら　※サンプルです</a>

今回は、リンク指定をするaタグを解説してみました。使い方を覚え、ページを作成してみましょう！！

 

監修してくれたメンター

ゆかちん先生 フリーランスのクリエイティブディレクター。 制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。

 

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。