Web Development and Design #4: HTML Links

HTML Links are Hyper-links. They allow you to move from one web page to another.

Writing Links

Links are created using the <a> element. Anything within <a> and </a> is click-able unless otherwise defined. The href attribute holds information that helps the browser know where a link is linked to.

Absolute URL

URL stands for uniform resource locator. Every page has a unique URL. This is the address you type into a browser.

An absolute URL starts with the domain name, and can be followed by the path to a specific page. An absolute url is used in the href attribute when linking to other pages on a different site from the one you are on.

Relative URL

A relative URL starts with a forward slash, instead of a domain name, and then followed by the path to a specific page. A relative url is used when linking to pages on the same site.

If all the pages are in the same folder, then the URL is just the name of the file. Otherwise you use a slightly more complex syntax to indicate where the page is in relation to the present page.

Email Links

To create a link that starts a users email program and addresses an email to a specified email address is quite simple. To do that, you will use the same <a> tag. The only difference is in the value of the href attribute. The value will start with the keyword — “mailto:”, followed by an email address.

The Target Attribute

Using the target attribute, you can, explicitly, state where a link should open. The target attribute can have one of the following values:

  • _blank: opens the link in a new tab.
  • _self: opens the link in the same tab.
  • _parent and _top

Linking To A Specific Part Of The Same Page

In a long web page, it can be stressful to scroll from one section of the page to another. Thankfully, a developer can create a bookmark using the id attribute and then adding a link to it.

Create a bookmark

Create a link to the bookmark

Linking To A Specific Part Of Another Page

Using the same technique as above, you can easily create a link that will take you to a bookmark on a another page. In the href attribute, you use the url of the page you are linking to, followed by the id of the bookmark.

That’s it. If you have any questions, don’t hesitate to drop me a line below. Next tutorial will be about Directory Structure.