Creating links

Links are the heart of the Internet. They help you follow a flow of information and details in a way books or magazines are not able to do.

On a web page, links are indicated by the tag <a href=""></a>, which means anchor. The tag has two parts and you use it as follows:

Linking to another page on your same website

If you want to send the user to another web document in your same website, you use the anchor tag and point him to the next file. For example:

<a href="mycontactpage.htm">contact me here</a>

This is called a relative link, as the destination file is related to your same website. The text which appears in the tag will be underlined in blue, unless a styles file gives the browser other instructions.

Linking to a page on another website

If, in turn, you want to send the user to a web page which is on another website, you use the anchor tag to point him to the full URL of the web document. If, for example, you would like to send a user to this site, you would need to do the following:

<a href="//heptagrama.com/how-to-make-a-link.htm">How to make a link</a>
<a href="//heptagrama.com/">Heptagrama</a>

This is called an absolute link, as the destination address is written completely in the href="" instruction of the anchor tag.

Notice the first example points straight to this specific page on Heptagrama; while the second only points to the domain name. If you are pointing just to a domain name, you can optionally include a slash at the end, like in the example. That last slash is called a trailing slash, and it means you are sending the user to that domain's home page.

Linking to another section of the same web page

To link to another section of your same web page —a subheading, for example— there are two options:

HTML and XHTML users will create a <a name=""></a> tag in the desired section of the web page. Then, they will link to it using <a href="#"></a>, including the name of the section used in name="".

For example, to jump from the top of the page to the "credits" section of the web page, first you will create a...

<a name="credits"></a>

...tag in the credits part, and then you will link to it using...

<a href="#credits">go to the credits</a>

This # symbol indicates the browser the link is on this same web page.

HTML5 users will not use name="" but id="". The advantage of using id="" is that they can use the id="" to name a desired paragraph, subheading or even picture. The link is only placed once.

For example, to go to the last "credits" section of a web page, you could just place an id="" on the heading...

<h3 id="credits">Credits</h3>

...and then link to it...

<a href="#credits">go to the credits</a>

That's it. Now let's see how to add pictures to our new web page.


Learn + Computers and the Internet + Web development