Displaying a phone number on your website can help increase trust in your business, attract prospective customers, and delight existing ones.

To make it as easy as possible for users to get in touch with you or someone on your team, you can make the phone number clickable in HTML. This is a great UX strategy considering that mobile accounts for approximately half of web traffic worldwide. Meaning, over half of your website visitors will be using the same device to find your business online and to place the call.

In this post, we’ll walk through the process of creating HTML telephone links, or “click to call” links.

Download Now: Free HTML & CSS Hacks

1. Create an anchor element.

To start, create an anchor element with an empty href attribute. It will look like this:

 
<a href=""></a>

2. Enter your phone number in the href attribute.

Place the phone number inside the href attribute inside the opening a tag. This href (hypertext reference) attribute ensures the hyperlink is functional. It will look like this:

 
<a href="6031112298"></a>

3. Add tel: before the number inside the quotation marks.

Now add tel: inside the href attribute, before the phone number. Both the tel: and phone number should be inside the quotation marks with no spaces or dashes. It will look like this:

 
<a href="tel:6031112298"></a>

4. Include text in the anchor element.

You can include text in the anchor element. Although it’s not required, it can make the call-to-action more obvious to users. Here’s the code side by side with how it would appear to users on the front end of a website.

See the Pen How to Link a Telephone Number in HTML [With Linked Text] by HubSpot (@hubspot) on CodePen.

If you’d like to include the telephone number and have it be the only text that’s linked, then wrap the phone number in the anchor element and place it inside a paragraph tag. It will look like this:

See the Pen How to Link a Telephone Number in HTML [With Text] by HubSpot (@hubspot) on CodePen.

How to Link a Telephone Number With an Extension in HTML

If the telephone number you’d like to make clickable has an extension, then you’ll need to take an additional step.

  • You create an anchor element.
  • Enter tel: and the phone number in the href attribute.
  • Now, after the phone number, add the letter “p” and the extension number. It will look like this:

 
<a href="tel:6031112298p000"></a>

When clicking this “click to call” link, the user will hear the number dialed, then a one-second pause, then the extension dialed.

How to Link a Telephone Number With a Country Code in HTML

If the telephone number you’d like to make clickable has a country code, then you’ll need to take a different additional step.

  • You create an anchor element.
  • Enter tel: and the phone number in the href attribute.
  • Now, before the phone number, add the plus icon (+) and the country code. It will look like this:

 
<a href="tel:+16031112298p000"></a>

How to Add a HTML Telephone Link to Your Website

An HTML telephone link, or “click to call” link, can be included in various parts of your website. Your contact page and header or footer are among the most common. Let’s look at examples of including these clickable links on a WordPress website.

Contact Page

The exact steps to add a HTML telephone link to a contact page will vary depending on what platform and template you use. Below is the general process.

  • To start, select a predesigned contact page template.
  • Then click into the block with the example phone number.
  • Click the three dots icon.
  • Click Edit as HTML.

How to Add a HTML Telephone Link to Your Contact Page in WordPress: Edit as HTML

  • Replace the existing phone number with the anchor element: <a href="tel:6031112298">(603)111-2298</a>

How to Add a HTML Telephone Link to Your Contact Page in WordPress: Add anchor element

  • Click Save Draft and Preview.

How to Add a HTML Telephone Link to Your Contact Page in WordPress: Preview click to call link

Header and Footer

The exact steps to add a HTML telephone link to a header or footer will vary depending on what platform and template you use. Below is the general process.

  • In your dashboard, click Appearance > Widgets.

How to Add a HTML Telephone Link to Your Footer in WordPress: Click widgets

  • In the section labelled “Footer,” add any blocks that you want. For the sake of this demo, I’ll only add a paragraph block.

How to Add a HTML Telephone Link to Your Footer in WordPress: Add blocks to footer widget

  • When you’re ready, click Update.
  • Now go to one of your pages.
  • Scroll down to the footer area and click the paragraph block.

How to Add a HTML Telephone Link to Your Footer in WordPress: Edit paragraph block

  • Add your phone number, then click the three dots icon.
  • Click Edit as HTML.

How to Add a HTML Telephone Link to Your footer in WordPress: Click edit as HTML

  • Wrap the phone number in an anchor element and add href="tel:6031112298" to the opening tag.

How to Add a HTML Telephone Link to Your Footer in WordPress: Add anchor element

  • Click Save Draft and Preview.

How to Add a HTML Telephone Link to Your Footer in WordPress: Preview call to click link

How to style a HTML Telephone Link

To style a HTML telephone link, you’ll have to add some custom CSS.

For example, say you want the telephone number to appear bolded, orange, and with no underline. Here’s the CSS and how the “click to call” link would appear on the front end:

See the Pen How to style a HTML Telephone Link by HubSpot (@hubspot) on CodePen.

How you add this CSS to your website depends on the platform you're using.  If building your site in WordPress, for example, you’d add this CSS to the Additional CSS tab in the WordPress Customizer.

How to style a HTML Telephone Link in WordPress Customizer

Adding “Click to Call” Links to Your Website

Displaying a phone number on your website can help attract and delight prospective and existing customers — making them clickable is even better for UX. The good news is that creating telephone links is easy. You just need to know some HTML and CSS to create and style these links and embed them in different areas on your site.

New Call-to-action

 css introduction

Originally published Nov 2, 2021 7:00:00 AM, updated April 20 2022

Topics:

HTML