コース推薦:

HTML <a> href 属性

href 定義と使用法

href 属性の値は、リンク先のページの URL を指定します。 href 属性で指定された URL が表すドキュメント、または JavaScript 式、メソッド、関数のリストです。属性の値は、有効なドキュメントの相対または絶対 URL で、スライドショー識別子や JavaScript コード部分を含むことができます。ユーザーが <a> タグ内の内容を選択した場合、ブラウザは検索し表示しようとします。

もし href 属性が存在しない場合、<a> タグはハイパーリンクではありません。

ヒント:href="#top" または href="#" を使用して現在のページのトップにリンクできます!

テキストリンクの作成

他のドキュメントを参照する簡単な <a> タグは以下の形式でできます:

<a href="http://www.codew3c.com/index.html">CodeW3C.com オンラインチュートリアル</a>

ブラウザは「CodeW3C.com オンラインチュートリアル」(通常は下線付きの青いテキスト)というフレーズに特別な効果を表示し、ユーザーにそれが他のドキュメントにリンクできる超リンクであることを示します。こんな感じです:

CodeW3C.com オンラインチュートリアル

ユーザーは、ブラウザのオプションを使用して、テキストの色を指定し、リンク前とリンク後のリンクテキストの色を設定することもできます。

ヒント:使用することができます: CSSのピアクラステキストリンクに複雑で多様なスタイルを追加します。

画像リンクを作成する

より複雑なアンカーは、画像を含むこともできます。以下のLOGOは、画像リンクで、その画像をクリックすると、W3schoolのホームページに戻ることができます:

<a href="http://www.codew3c.com/index.html">
<img src="/i/codew3c_logo_white.gif" />
</a>

以下のコードは、CodeW3C.comのLOGOにリターンホームページのリンクを追加します:

CodeW3C.com オンラインチュートリアル

多くのグラフィックブラウザは、アンカーの一部としての画像の周りに特別な枠線を配置します。以下のコードは、<img>タグで画像の border属性0に設定することで、超リンクの枠線を削除できます。また、 CSSの枠線属性要素の枠線スタイルを全体的に変更するために使用されます。

例 1

href 属性はリンクの目的地を指定します:

<a href="https://www.codew3c.com">CodeW3C.comにアクセス</a>

実際に試してみてください

例 2

画像を使用してリンクする方法は:

<a href="https://www.codew3c.com">
<img border="0" alt="W3School" src="/i/logo/w3logo.png" width="400" height="225">
</a>

実際に試してみてください

例 3

メールアドレスにリンクする方法は:

<a href="mailto:someone@example.com">メールを送信</a>

実際に試してみてください

例 4

電話番号にリンクする方法は:

<a href="tel:+8613888888888">+86 138 8888 8888</a>

実際に試してみてください

例 5

同一ページの別の部分にリンクする方法は:

<a href="#section2">第二章に移動</a>

実際に試してみてください

例 6

JavaScriptにリンクする方法は:

<a href="javascript:alert('Hello World!');">JavaScriptを実行</a>

実際に試してみてください

構文

<a href="URL">

属性値

説明
URL

リンクの URL。

可能な値:

  • 絶対 URL - 他のウェブサイトへのリンク(例えば href="http://www.example.com/index.html")
  • 相対 URL - 網站内のファイルへのリンク(例えば href="index.html")
  • 指定された id を持つページ内の要素にリンク(例えば href="#section2")
  • 他のプロトコル(例えば https://、ftp://、mailto:、file: など)
  • スクリプト(例えば href="javascript:alert('Hello');")

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート