How to Add Hyperlinks to Your Website

While a web page is a single web document, a website is a collection of web pages, interconnected using what are known as hyperlinks. We’ve all seen links on a website, and you can add links to your web pages to connect them to the rest of your website.

Adding links is relatively easy, whether you’re doing it with hand-coded html or using a content management system link WordPress or a website builder like Dreamweaver. Whatever your approach, there are a few things you should know about how to create proper links.

The Basic Structure of a Hyperlink

By default, when you create a hyperlink on your website, the text that you’re linking will typically appear in an underlined blue format. This lets people know that this is a link to another page and can be clicked (for example, here’s a link for website help that goes to my homepage).

The basic html structure of a hyperlink is as follows:

If you’re coding your web page by hand using html, you’ll type in the above tag. If you’re using a website editor tool, you may also click a little icon with a link button or text. Whether you create it or the tool generates it, the end result is the same html code with the same structure.

In the href part of the link you will specify the address of the page you’re linking to. The title is optional, but you can enter some text or useful keywords that will appear when the link is hovered. The anchor text is the text that will actually be shown on the page, underlined and blue, which people will be able to click.

When you’ve created your link, you’ll now see the underlined text on the web page, and a visitor to your website can click the link to get to the other page. Good job.

Relative Versus Absolute Hyperlinks

When you’re adding links, you may want to think about the difference between a relative URL versus an absolute URL. Here’s the difference:

• Relative url: <a href=”your-web-page.html”>Visit this page</a>
• Absolute url: <a href=”http://www.yourwebsitename.com/your-web-page.html”>Visit this page</a>

A relative URL doesn’t include the actual website address in the URL, while an absolute URL does. Both have distinct advantages and disadvantages.

If you use a relative URL, even if you end up changing your website address down the road, the link will still work, because it’s not based on the main website URL. If you change the page, however, and move it deeper into your website structure (say, you move the page into your /articles/ section), the link will now be incorrect.

If you use an absolute URL, the URL will continue to link to the appropriate page even if you move the page containing the link. That can be nice, but it can also be a pain to go back and change all of the URLs if you change your website address.

If you’re setting up a simple website with a basic structure and don’t plan to do a lot of reorganization of content, you’ll probably want to use relative URLs.

Hyperlink Anchor Text

The hyperlink anchor text, which is the blue underlined text that people actually click on, is of particular importance, both for your website visitors and to the search engines. It tells your visitors what the page is that they’re clicking to, and it tells the search engines what the page is about (keywords!).

Often times people will say something like “you can view your products here” and make “here” the link, but this is poor practice. “Here” doesn’t help people understand what the page is, and it definitely doesn’t give the search engines insight into what keywords to rank the page for.

You can improve your links by using keywords in your anchor text. Try something like “view our snow ski equipment” instead.

Hyperlink Targets

Another useful thing to know about hyperlinks is what’s called the target. You can add target=”” to your link html (or specify it in your website builder) to tell the browser whether the page should be opened in the current window, or in a new one.

Generally speaking, if the page links to another page in your own site, you can leave this out and let the link open in the current window. If you’re linking to another website, say, to reference an article someone may want to see, specify target=”_blank” to tell the browser to open the page in a new window. This way, someone can see the article, but they don’t leave your site in the process!

Follow Versus No Follow

Another important aspects of hyperlinks is the notion of “follow” and “no follow”. This tells the search engine whether you are endorsing the link and it should be followed and be given value by your site.

If you’re linking to an important page, or another page in your own site, you’ll usually want the link to be followed (which is the default behavior). But if the links are, say, in random people’s comments at the end of your blog post, you’ll probably want to add rel=”nofollow” to the link to tell the search engines, “hey, I let this person put the link there, but I don’t endorse it and you shouldn’t follow it!”.

Styling Hyperlinks

Lastly, a word on styling hyperlinks. Whether you’re building your own site or using a template or theme, it’s important to keep in mind that the default blue hyperlink with underlined text is the most standard style that is immediately recognized as a link by most people.

When I first started dabbling in CSS and realized I could change link colors and remove the underline, I got pretty excited and almost always changed how links appear to fit with the color scheme of the site design. What I realize now is that if you do change the link color or behavior, you should use caution and make sure that your links will still clearly be viewed as a link by grandpa who isn’t used to the fancy stuff.

Happy hyperlinking!