HTML Anchor

Web pages are interlinked using hyperlinks. External, internal and sections on same web page can be interlinked using hyperlinks.

Links are used to navigate HTML pages. There are two types of links, hyper links and local links. Hyper links are used to inter link other HTML pages. These hyper links are used to weave a web page of pages. On click of a hyperlink the target HTML page is loaded. Local links are used to define an anchor location within a HTML page.

HTML Hyperlinks

Text or image can be used as anchor for a hyper link. On click of that anchor, the target HTML page will be loaded.

<a href="url" target="scope">anchor text or image</a>

Example Hyperlink

<a href="http://www.tutorialwalk.com" target="_blank" title="Tutorial Walk">Tutorial Walk</a>

Output

Tutorial Walk

Hyperlink Attributes

• href is the target web address.
• target is an optional attribute. This specifies how the target page should be opened.
• hreflang is the language of the linked document.
• type specifies the media type of the linked document.
• rel specifies the relationship between the current and linked web page.

Hyperlink Target Attribute Values

Target Value	Description
_blank	Opens target web page in New Window or Tab.
_self	Opens target web page in the same frame from where it was clicked. This is the default option.
_parent	Opens target web page in parent frame.
_top	Opens target web page in full body of the window.
framename	Opens target web page in the give frame.

HTML Hyperlink with Image as Anchor

<a href="http://www.google.com">
<img src="image.jpg" alt="Search HTML Tutorial">
</a>

Local Page Links

A local link is used to target a section within  a web page. It can be either in the same page or some external page. id attribute of a HTML tag is used to point the section of page to which the link should target. The target attribute described above is also applicable here.

<h2 id="hyperlinks-introduction">Hyperlinks Introduction</h2>

This <h2> tag can be used to target that location page of the web page. From within the same page,

<a href="#hyperlinks-introduction">Go to Hyperlinks Introduction Section</a>

From an external page,

<a href="links.html#hyperlinks-introduction">Go to Hyperlinks Introduction Section</a>

Hyperlink Colors

Hyperlinks are shown in different color and underlined in order to highlight it to the user. By default hyperlinks are colored as follows,

• Unvisited link in underlined.
• Visited link in purple.
• Active link in red.