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

HTMLのaタグhref属性とは？使い方とサンプルコードを解説

HTMLの<a>要素におけるhref属性は、リンク先となるページのURLを設定するために使用される重要な属性です。

基本構文

href属性の基本的な書き方は以下の通りです。

<a href="URL">

「URL」の部分には、リンク先として指定したいアドレスを記述します。指定できる内容は多岐にわたり、相対パス、絶対パス、スクリプト、プロトコルなどが利用可能です。

サンプルコード①：Webページへのリンク

まずは、<a>要素のhref属性を使って外部サイトやサイト内ページへリンクを設定する基本的な例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h2>Learning is Fun</h2>
<p>
Javaの概念を学ぼう：<a href="https://tutorialspoint.com/java">Java!</a>
当サイトでJavaScriptも試してみよう：<a href="/javascript">JavaScript!</a>
</p><br>
</body>
</html>

表示結果

上記のコードを実行すると、次のようにテキストリンクが表示され、クリックするとそれぞれのURLへ移動します。

HTMLのaタグhref属性とは？使い方とサンプルコードを解説

サンプルコード②：mailtoでメール送信リンクを作る

href属性は、Webページへのリンク以外にも活用できます。次の例では、「mailto:」プロトコルを使って、ユーザーのメールアドレス宛にメールを送信できるリンクを設定しています。

<!DOCTYPE html>
<html>
<body>
<h2>Learning is Fun</h2>
<p>
Javaの概念を学ぼう：<a href="https://tutorialspoint.com/java">Java!</a>
当サイトでJavaScriptも試してみよう：<a href="/javascript">JavaScript!</a>
</p>
<p>さらに詳しいチュートリアルについては、こちらから<a href="mailto:abcd@demo.com?cc=pqr@demo.com&subject=DEMO EMAIL">EMAIL</a>をご送信ください。</p>
<br>
</body>
</html>

表示結果

このコードを実行すると、以下のようにメール送信用のリンクが表示されます。

HTMLのaタグhref属性とは？使い方とサンプルコードを解説

このページをブラウザで開いて「EMAIL」リンクをクリックすると、システムに設定されているデフォルトのメールアプリケーションが起動します。ここでは、デフォルトのメールアプリとして「OUTLOOK」が設定されている場合の例を示します。

HTMLのaタグhref属性とは？使い方とサンプルコードを解説

まとめ

<a>要素のhref属性を使えば、通常のWebページへのリンクはもちろん、「mailto:」を利用したメール送信リンクも簡単に作成できます。相対パス・絶対パスの使い分けや、CCや件名などのオプション指定も覚えておくと、より実用的なHTMLページが作れるでしょう。

  1. HTMLのrowspan属性とは？テーブルセルの行結合の使い方を解説

    HTMLのrowspan属性は、表（テーブル）のセルが縦方向にまたぐ行数を指定するための属性です。この属性を使用することで、複数の行にまたがるセルを作成でき、より柔軟なテーブルレイアウトを実現できます。rowspan属性を適用できるのは、td要素またはth要素のみです。それ以外のHTML要素には使用できない点に注意しましょう。rowspan属性の構文rowspan属性の基本的な構文は以下のとおりです。<タグ名 rowspan=数値></タグ名>「数値」には、セルがまたぐ行数を整数で指定します。たとえば「rowspan=2」と指定すると、そのセルは2行分の高さを持つことに

  2. HTMLのtabindex属性とは？タブ移動の順序を制御する方法を解説

    HTMLのtabindex属性は、HTMLドキュメント内の要素がTabキーでフォーカスされる順序（タブ移動の順番）を定義するための属性です。tabindexはグローバル属性に分類されるため、すべてのHTML要素に対して使用することができます。通常、Tabキーを押すと要素はHTMLの記述順にフォーカスされますが、tabindex属性を指定することで、この順序を自由にコントロールできます。値には整数を指定し、数値が小さいものから順にフォーカスされます。tabindex属性の値について正の数（1以上）：指定した数値の順序でタブ移動が行われます0：HTMLの記述順にフォーカスされます（デフォルトの挙動