2024.06.18 2024.07.01

電話番号(< a href=”tel:” >)のハイフンはいる？いらない？【HTML】

ken-admin-suto

いつも電話番号のハイフンを入れるか迷うんだけど・・・

電話番号のリンク(< a href=”tel:” >)(aタグ)をタップしたら電話をかけることができます。

電話番号のリンクを入力する際、ハイフンの有無で迷っている方が多いのではないでしょうか？

今回は、ハイフンの有無について下記にまとめました。

Contents

結論：ハイフンはあってもなくてもOK

結論はどちらでもOKです。

1<!-- ハイフンなし -->
2<a href="tel:0300000000">03-0000-0000</a>
3
4<!-- ハイフンあり -->
5<a href="tel:03-0000-0000">03-0000-0000</a>

1<!-- ハイフンなし -->
2<a href="tel:09000000000">090-0000-0000</a>
3
4<!-- ハイフンあり -->
5<a href="tel:090-0000-0000">090-0000-0000</a>

1<!-- ハイフンなし -->
2<a href="tel:0120000000">0120-000-000</a>
3
4<!-- ハイフンあり -->
5<a href="tel:0120-000-000">0120-000-000</a>

ハイフンを入力する際は上記のように、ハイフンの位置に注意が必要です。

電話番号を入力する際は、半角での入力が必須。

1<!-- 半角 -->
2<a href="tel:03-0000-0000">03-0000-0000</a>
3
4<!-- 全角 (NG例) -->
5<a href="ｔe l：０３ー００００ー００００">03-0000-0000</a>

上記はやや大袈裟ですが、リンク内において稀に全角が混ざってしまう場合もあるので、全て半角で入力しましょう。

けん

実際に電話がかかるかどうか、テストをするのが確実ですね！

以上になります。