A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore international telephone number markup using a short example that you can inspect and change.
The Idea in Plain English
An international telephone link generally uses the tel: URL scheme followed by a country calling code. The visible number should be easy for people to read, while the href should be suitable for dialers.
You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<address>
<p>Call our club:</p>
<a href="tel:+12025550150">+1 202 555 0150</a>
</address>What Each Part Does
- The anchor is a link when its href points to a destination.
- The address marks relevant contact information.
- A paragraph keeps one idea together as readable text.
- href is the URL or fragment destination of a link.
Compatible devices may offer to dial the number when the link is activated.
Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.
Try It Yourself
Try this next: display a mixed-language document and inspect its behavior focused on International Telephone Number Markup, including a working example and an incorrect example to correct. Then inspect the page and explain what changed.
Common Beginner Mistakes
- Treating a tel: link as proof that a phone number is valid in every country.
- Changing several parts of the example at once, making it difficult to see which part caused a different result.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- An international telephone link generally uses the tel: URL scheme followed by a country calling code. The visible number should be easy for people to read, while the href should be suitable for dialers.
- Compatible devices may offer to dial the number when the link is activated.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.