Search This Blog

How to create HTML links in HTML web page?

Hyperlinks are most widely used in web-pages, PDF documents, word documents, excel spread sheets to provide easy navigation from one document to another.

The HTML code contains some or all characteristics of a link
  1. link destination specified by href attribute pointing to a URL of another webpage
  2. link label specifies the name of link
  3. link title displays the text in tool tip when you hover over the link ( optional )
  4. link target specifies to open link in current tab or new tab of browser ( optional )
  5. link class or link id used to decorate the links with CSS ( optional )
HTML links can have absolute or relative URL path

Linking to web-page on same website
<a href="introduction.htm">Link to HTML introduction page</a>

Linking to web-page on same website one folder below 
<a href="foldername/introduction.htm">Linking one level below</a>
You need to specify the folder name in which web-page is present in the href attribute.

Linking to web-page on same website two folders above 
<a href="../../introduction.htm">Linking two level above</a>
You need to specify the ../ for one level above and ../../ for two levels above

Linking to web-page on different website 
<a href="www.w3schools.com">W3Schools</a>
It will link to W3Schools home page. This is an example of absolute path. Rest above are with relative paths.

HTML links with target attribute
<a href="www.w3schools.com" target="_blank">W3Schools</a>
To open in new tab or browser target="_blank" attribute along with link needs to be used. If target characteristic of links is missing then link opens the document in same or current tab.

Other target values like target="_top" opens the webpage in the full body of window. It is also used to break out of frame.

HTML links with Images as links
<a href="introduction.htm"><img src="imagename.png">Image links to HTML introduction page</a>
img attribute is used for specifying the image file name as shown in HTML links. When a user clicks on the image, it will open the web-page specified in href attribute.