HTML Links


Intermediate

Lists

Tables

Forms

HTML Colors

Advanced

Audio and Video

SVG

Canvas

The <a> Tag

Links are a vital part of every website, the <a> Tag can be applied to text and images to allow the user to click on them and move to another file or webpage. Attribute href is used to identify the page we want to be directed with the link and in it we can use an absolute link (i.e. https://www.codeisland.it/html) or a relative link (i.e. html/index.html or nextpage.html").

To use a text as link you need to add the text between the opening <a> tag and the closing </a>, to use an image as link you need to do exactly the same thing adding instead of text the <img> element between the <a> opening and closing tags.

A link is usually pretty visible in a webpage, as standard their color is blue and change into purple when they are visited, links are also usually underlined to make them completely different from the close text. Those are the standard value of HTML links however in most cases those values are overwritten by the CSS style used in the page, it is in fact possible to style the <a> tag in CSS to make the links look as we want.

Text link:

<a href="nextpage.html">Hypertext</a>

Image link:

<a href="nextpage.html">
  <img src="image.jpg">
</a> 

Example of a link:

Link example

The <a> Target Attribute

As we have seen the <a> tag cannot be in place unless we use the href attribute pointing to a webpage/file in the value, a link without destination cannot exist, but there are also other attributes that make linking more complex.

The first in importance is the target attribute, this specify is we want to open the link in a new window or a new tab. It is very useful when we want to open another website with a link, leaving the user with our page still open, so that when they finish to read the article or resource we linked, closing the page they would still have our website open. 

The 4 Values of the target attribute are:

"_blank" that displays the linked document in a new browser window
"_self" will open the document in the same window we are actually using (that's also the default value so it can be omitted)
"_parent" open the link in the parent frameset
"_top" open the document in the top frame of the browser

Internal links of a website do not usually use the target attribute because when browsing a website we want to keep it all in one browser page, when a link is pointing to an external website instead we always use the blank value to allow the user to come back to our webpage that remains open in the background.

External link example with blank target:

<a href="https://www.codeisland.it" target="_blank">
  Code Island
</a>

Clicking on the text you are going to open the link in a new browser page.


Connect