An external scheme is a link on a webpage that moves you to an application outside of the browser.
Most links use the http or https scheme, which is handled inside of the browser.
<a href="http://example.com">Visit example.com</a>
We use external schemes all the time, not always knowing what to call them. You’ve probably written one to draft an email.
<a href="mailto:me@example.com">Email me@example.com</a>
Or maybe you’ve written one to place phone calls.
<a href="tel:+17146334816">Call (714) 633-4816</a>
Maybe you’ve even written one to launch your phone’s map application.
<a href="maps:?q=112+E+Chapman+Ave+Orange,+CA+92866">Locate 112 E Chapman Ave Orange, CA 92866</a>
Without further adieu, let’s get to know common external schemes and what they do.
The mailto:
scheme lets you automatically draft an email. It saves you the time and effort of copying an email address into your email application.
mailto:[address]?[options]
- address: the comma-separated list of email addresses getting the message.
Options:
- subject: the title or description of the message.
- body: the content of the message.
- cc: the comma-separated list of addresses getting a copy of the message.
- bcc: the comma-separated list of hidden addresses getting a copy of the message.
An email.
<a href="mailto:me@example.com">Email me@example.com</a>
An email with a subject.
<a href="mailto:me@example.com?subject=Bears">Email me about Bears</a>
An email with CCs.
<a href="mailto:me@example.com?subject=Bears&cc=spouse@example.com,kids@example.com">Email me about Bears and copy my family.</a>
An email with a subject.
<a href="mailto:me@example.com?subject=Bears&body=Bears+eat+beets.">Email me something important about Bears</a>
The tel:
scheme lets you automatically dial a phone number. It save you the time and effort of copying a phone number into your phone application.
tel:+[prefix][number];[options]
-
prefix: the international telephone prefix for the country being dialed. (USA is 1, UK is 44)
-
number: the telephone number to be dialed.
Options:
- ext / postd: the numbers to be dialed after a connection has been made.
A telephone number.
<a href="tel:+17146334816">Call (714) 633-4816</a>
A telephone number with an extension.
<a href="tel:+17146334816;ext=1">Call (714) 633-4816 ext 1</a>
You may see an alternative callto:
scheme floating around the interwebs. tel:
is the official scheme for telephone numbers. callto:
is a proprietary scheme used by Skype and Microsoft. Since most callto:
links are appropriately parsed, some developers choose to use in the hope of expanding their compatibility. On this subject, Stuart Parr’s asks:
Do you encourage standards compliance by using tel: or pander to the embrace and extend ethos of Skype and Microsoft and use callto:?
The answer is simple; use tel:
.
iOS Safari searches for phone numbers in regular text and automatically marks them up as tel:
links. If your site contains sequences of numbers that may be misinterpreted as phone numbers, consider disabling this feature by using the format-detection
meta tag.
<meta name="format-detection" content="telephone=no">
The maps:
scheme lets you automatically find a location on a map. It saves you the time and effort of copying an address or location into your map application.
maps:?[options]
Options:
- q: the address or location to find.
- saddr: the source address to be used for driving directions.
- daddr: the destination address to be used for driving directions.
- near: the address or location near the address or location being found.
- ll: the comma-separated latitude and longitude coordinates to center the map.
- t: the type of map to display.
- z: the level of zoom to use.
A location.
<a href="maps:?q=112+E+Chapman+Ave+Orange,+CA+92866">Find the Orange International Street Fair</a>
Driving directions.
<a href="maps:?daddr=112+E+Chapman+Ave+Orange,+CA+92866">Get directions to the Orange International Street Fair</a>
A location near another location.
<a href="maps:?q=Starbucks;near=112+E+Chapman+Ave+Orange,+CA+92866">Find a Starbucks near the Orange International Street Fair</a>
A proprietary scheme is an external scheme associated with specific, third-party application. Proprietary schemes are used infrequently on the web, because most computers and phones do not come with that particular third-party application installed. The best practice to launch proprietary schemes is to confirm the launch with the user.
Proprietary schemes are useful stopgaps for linking between a browser and an application, especially on mobile devices. For example, most mobile users aren’t logged into Facebook’s website because they use a proprietary Facebook app. Therefore, linking those users to your Facebook “web” page isn’t terribly useful. This is a situation when using a proprietary scheme is useful to automatically launch your Facebook page from within the Facebook app.
For an example of JavaScript appropriately launching a third-party scheme, see RECOMMENDATION.html.
For a list of hundreds of proprietary schemes, visit handleopenurl.com.
The fb:
scheme lets you automatically go to a page in the Facebook application. It saves you the time and effort of opening Facebook and searching or surfing for that page.
fb://[options]
Options:
- album/[ID]: the album with the corresponding ID.
- chat/[ID]: the conversation with the user or group with the corresponding ID.
- event/[ID]: the event with the corresponding ID.
- post/[ID]: the post with the corresponding ID.
- profile/[ID]: the user or group or page with the corresponding ID.
- upload/checkin/[ID]: the checkin with the corresponding ID.
- video/[ID]: the video with the corresponding ID.
A Facebook page. (use proprietary schemes with extreme caution)
<a href="fb://profile/119703784116">Orange International Street Fair on Facebook</a>
The twitter:
scheme lets you automatically go to a page in the Twitter application. It saves you the time and effort of opening Twitter and searching or surfing for that page.
twitter:/[options]
Options:
-
user?screen_name=[SCREENNAME]: the user with the corresponding SCREENNAME
-
user?id=[ID]: the user with the corresponding ID
-
post?message=[TEXT]: the new post page populated with TEXT
-
in_reply_to_status_id=[ID]: the status with the corresponding ID being replied to
-
status?id=[ID]: the status with the corresponding ID
A Twitter page. (use proprietary schemes with extreme caution)
<a href="twitter:/user?screen_name=oisfinc">Orange International Street Fair on Twitter</a>