HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでリンク先ページのURLを指定する方法｜href属性の使い方を解説

HTMLでリンク先のページURLを指定するには、href属性を使用します。href属性は、アンカータグ（<a>）などの要素に設定することで、クリック時に移動する先のページやリソースの場所をブラウザに伝える役割を果たします。

href属性とは

hrefは「Hypertext Reference（ハイパーテキスト参照）」の略で、リンクの目的地となるURLを指定するための必須属性です。相対パスでも絶対パスでも指定でき、Webサイト内の別ページへの遷移や外部サイトへのリンクなど、さまざまな用途に活用できます。

記述例

以下のコードは、figure要素と組み合わせて画像とキャプションを表示し、リンク先を指定する基本的な実装例です。実際にコードを実行して、href属性の動作を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML href attribute</title>
   </head>
   <body>
      <a href = "https://www.tutorialspoint.com/index.htm">
         <figure><img src = "https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg"/>
            <figcaption>Tutorials Point Library of Tutorials</figcaption>
         </figure>
      </a>
   </body>
</html>

ポイントまとめ

  • href属性は<a>タグ内に記述し、値にはリンク先のURLを指定します。
  • target属性を併用すると、新しいタブでリンクを開く（target="_blank"）ことも可能です。
  • 画像全体をクリック可能なリンクにしたい場合は、<img>タグを<a>タグで囲みます。

このように、href属性を使いこなすことで、ユーザーが直感的にページ間を移動できる使いやすいWebサイトを構築できます。

  1. 【HTML入門】相対URLを使ってページをリンクする方法をわかりやすく解説

    HTMLでWebサイト内のページ同士をリンクさせるには、<a>タグのhref属性を使用します。特に相対URL（Relative URL）は、同じサイト内の別ページへリンクを貼る際に便利な記述方法で、たとえば /contact や /about_team のような形式で指定します。 aタグの主な属性一覧 <a>〜</a>タグで囲まれたテキストや画像はすべてハイパーリンクとして機能します。<a>タグでよく使われる主な属性は以下の通りです。 No.属性と説明 1 hrefリンク先のURLを指定します。相対パスでも絶対パスでも指定可能です

  2. HTML link要素のhref属性の使い方を解説

    HTMLの<link>要素におけるhref属性は、外部リソースのURLを指定するために使用します。スタイルシートなどの外部ファイルを読み込む際に、その場所をブラウザに伝える重要な役割を担います。 構文 href属性の基本的な構文は以下のとおりです。 <link href="url"> 上記の「url」には、リンク先のドキュメントのURLを指定します。それでは、<link>要素のhref属性を使った具体的な例を見てみましょう。 使用例 <!DOCTYPE html> <html> <head> <l