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

HTMLリンク（ハイパーリンク）の基本！aタグの構文とtarget属性の使い方を解説

HTMLのリンク（ハイパーリンク）とは、クリックすると別のドキュメントへジャンプできる要素のことです。Webページ同士をつなぐ役割を担っており、HTMLにおいて最も重要な機能の一つといえます。

基本構文

HTMLリンクは、<a>タグを使って以下のように記述します。

<a href="URL" target="値">リンクテキスト</a>

href属性には、リンク先のアドレス（URL）を指定します。ローカルファイルへのパスでも、外部サイトのURLでも指定可能です。また、target属性は、リンク先のドキュメントをどこに開くかを指定する属性で、以下の4つの値を設定できます。

値説明
_blank新しいタブまたはウィンドウでリンク先を開きます。
_parent親フレームでリンク先を開きます。
_self同じウィンドウ（現在のフレーム）でリンク先を開きます。（デフォルト値）
_topウィンドウ全体にリンク先を開きます。

サンプルコード

実際にHTMLリンクを使用した例を見てみましょう。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
</style>
<body>
<h1>HTML Links Demo</h1>
<a href="https://google.com" target="_blank">Go To Google</a>
</body>
</html>

このコードでは、target属性に「_blank」を指定しているため、リンクをクリックすると新しいタブ（ウィンドウ）でGoogleのページが開きます。

実行結果

HTMLリンク（ハイパーリンク）の基本！aタグの構文とtarget属性の使い方を解説

画面に表示された「Go To Google」のリンクをクリックすると、新しいウィンドウでGoogleのページが開きます。

  1. HTML DOMのdomainプロパティとは？使い方とサンプルコードを解説

    HTML DOM の domain プロパティは、現在ドキュメントが実行されているサーバーのドメイン名を取得するためのプロパティです。取得したドメイン名は文字列として返され、ドメインが識別できない場合には null が返されることもあります。 構文 domain プロパティの基本的な構文は以下の通りです。 document.domain 使用例 ここで、HTML DOM の domain プロパティを使用した具体的なサンプルコードを見てみましょう。 <!DOCTYPE html> <html> <body> <h1>domain プロパティの

  2. HTML DOM dlオブジェクトとは？JavaScriptで記述リストを動的に作成する方法

    HTML DOM dlオブジェクトとはHTML DOMのdlオブジェクトは、HTMLの<dl>要素に関連付けられたオブジェクトです。<dl>要素は「記述リスト（description list）」を作成するためのもので、用語（<dt>）とその説明（<dd>）をセットで表現します。dlオブジェクトを利用することで、JavaScriptから<dl>要素を動的に生成したり、ページ内の既存の記述リストにアクセスして操作したりすることができます。構文記述リストを作成する場合の基本的な構文は以下の通りです。var p = document.cre