Search within TutorialsPark

HTML LINKS


Hyperlinks enable you to navigate from one webpage to another.


1.Hyperlinks is one of the very core features of HTML, they enable you to jump from one webpage to another.

2.The very idea of World Wide Web is built around Hyperlinks.All day to day activities like Browsing, Surfing, Downloads depends upon links.

Types of Links

  1. Header Links:using <link> element within the <head> element.
  2. Anchor Links:using anchor element<a> , within <body> element

We will study in detail about ANCHOR LINKS <a> in this lesson.


How to make links in html?

1.Any text can be transformed into a hyperlink by encapsulating it within anchor tag <a> .

2.The attribute href contains the URL of the webdocument,to which the clickable text links.

Syntax of a Link

Example of a Link:

Give it a TRY! » Note-The URL stands for Uniform Resource Locator, it consists of the location, name and extension of the web document.


Commonly used Attributes of a Link.

href: Defines the URL or the location to which the link is created.

title: Title contains a short descriptive text related to the link,such as authors, description etc.Hover the tool tip over the link to see the title.

id : To assign an unique identifier to the link.Two elements on same page cannot have the same id.

class: To assign an identifier to an element,but multiple elements can have the same class name unlike attribute id.

Link Attribute Example - Title / id

Give it a TRY! » Note-Visually handicapped individuals use the screen readers, which reads out loud the values within the title attribute.

HTML Link Target

Link element attribute "target" denotes the target of the browsing context(i.e Tab, new Window, iframe) in which the link should open.

Target attribute Values:

_blank:To open the webpage in a new Tab or Window.

_self:To open the clicked document in the frame as the current one.

_parent:To open the Web document in the parent frameset of the current frame.If no parent available then it behaves as _self.

_top:To open the web document in the full window removing all other frames.

<frame>:To open the webdocument in the specified or named frame

Example Link Target _blank Attribute.

Give it a TRY! »

Exercise-Try all values of target attribute in the code editor, to see for your self.

Absolute and Relative Links

1. Absolute link URLs contain entire Destination address, including the Protocol(http,https,ftp etc) and domain name.The Url doesn't change no matter where the webpage it appears on is kept. Hence, its called Absolute Links.

2.Relative Links do not contain the entire Destination address.Its address is relative w.r.t to the Document on which is appears.

a.The Url http://www.tutorialspark/html/html5_links is an absolute link.

b.The Url ../html/html5_links is a relative link w.r.t to a document on the same website.

c.Relative links will appear broken if the address of the webpage on which the link appears changes.


Example Absolute and Relative links

Give it a TRY! »

Note-The notation HTML5_video.php denotes an link from current directory to a file in the parent directory.

Related Examples

Related Tags