HTML Links

The characteristic of non-linear navigation through links (or traditionally, hyperlinks) sets the web apart from the other media and enables searchers to jump fast from one source to another and increases chance to get required information instantly.

Link is like lifeblood of web as it allows one to go from one page to another or to introduce different actions. The following is a list of outcomes happen when visitors click links –

• Jump to other pages
• Opening email programs
• Watching movies
• Listening songs
• Downloading files
• Using different web based applications

Creating a link

With the help of the a tag a link is created. A typical link looks like the following-

<a href=”http://google.com”>Search with Google></a>

Output:
Search with Google

Parts of a link

As you can see in the above example, there are three parts in a link-

1. An Anchor element which has an opening <a> tag and closing </a> tag.
2. A label or link text which is the content between the opening and closing anchor tags. It describes the link and displays as blue with underline (when text is used) in the browser. In the example above, “Search with Google” is the label. When you display a link in the browser, the label is the only visible and clickable part of a link (see the output above).
3. A URL (Uniform Resource Locator) which is the value of the href attribute (short for hyperlink reference) inside the opening anchor tag. It is the address of the destination website or any file type (PDF, MP3, GIF, MP4 etc). In the example, http://google.com is the URL.

When you click on the label in the browser, the link takes you to the URL which is the destination.

Anatomy of a Link

URL Types and Directory Structure

The following image shows directory and file structure of a fictitious website (site.com). You’ll learn how to link your webpage with any the following files in the website or how to interlink between its files.

Every resource (webpage or any file) on the web has a URL. You can link a webpage to another webpage in the same website or in the different website. Three different types of URLs are found online to link one resource with another-

1. Absolute URL,
2. Relative URL, and
3. Root-relative URL

1. Absolute URL

Absolute URL is the full path or address of an online resource. It is the standalone address to a resource. So, you can type absolute URL in the browser to find a resource or you can mention absolute URL in the anchor tag to link with a resource online.

Example-

(a) To find the home page of the above fictitious site, type its absolute URL like this –

http://site.com/index.html

(b) To link with the home page of the above site from any external webpage, write the following link-

<a href=”http://site.com/index.html”>Site’s home page</a>

Output:
Site’s home page

Anatomy of an absolute URL

There are at least two parts of an absolute URL- the domain name and then the resource name (see the first URL of the following image).

­­After the domain name there may have directory name if the resource is in that directory then file name (see the second URL of the above image).

Linking to the specific part of a page in a different website

If the destination webpage is a long one, you may want to send users to a specific part of that page saving them scrolling up and down to find that section.

1. At first, assign an id attribute to the element of the destination page you want the user to go. In HTML, every element can have an id attribute.Suppose, the following snippet is in the fictitious destination webpage http://site.com/about-us.html. The h2 element has the id portfolio.

   <h2 id=”portfolio”>Our services</h2>
   <ul>
       <li>Web designing</li>
       <li>Web development</li>
       <li>PSD conversion</li>
       <li>Logo designing</li>
   </ul>

2. Now, to link with the above webpage so that user go to the h2 section of the page directly, mention that id name in the href attribute preceding with the hash sign (#) after the page URL like following-

   <a href=” http://site.com/about-us.html#portfolio”>See our services</a>

When you click the “See our services”, you’ll be redirected to the h2 section of that page.

Absolute URL’s features:

• It’s a very a reliable way to link a resource online.
• An absolute URL could be very long and boring to type which is prone to error.

2. Relative URL

Relative URL as the name says indicates address/path of a resource in relation to the current resource. When you link a resource in the same website, you don’t need to write the long absolute URL, you can mention relative URL of that resource.

Depending on the location of the destination file, see how to write different relative URLs-

(a) Both files in the same directory: When the source and destination files are in the same directory, just mention the file name. For example, both about-us.html and index.html are in the root directory of the website and if you’re linking about-us.html page in the index.html file, just mention the file name, like the following-

 <a href=”about-us.html”>Visit about us page</a>

(b) Destination file is in sub directory: Whenyou want to link to a file which is in the subfolder of the current file, then mention the subfolder name before the file name. For example, to link web-design.html page which is in the portfolio subfolder in relation to the index.html page, mention the following code in the index.html page-

 <a href=”portfolio/web-design.html”>Visit web design page</a>

(c) Destination file is in parent directory: When you want to link a file which is one level up (parent directory) to the current page, mention …/ (dot dot forward slash) to indicate one step up and then write the page name. For example, if you want to link about-us.html page which is one step up in relative to the web-design.html page, write the following code in the web-design.html page-

 <a href=”../about-us.html”>Visit about us page</a>

Linking to the specific part of the same webpage

Sometimes you want to send user to a specific part of the same webpage if it is a long webpage. For example-

• To send the visitors to the top of the long page saving him scrolling.
• To enable visitors to jump directly to the answers of the questions listed at the top of a FAQ page.

In the following you’ll see how to jump to the related answers of the questions listed at top in a FAQ page.

1. At first, assign id attributes to all the answer elements you want the visitor to jump to.

   <p id=”answer1”>It will take upto 24 hours to convert a PSD to HTML.</p>
   <p id=”answer2”>Our readymade wordpress themes prices from $20 to $77.</p>

   As, you can see each p element contains an answer and each one has its id attribute.

2. Then, to link an answer above with its related question, mention the id of the answer with a preceding hash sign (#) in the href attribute of the a element that contains the question, like following-

   <a href=”#answer1”>How many days it takes to convert a PSD to HTML5?</a>
   <a href=”#answer2”>What is the price of a wordpress ecommerce theme?</a>

As you can see the first question has the href value #answer1, so when a visitor clicks the link, he’ll be jumped to the first p element whose id is answer1.

Relative URL’s features:

• It requires fewer texts to mention a resource, so fewer risks of errors.
• As path of a webpage is based in related to another webpage in the website, so, relative URL is domain independent. You can change the domain still the page will work smoothly without any issue.

3. Root-relative URL

Root-relative as the name says indicates address/path of a resource in relation to the root of the domain. This type of URL starts with a forward slash which indicates the root of the domain. So, no matter which directory you’re in, you can mention any resource of the website starting from the root of the domain with this root-relative URL. For example, to link with the web-design.html page inside the portfolio directory, you can use the following link in any webpage-

<a href=”/portfolio/web-design.html”>Visit web design page</a>

Root-relative URL’s features:

• It is a safer type of URL to indicate a resource in compare to the relative URL. As, in the relative URL, when you try to mention a resource which is in a deeper level of directory, a relative URL might be error prone.
• It requires fewer texts to mention a resource in respect to the absolute URL.
• Unlike absolute URL, it doesn’t require to adjust the URL when changing the domain name.

Exception: Web server has an option to display the default resource if there is no specific one is mentioned. That means, if you don’t mention the resource name at in the URL, the default one will be displayed. The default pages usually start with index or default (ex. index.html, index.php, default.html, default.php, default.asp etc.). So the following two will display the same page-

• http://site.com/
• http://site.com/index.html

Attribute of the a (anchor) element

Now, let’s see the attributes of the a (anchor) element-

Link States

A link has five states. Depending on a user’s action on a link, the state changes. When you develop a full website, these states play very important roles. The five states of a link are-

1. Link: When a webpage first loads, the links inside that page are in link state. This is the default state of a link. By default, the link text is in underlined blue color.
2. Visited: After clicking a link, the state of that link changes to visited. By default, the visited link color is purple.
3. Hover: When you bring the mouse over a link, the mouse cursor becomes a hand and the link’s state changes to hover state.
4. Focus: When you select a link with keyboard, the link is in focus state.
5. Active: The state between you press and release a link with the mouse is called active state of that link. The default link color during active state is red.