HTML links

HTML links connect the current page to the destination resources. These resources may be the other pages of the same website or the external web resources. These links form navigation bar to navigate the other pages.

There are three elements that represent links. These elements support href (hyper reference) attribute that contains the address of external resources.

<a> element

a element defines a link that connects the current page with the other pages of the site. a means anchor between two resources.

text link

We can make text links by using the text as the content of a tag.

Example

<a href="https://www.web4college.com/" title="web4college"> Go to web4college </a>

Try </>

href attribute specifies the address of the linked resource. title attribute defines the nature of the link.

image link

We can also make image links by using the image as the content of a tag.

Example

<a href="https://www.web4college.com/" title="web4college"> <img src="files/logo.png" /> </a>

Try </>

<img> tag adds an image in the page. src attribute specifies the location of the image.

<a> related attributes

target attribute

target attribute defines the browsing mode of the linked document. It indicates that the linked document should be opened in the current window or in a new window.

Example

<a href="http://www.web4college.com" target="_blank">link opens in new window</a><br>
<a href="https://www.web4college.com" target="_top">link opens in the top most window</a>

Try </>
  • blank value indicates that the link should be opened in a new window.

  • top keyword allows the link to open the link in topmost frame.

Visit target attribute page to understand the concept of the target attribute.


<base> element

base element represents the document base URL. It is the basic URL for all of the links that are empty i.e. links that don't have URL.

Example

<head>
 <base href="http://www.google.com" target="_blank">
</head>

Try </>

link element links the current page to the other documents. link element should be placed in the <head> tag.

Example

<head>
 <link rel="stylesheet" href="files/test.css">
</head> 

Try </>

In the above example, the file test.css styles the div block. test.css file contains the following code.

<style>
.style {
width:80%;
background-color:lightgreen;
height:200px;
}
</style>

Copy and paste the following code in notepad and assign test name (with the extension .css) to the file.

<link> related attributes

hreflang attribute

hreflang attribute represents the language of the linked resource.

<head>
 <a href="https://www.web4college.com/html/" hreflang="en-US">HTML</a>
</head>

It is used by the browser. The user does not see the effect of this attribute.

media attribute

link element may be used to style different media. It can import alternate stylesheets for different media.

Example

<head>
 <link rel="stylesheet" href="files/screen.css" media="screen" >
 <link rel="stylesheet" href="files/print.css" media="print" >
</head>

Try </>

There are two stylesheets. One stylesheet is for print media and the other one is for screen media.


print media includes newspaper, books, and hard copy material. screen media includes digital media (Mobile, TV, Laptop etc).

rel attribute

It may provide the relation of the current page with other pages.

Example

<head>
 <link rel="next" href="nexpage.html">
 <link rel="prev" href="previous-page.html">
</head>

Try </>

The above example represents that the browser considers a website as the series of pages.

rel="next" hints the browser that nextpage.html page is the next page of the current document in the series.

rel="prev" hints the browser that previous-page.html page is the previous page of the current document in the series.

This attribute is used by the browser. A user can not see the effect of this attribute.

alternate versions of a page

It may provide the alternate versions of different languages of the current page.

<head>
 <link rel="alternate" href="address of arabic version" hreflang="ar" >
 <link rel="alternate" href="address of french version" hreflang="fr" >
</head>

The above example represents that Arabic, French versions of the current page are also available.

hreflang attribute defines the type of language.



Was this article helpful?

 

Email:

Message:

Get the newsletter