Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

How to add links in HTML

Monday, October 7th, 2019 by Servage

If you’re creating a page for the Web, chances are you’ll want it to point to other web pages and resources, whether on your own site or someone else’s. Linking, after all, is what the Web is all about.

There is one element that makes linking possible: the anchor (a).

<a>...</a>
Anchor element (hypertext link)

To make a selection of text a link, simply wrap it in opening and closing <a>…</a> tags and use the href attribute to provide the URL of the target page. The content of the anchor element becomes the hypertext link. Here is an example that creates a link to the Google website:

<a href="http://www.google.com">Go to Google Home Page</a>

Linking to Pages on the Web

Many times, you’ll want to create a link to a page that you’ve found on the Web. This is known as an “external” link because it is going to a page outside of your own server or site. To make an external link, you need to provide the absolute URL, beginning with http:// (the protocol).

Suppose I need make a link to an li element. Its syntax goes as follows.

<li><a href="http://www.micfosoft.com">Microsoft Website</a></li>

Targeting a New Browser Window

One problem with putting links on your page is that when people click on them, they may never come back. The traditional solution to this dilemma has been to make the linked page open in a new browser window. That way, your visitors can check out the link and still have your content available where they left it.

Before I provide the instructions for how to do it, I am going to strongly advise against it. First of all, tabbed browsers make it somewhat less likely that users will never find their way back to the original page. Furthermore, opening new windows is problematic for accessibility. New windows may be confusing to some users, particularly those who are accessing your site via a screen reader or even on a small-screen device. At the very least, new windows may be perceived as an annoyance rather than a convenience. Because it is common to configure your browser to block pop-up windows, you risk having the users miss out on the content in the new window altogether. So consider carefully whether you need a separate window at all, and I’ll tell you how in case you have a very good reason to do it. The method you use to open a link in a new browser window depends on whether you want to control its size. If the size of the window doesn’t matter, you can use HTML markup alone. However, if you want to open the new window with particular pixel dimensions, then you need to use JavaScript.

To open a new window using markup, use the target attribute in the anchor (a) element to tell the browser the name of the window in which you want the linked document to open. Set the value of target to _blank or to any name of your choosing. Remember that with this method, you have no control over the size of the window, but it will generally open as a new tab or in a new window the same size as the most recently opened window in the user’s browser.

Setting target=”_blank” always causes the browser to open a fresh window.

For example:

<a href="http://www.gmail.com" target="_blank">Gmail</a>

If you target “_blank” for every link, every link will launch a new window, potentially leaving your user with a mess of open windows.

A better method is to give the target window a specific name, which can then be used by subsequent links. You can give the window any name you like (“new,” “sample,” whatever), as long as it doesn’t start with an underscore.

The following link will open a new window called “display”:

<a href="http://www.gmail.com" target="display">Gmail</a>

Mail Links

Here’s a nifty little linking trick: the mailto link. By using the mailto protocol in a link, you can link to an email address. When the user clicks on a mailto link, the browser opens a new mail message pre addressed to that address in a designated mail program.

A sample mailto link is shown here:

<a href="mailto:someone@example.com">Contact me</a>

As you can see, it’s a standard anchor element with the href attribute. But the value is set to mailto:name@address.com.

Telephone Links

Keep in mind that the smartphones people are using to access your website can also be used to make phone calls! Why not save your visitors a step by letting them dial a phone number on your site simply by tapping on it on the page? The syntax uses the tel: scheme and is very simple.

<a href="tel:+18005551212">Call us free at (800) 555-1212</a>

This feature would indeed help the smartphone and tablet users a lot, since it enables one touch call functionality on such devices.

Reference for further reading

How to add links in HTML, 3.0 out of 5 based on 4 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.