コース推薦:
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 オンラインチュートリアル」(通常は下線付きの青いテキスト)というフレーズに特別な効果を表示し、ユーザーにそれが他のドキュメントにリンクできる超リンクであることを示します。こんな感じです:
ユーザーは、ブラウザのオプションを使用して、テキストの色を指定し、リンク前とリンク後のリンクテキストの色を設定することもできます。
ヒント:使用することができます: CSSのピアクラステキストリンクに複雑で多様なスタイルを追加します。
画像リンクを作成する
より複雑なアンカーは、画像を含むこともできます。以下のLOGOは、画像リンクで、その画像をクリックすると、W3schoolのホームページに戻ることができます:
<a href="http://www.codew3c.com/index.html"> <img src="/i/codew3c_logo_white.gif" /> </a>
以下のコードは、CodeW3C.comのLOGOにリターンホームページのリンクを追加します:

多くのグラフィックブラウザは、アンカーの一部としての画像の周りに特別な枠線を配置します。以下のコードは、<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。 可能な値:
|
ブラウザのサポート
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
サポート | サポート | サポート | サポート | サポート |