HTML Links

Links are found in nearly all web pages. Links allow users to click their way from page to page.

HTML Links – Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

HTML Links – Syntax

Hyperlinks are defined with the HTML tag:

Example

<a href="url">link text</a>

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….).

Example

<a href="url">HTML Images</a>

HTML Links – The target Attribute

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

1_blank – Opens the linked document in a new window or tab

2 _self – Opens the linked document in the same window/tab as it was clicked (this is default)

3 _parent – Opens the linked document in the parent frame

4 _top – Opens the linked document in the full body of the window

5 framename – Opens the linked document in a named frame

This example will open the linked document in a new browser window/tab:

HTML Links – Image as a Link

It is common to use images as links:

Example

<a href="default.asp">
	<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
		</a>

Button as a Link

To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click of a button:

Example

<button onclick="document.location = 'default.asp'>HTML Tutorial</button>

Link Titles

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

External Paths

External pages can be referenced with a full URL or with a path relative to the current web page.

This example links to a page located in the html folder on the current web site:

Example

<a href="/html/default.asp"e>HTML tutorial</a>

Chapter Summary

Use the <a> element to define a link

Use the href attribute to define the link address

Use the target attribute to define where to open the linked document

Use the <img> element (inside <a>) to use an image as a link

HTML Link Tags

Tag                                                                             Description

<a>                                                                           Defines a hyperlink

HTML Link Colors

By default, a link will appear like this (in all 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:

Example

<style>
	a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

A link can also be styled as a button, by using CSS:

Example

<style>
	a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>

HTML Link Tags

Tag                                                               Description

<a>                                                        Defines a hyperlink

HTML Links – Create a Bookmark

HTML bookmarks are used to allow readers to jump to specific parts of a Web page.

Bookmarks can be useful if a webpage is very long.

To create a bookmark – first create the bookmark, then add a link to it.

When the link is clicked, the page will scroll down or up to the location with the bookmark.

Example

First, create a bookmark with the id attribute:

<h2 id="C4">Chapter 4</h2>

Then, add a link to the bookmark (“Jump to Chapter 4”), from within the same page:

Example

Jump to Chapter 4

You can also add a link to a bookmark on another page:

<a href="html_demo.html#C4">Jump to Chapter 4</a>

Chapter Summary

Use the id attribute (id=”value”) to define bookmarks in a page

Use the href attribute (href=”#value”) to link to the bookmark

HTML Link Tags

Tag                                                    Description

<a>                                                Defines a hyperlink

For a complete list of all available HTML tags, visit our HTML Tag Reference.