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

初心者向けにHTMLでhref属性の使い方について解説しています。hrefを使った絶対パス、相対パス、ルートパスといったページ遷移の種類それぞれの指定方法を説明します。重要な属性となるのでしっかりと頭に入れておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

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

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

 

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

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

href属性の使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

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

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

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

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

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

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

 

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

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

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

以下がそれぞれのリンクの書き方です。 ※4、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] HTML/CSSで挫折しない学習方法を動画で公開中

hrefの指定方法

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

絶対パス

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

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

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

相対パス

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

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

ルートパス

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

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

 

hrefの指定方法その2

同じページ内での位置指定をする事もできます。これは、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では初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

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