【HTML Living Standard】tel属性値の使い方
tel属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
tel定数は、HTMLの記述において、電話番号に関連する特定の機能やデータの種類を指定するために使用される値を表す定数です。主に二つの異なる文脈で活用されます。
第一に、<input> 要素の type 属性の値として tel を指定することで、ユーザーが電話番号を入力するための専用入力フィールドを作成できます。例えば、<input type="tel" name="phone"> のように記述します。この設定により、多くのブラウザやモバイルデバイスは、電話番号の入力に適した仮想キーボードを表示するなど、入力補助のユーザーインターフェースを提供します。これにより、ユーザーはスムーズに電話番号を入力でき、入力ミスを減らすことにも繋がります。
第二に、<a> （アンカー）要素の href 属性の値として tel: スキームを使用することで、ウェブページ上で直接電話番号へのリンクを作成できます。例えば、<a href="tel:+81-3-xxxx-xxxx">電話をかける</a> のように記述します。このリンクをユーザーがクリックすると、対応デバイス上で発信アプリケーションが起動され、ウェブサイトから直接電話をかけることが可能となり、利便性が向上します。
tel定数の利用は、ウェブサイトのユーザビリティとアクセシビリティ向上に貢献します。
構文(syntax)
1<a href="tel:09012345678">090-1234-5678</a>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLで電話リンクを作成する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>電話番号リンクのサンプル</title> 7</head> 8<body> 9 <h1>電話番号リンクの使用例</h1> 10 11 <!-- 以下のリンクをクリックすると、スマートフォンなどの対応デバイスで電話をかけることができます。 --> 12 <!-- 'href'属性に「tel:」のプレフィックスを付けて、その後に電話番号を記述します。 --> 13 <!-- 電話番号のハイフンは省略しても動作しますが、可読性のために含めることが推奨されます。 --> 14 <!-- 国際電話番号の形式（例: +81-3-1234-5678）も利用可能です。 --> 15 <p> 16 お問い合わせはこちらまで: 17 <a href="tel:+81-3-1234-5678">03-1234-5678</a> 18 </p> 19 20 <p> 21 カスタマーサポートフリーダイヤル: 22 <a href="tel:0120-987-654">0120-987-654</a> 23 </p> 24</body> 25</html>
HTMLでは、ウェブページ上で電話番号をクリックするだけで電話をかけられるようにする「電話番号リンク」を作成できます。これは、<a>（アンカー）要素のhref属性に「tel:」という特別なプレフィックスを付け、その後に電話番号を記述することで実現します。例えば、<a href="tel:+81-3-1234-5678">03-1234-5678</a>のように記述します。
このリンクをクリックすると、スマートフォンやタブレットなどの対応デバイスで電話アプリが自動的に起動し、指定された電話番号に発信しようとします。ここで言う「tel」は、プログラミング言語の関数のように、直接的な「引数」を受け取って処理を行ったり、処理結果を「戻り値」として返したりするものではありません。これは、特定の操作をオペレーティングシステムやアプリケーションに指示するためのURIスキーム（Uniform Resource Identifier scheme）として機能します。
電話番号はハイフンを含めて記述することが推奨されますが、省略しても問題なく機能します。また、+81-3-1234-5678のような国際電話番号の形式も利用可能です。このtelリンクは、ウェブサイトを閲覧しているユーザーが、手間なく直接連絡を取れるようにするための重要な機能の一つです。
HTMLのtel:リンクは、スマートフォンなどの対応デバイスでクリックすると直接電話をかけられる便利な機能です。href属性には、必ず「tel:」のプレフィックスを付けてから電話番号を記述してください。このプレフィックスがないと、通常のウェブページへのリンクと認識されてしまいます。
電話番号はハイフンを含めて記述すると、コードの可読性が向上し、ユーザーにも分かりやすくなります。ハイフンを省略しても機能しますが、推奨はされません。また、国際電話番号形式（例: +81-3-1234-5678）を使用すると、世界中のユーザーが正しく電話をかけられるため、特に公開サイトではこの形式も検討すると良いでしょう。
PCなど電話機能を持たないデバイスでこのリンクをクリックした場合、電話はかからないか、Skypeなどの対応アプリが起動することがあります。ユーザーが意図せず電話をかけてしまわないよう、リンクの表示テキストは電話番号であることを明確にし、利用者に分かりやすい表現を心がけてください。
HTMLで電話リンクを作成する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>電話番号リンクのサンプル</title> 7</head> 8<body> 9 <h1>電話をかけるリンク</h1> 10 <p> 11 <!-- このリンクは、クリックすると指定された電話番号に発信します。 --> 12 <!-- 特にスマートフォンなどのモバイルデバイスで便利です。 --> 13 <!-- href属性に "tel:" の後に国コードを含めた電話番号を指定します。 --> 14 <a href="tel:+81-03-1234-5678">03-1234-5678 に電話をかける</a> 15 </p> 16</body> 17</html>
HTMLにおけるtel:は、ウェブページ上で電話番号をリンクとして機能させるために使用される、<a>（アンカー）タグのhref属性に記述する特殊なURIスキームです。この機能を利用することで、ユーザーがそのリンクをクリックした際に、デバイスにインストールされている電話アプリを起動し、指定された電話番号に発信できるようにします。特にスマートフォンやタブレットなどのモバイルデバイスでウェブサイトを閲覧している際、手動で電話番号を打ち込む手間を省き、ワンタップで電話をかけられるため、ユーザーの利便性を大きく向上させます。
サンプルコードでは、<a href="tel:+81-03-1234-5678">という記述で電話番号リンクを作成しています。href属性の値には、必ず"tel:"をプレフィックスとして付け、その後に発信したい電話番号を続けます。電話番号の記述方法としては、国際電話を考慮して国コード（日本の場合は+81）を含めて記述することが推奨されます。電話番号中のハイフン（-）は、人間が読みやすくするために含まれていますが、実際に電話をかけるシステム側では無視されるため、ハイフンなしで記述しても機能します。
このtel:スキーム自体は、プログラミング言語における関数のように、特定の引数を取ったり、処理結果を返す戻り値を持ったりするものではありません。これは、あくまでリンクの目的地として「電話をかける」という特定の動作をブラウザに指示するための記述形式です。ウェブサイトに問い合わせ先として電話番号を掲載する際、ユーザーが直接電話をかけられるようにする、非常に実用的で標準的な方法として広く利用されています。
このHTMLの電話番号リンクは、href属性にtel:スキームを使用することで、クリック時に電話アプリを起動させる機能です。特にスマートフォンなどのモバイルデバイスで非常に便利に利用できます。電話番号は国コードを含めて記述することが重要で、日本の場合は+81を付けます。この際、市外局番の最初の0は省略することが推奨され、例えば03は+81-3のように記述すると、より国際標準に沿い確実に動作します。デスクトップ環境ではSkypeなどの通話ソフトが起動したり、何も反応しない場合がある点に注意してください。表示されるテキストとリンク先の番号が一致していると、ユーザーにとって分かりやすくなります。