A Brief Introduction

Take a look around any web page that exists today and you’re guaranteed to see a link or two. In fact, the initial concept of the internet began with linking documents together, and to this day that is still the foundation of the internet. Think about how you got here to this page today, you must’ve clicked some type of link, am I right? Links literally ARE the internet, and learning how to use them is essential. The term “link” is short for “hyper link”, and describes an image or text that, when clicked, is tied to another document somewhere on the world wide web. Let’s take a look at the HTML hyper link and see how it works.

Step 1: The HTML

Have a look at the following HTML code. You’ll see that we’ve added a simple div, and inside of this div, we’ll go ahead and add our links. First, here is the basic HTML page:

Great, now let’s talk about links. An HTML hyper link is, exactly as it sounds, a link to another HTML document. Therefore, when creating a link, we need to give it very specific attributes that tell it where it’s linked to. Here’s what the most simple HTML link looks like:

By default, the word “Google” will appear as underlined text in the browser allowing you to click the link and visit google.com. The href attribute is the most important part of the link. It determines the page a user will land on once they click the link. Href means “hypertext reference”, which is suiting since your link is making a reference to a hypertext document ( HTML). Let’s plug our link into our HTML file and see what we get:

Now, load the page up into your browser and click on the word “Google”. You should be taken to the Google homepage based on the href attribute in our <a> tag. The word Google could really be whatever text you’d like to have there. You could also wrap link tags around images, which we’ll visit in a later tutorial.

A Few Last Words

HTML links are the backbone of the internet, and are essential to creating web pages and applications. Get a good grasp on using them, the skills will certainly come in handy. Join us next time where we’ll take a closer look adding images to your pages and, as promised, how to link those images as well. See you then!

Download Source Files