All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Clickable Phone Number HTML

Last Updated : Mar 11, 2024

Clickable Phone Number HTML

In this tutorial we will show you the solution of clickable phone number HTML, in this series of HTML tutorials, today we will learn about how we are able to make a clickable phone number in HTML.

As, we all know that in some websites nowadays, most of websites have contact us page.

And in that page they provide there mobile numbers. When we click on that phone number then directly opens in our calling applications.

This is a better way to make responsive website. Now, let us understand how to done this.

Step By Step Guide On Clickable Phone Number HTML :-

As for this purpose, we use anchor tags. Now, the concept is how to use anchor tag so that after click on number direct calling application gets open.

So, let us find solution of this problem with help of code given below. Here, we use some html tags and attributes to done our concept.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document</title>
        </head>
          <body style="text-align: center;">
    <h1> clickable phone or mobile number in html </h1>
    <p>
        Click on the mobile number given below
    </p>
    <a href="tel:+919999888777"> Call us at 9999-888-777</a>
    <!-- here we use tel property in anchor tag -->
    <h1>
        or
    </h1>
    <a href="tel:+01615050505">Another number is 0161-5050505</a>
</body>
      </html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
  6. Here, first we use style property in body and used this for align content in center.
  7. Under body we create a heading tag to give heading in webpage and then a paragraph tag for reference. Now, our main concept is here. Here, we create an anchor tag, but with some special properties.
  8. As general, we use href attribute in anchor tag and under this href we use tel: . Now, after this we write number that is phone or mobile number with country code.
  9. Here, we use +91 that’s for india. And then phone number without any special character and spaces.
  10. After this, in anchor tag we type some text like call us at, call me, etc.
  11. After this we give another example by using same method for landlines.
  12. For landlines, you have to type first 4 digit code and then number. Rest is same as above.
  13. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we can say that after reading this article we are able to make a phone number clickable in html.

Also, there is an assignment for you in which you have to use this same concept for email. I hope this tutorial on clickable phone number HTML helps you.