HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML Links - Hyperlinks

A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks.

Hyperlinks allow visitors to navigate from page to page by clicking on words, phrases, and images.

In HTML you can create links using <a> tag. This tag is called anchor tag.


HTML Link Syntax

Anything between the opening <a> tag and the closing </a> tag becomes part of the link and you can click that part to reach to the linked document.

Run code

The href attribute contains the web address you want to link.


Local Links

The example above used an absolute URL (a full web address).

A local link (link to the same web site) is specified with a relative URL (without https://www....):

Run code

To learn more about file paths, visit: HTML File Paths Chapter.



HTML Link Colors

By default, links will appear as follows in most of the browsers:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

You can change the default colors, by using CSS:

Run code

HTML target Attribute

The target attribute is used to specify the location where linked document should be opened.

The target attribute can have 5 different values.

  • _blank - Opens the linked document in a new window or tab
  • _self - Opens the linked document in the same window or tab
  • _parent - Opens the linked document in the parent frame
  • _top - Opens the linked document in the full body of the window
  • targetframe - Opens the linked document in a named targetframe
Run code

_self is the default value for links, it means if you omit target attribute then your browser will treat it as _self.


HTML Image as Link

It's easy to use an image as hyperlink. We just need to use an image inside <a> element at the place of text as shown below:

Run code

HTML Email Link

It's easy to specify an email address to send an email using hyperlink. We just need to use mailto: along with href attribute as shown below:

Run code

Note: If user do not have email client installed on their computer then it would not be possible to send email.

Do not use this because there are people, who can run programs to harvest these types of emails and later use them for spamming in various ways.


HTML Downloadable Link

The download attribute specifies that the target will be downloaded when a user clicks on the hyperlink.

Run code

The value of the attribute will be the name of the downloaded file.

If the value is omitted, the original filename is used.

Run code

Adding Title to Hyperlinks

Another attribute you may want to add to your links is title. This is intended to contain supplementary useful information about the link, such as what kind of information the page contains, or things to be aware of. For example:

Run code

The information is most often shown as a tooltip text when the mouse moves over the element.


Linking to a Page Section

You can create a link to a particular section of a given webpage by using id attribute. This is a two-step process.

First, create an element with the id attribute:

Second step is to add a link to the element ("Go to Bottom"), from within the same page:

Run code

This is useful useful if your webpage is very long.