How Do I Add a HTML Link? Creating Hyperlinks with HTML Code

How Do I Add a HTML Link? Creating Hyperlinks with HTML Code
Page content

With HTML editors being so commonplace nowadays, even prolific web designers have to stop and look up the right HTML syntax to use sometimes. In fact, it’s even possible to create an HTML link in applications like Microsoft Excel without knowing any code. Despite this, there are still times when you have to add a hyperlink manually without the help of an HTML editor or some other utility.

For instance, if you’re commenting on a blog, you may want to link to a reference site that you’re quoting. While you could always just type out the link (like https://www.brighthub.com) and hope that people will cut and paste it into their browser, it’s much more efficient to hyperlink the text (like Bright Hub) so that readers can easily click on the link and have the new page open automatically.

If you’ve been wondering “How do I add an HTML link?” the next section will provide you with all the information you need.

The basic syntax for adding an HTML link is as follows:

Text for Link

In this case, URL is the place holder for the actual URL address, such as https://www.brighthub.com. Note that the URL does need to be enclosed in double quotes. Also, you would replace “Text for Link” with whatever user-friendly word or phrase that you want the reader to see instead of the raw hyperlink.

As an example, if we wanted to create a link that showed the text Bright Hub and directed the reader to https://www.brighthub.com, we would use the following code.

Bright Hub

If left unmodified, this code will cause the link to open the new page in the same browser window, navigating away from the current page. But, what if you want to create a link that will open a new page in the browser so that the current page stays open as well?

The HTML code for creating a link that opens in a new page is very similar to the code which opens the link in the current page. The general syntax for this type of link is as shown below.

Text for Link

With this syntax, the target attribute is used to specify where the linked element will be opened. The value “_blank” (which must be in parentheses) directs the link to open in a new browser window (or a new tab if you are using a browser that supports tabs). For example, the following code would be used to open the link to Bright Hub in a new window.

Bright Hub

This type of link can be very helpful if you want to reference a source for readers, but you don’t want them to leave the referring web page.

Image Credit: sxc.hu/nkzs