HTML LINKS

November 1, 2016

How do we connect text to other text or webpages to other webpages? We do this using HTML hyperlink, which we usually call link. You might think we will use the “link” tag to do this. But that “link” tag is used for other purpose in HTML. For hyperlinks we use the “a” tag. Where “a” stands for “anchor”. It’s anchoring the link in the page at a certain location and connecting the anchor to a different webpage.

Syntax for links is

<a href=”url> link text </a>

The href attribute specifies the destination address of the link. For example

<a href=”http://qatechhub.com/introduction-html5-html-tags-attributes/ “>Learning HTML</a>

Here href specifies the address or url. What you see on the browser is just the hyperlink with text Learning HTML i.e. Learning HTML

LINK STYLES

By default links come underlined. Now, pay attention to the colours of the hyperlinks; we can see that

  1. When the link is unvisited it is blue
  2. When visited it turns purple
  3. And when active the link is coloured red

Note:  We can change the colours by using styles.

For example:

 

SETTING TARGET

You can also specify where to open the link, for example you may want it to open in the same tab or another window. This is done using the “target” attribute.

<a href=”http://www.google.com/” target=”_blank>open google</a>

The target attribute can have one of the following values:

  1. “_blank” -This opens the linked document in a new window or tab
  2. “_self” – linked document opens in the same window (default)
  3. “_parent” – Opens the linked document in the parent frame
  4. “_top” – Opens the linked document in the full body of the window
  5. “framename” – Opens the linked document in a named frame

USING IMAGES AS LINK

We may also use Images as links :

Now we shall see an example where we will be using all the above mentioned attributes:

DOWNLOADABLE LINK

You can create text link to make your PDF, or DOC or ZIP files downloadable. This is very simple, you just need to give complete URL of the downloadable file as follows:

<a href=”url to your file>Download PDF File</a>

BOOKMARK

Another use of links is “bookmarking”.

In case the web page is very long it helps the readers to jump to specific parts of a Web page.

To make a bookmark, first create the bookmark using “id attribute”, and then add a link to it.

When the link is clicked, the page will scroll to the location with the bookmark.

Example

PS: For any questions, queries, feedback and comments feel free to write us at support@qatechhub.com and amruta@qatechhub.com

Amruta Somani

About the Author

Amruta Somani

Leave a Comment: