HTMLでhref属性の使い方を現役エンジニアが解説【初心者向け】
初心者向けにHTMLでhref属性の使い方について解説しています。hrefを使った絶対パス、相対パス、ルートパスといったページ遷移の種類それぞれの指定方法を説明します。重要な属性となるのでしっかりと頭に入れておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,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つになるでしょう。
- サイト内の別のページへ遷移する
- 同じページ内の違う位置へ遷移する(ページ内リンク)
- 外部サイトへ遷移する
- サイト内のファイルに直接遷移する(例えばPDFなど)
- サイト内のファイルに直接遷移、そしてダウンロードする(例えば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>
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>
実は私も!?独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか?
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
hrefと、そのターゲット属性
リンクの行き先は、同じページタブで開くこともできますし、別のウィンドウにて遷移させる。という方法があります。
それが、「target属性」です。4種類ありますが、_blankが頻度が高く、それ以外は近年はあまり使用されていません。
- _self/通常パターン。現在のウィンドウで開く指定。
- _blank/別のウィンドウで開く指定。
- _top/フレームセットは解除、単一のページのみが表示される指定。
- _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サイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

プログラミングを独学していて、このように感じた経験はないでしょうか?
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)