Hyperlinks in HTML with the a tag

Two of the most important HTML elements are hyperlinks and images. Let’s have a closer look at these, since you’ll encounter them a lot.

Hyperlinks with <a href=”…”></a>

Just to make sure: by ‘hyperlink’, or link in short, we mean an element that causes the browser to navigate to a different web address (URL) when you click it. Like this: click me,I’m a hyperlink

To turn something into a link we use the <a> tag with the – obligatory – href attribute to specify where it should go, as follows:

<a href="http://www.google.com">click me, I'm a hyperlink</a>

To specify that the link should open in a new window/tab (the browser decides which one), use the target attribute:

<a href="http://www.google.com" target="_blank">I will open in a new page!</a>

To add a little hint what the link goes to when the user hovers over the link with the mouse, use the title attribute:

<a href="http://www.google.com" target="_blank" title="Go to search engine Google">Hold your mouse over me to see where I go!</a>

As you see, one HTML element can have quite a lot of attributes! But that’s ok, this happens all the time and is perfectly valid.

Relative and absolute, internal and external links

URLs tend to start with http://, and so that is what will typically come in the href attribute as well, like the http://www.google.com in the previous examples. Unless the web site you are working on is Google, in which they really made a bold hiring decision with a guy who visits sites targeted explicitly at idiots, this is an external link, i.e. going away from your website.

URLs that are specified ‘completely’ like that are also called absolute URLs.

However, the way a website – of the type we are learning to build here – works is, it consists of a large number of different .html files. At the very least one for each page of the web site. And those files contain links to the other files, for example a navigation menu is nothing else then a list of hyperlinks to different pages of the same site.

For these, we have relative URLs, when you link between ‘internal’ files that make up your web site. For example if you have 2 html files in one folder called page1.html and page2.html, you can put the following in the HTML code of page 2:

<a href="page2.html">to page 2!</a>

and this will work fine. You can even work with folders using the / character, as follows. Say your website folder contains an index.html file, and a folder named ‘pages’ which in turn contains some html files like page1.html, page2.html… Then you can link from within index.html to those as follows:

<a href="pages/page1.html">to page 1!</a>

You may want to open your file explorer and experiment with this! Can you guess in which situation you would use <a href=”../index.html”>?

Once you figured out the answer, or in 2016, whichever comes sooner, we will have a look at using images in your web site with the <img> element!



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s