HTML: <a> tag

This HTML tutorial explains how to use the HTML element called the <a> tag with syntax and examples.

Description

The HTML <a> tag defines a hyperlink to a URL or a target within the HTML document. This tag is also commonly referred to as the <a> element.

Syntax

In HTML, the syntax for the <a> tag is:

<body>
<a href="filename.html">Hyperlink text to display on screen</a>
</body>

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <a> tag:

Attribute	Description	HTML Compatibility
charset	Character encoding for the linked resource	Obsolete
coords	Defines the coordinates of the object on the page using a list of comma-separated values	HTML 4.01, Obsolete in HTML5
datafld	Column name from the source object that supplied the bound data	Non-standard
datasrc	ID of the source object that supplied the bound data	Non-standard
href	Specifies the link target either as a URL or as a target within the page. Examples of these are: href="filename.html" (files can be referenced either relative or absolute) href="#top" href="#LOCATION" where LOCATION is an ID within the page	HTML 4.01, HTML5
hreflang	Language of the linked resource	HTML 4.01, HTML5
media	Media of the linked resource	HTML5
methods	Information about functions that might be performed on object	Non-standard
name	Required attribute when the link target is a target within the page	HTML 4.01, Obsolete in HTML5
rel	Specifies the relationship of the target to the link object	HTML 4.01, HTML5
rev	Specifies the relationship of the link object to the target	HTML 4.01, Obsolete in HTML5
shape	Defines the shape of a link. It can be one of the following values: circle, default, polygon, rect	HTML 4.01, Obsolete in HTML5
target	Specifies where to display the linked resource. It can be one of the following values: _self, _blank, _parent, _top _self - means that the resource loads into the current frame or context _blank - means that the resource loads into a new window or context _parent - means that the resource loads into the parent frame or context _top - means that the resource loads into the full, original window	HTML 4.01, HTML5
type	MIME type of the link target	HTML 4.01, HTML5
urn	Specifies a uniform resource name for the link	Non-standard

Note

The HTML <a> element is found within the <body> tag.
The text between the opening <a> and closing </a> will appear as the hyperlink text (ie: underlined).
If you want the resource to load in a new window, use the target="_blank" attribute. For example you could write your hyperlink as follows: <a href="/examples/filename.html" target="_blank">Link to filename</a>

Browser Compatibility

The <a> tag has basic support with the following browsers:

Chrome
Android
Firefox (Gecko)
Firefox Mobile (Gecko)
Internet Explorer (IE)
Edge Mobile
Opera
Opera Mobile
Safari (WebKit)
Safari Mobile

Example

We will discuss the <a> tag below, exploring examples of how to use the <a> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

HTML5
HTML4
XHTML

HTML5 Document

If you created a new web page in HTML5, your <a> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
<p>This is a <a href="document.html">link to another document</a>.</p>
</body>

</html>

In this HTML5 Document example, we have created the <a> tag that links to an external resource called document.html. The words "link to another document" would appear as the hyperlink text (underlined).

Let's look at how we would create a hyperlink to a location within the same web page.

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
<h1><a id="H_ID">Heading 1</a></h1>
<p>This is a <a href="#H_ID">link to a Heading in the existing document</a>.</p> 
</body>

</html>

In this HTML5 Document example, we have created the <a> tag that links to a location in the existing document. In this case, it will link to the id called H_ID which is within the <h1> element. The words "link to a Heading in the existing document" would appear as the hyperlink text (underlined).

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <a> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<p>This is a <a href="document.html">link to another document</a>.</p>
</body>

</html>

In this HTML 4.01 Transitional Document example, we have created the <a> tag that links to an external resource called document.html. The words "link to another document" would appear as the hyperlink text (underlined).

Let's look at how we would create a hyperlink to a location within the same web page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1><a id="H_ID">Heading 1</a></h1>
<p>This is a <a href="#H_ID">link to a Heading in the existing document</a>.</p> 
</body>

</html>

In this HTML 4.01 Transitional Document example, we have created the <a> tag that links to a location in the existing document. In this case, it will link to the id called H_ID which is within the <h1> element. The words "link to a Heading in the existing document" would appear as the hyperlink text (underlined).

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <a> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<p>This is a <a href="document.html">link to another document</a>.</p>
</body>

</html>

In this XHTML 1.0 Transitional Document example, we have created the <a> tag that links to an external resource called document.html. The words "link to another document" would appear as the hyperlink text (underlined).

Let's look at how we would create a hyperlink to a location within the same web page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1><a id="H_ID">Heading 1</a></h1>
<p>This is a <a href="#H_ID">link to a Heading in the existing document</a>.</p> 
</body>

</html>

In this XHTML 1.0 Transitional Document example, we have created the <a> tag that links to a location in the existing document. In this case, it will link to the id called H_ID which is within the <h1> element. The words "link to a Heading in the existing document" would appear as the hyperlink text (underlined).

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <a> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
</head>

<body>
<p>This is a <a href="document.html">link to another document</a>.</p>
</body>

</html>

In this XHTML 1.0 Strict Document example, we have created the <a> tag that links to an external resource called document.html. The words "link to another document" would appear as the hyperlink text (underlined).

Let's look at how we would create a hyperlink to a location within the same web page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
</head>

<body>
<h1><a id="H_ID">Heading 1</a></h1>
<p>This is a <a href="#H_ID">link to a Heading in the existing document</a>.</p> 
</body>

</html>

In this XHTML 1.0 Strict Document example, we have created the <a> tag that links to a location in the existing document. In this case, it will link to the id called H_ID which is within the <h1> element. The words "link to a Heading in the existing document" would appear as the hyperlink text (underlined).

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <a> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 Example by www.techonthenet.com</title>
</head>

<body>
<p>This is a <a href="document.html">link to another document</a>.</p>
</body>

</html>

In this XHTML 1.1 Document example, we have created the <a> tag that links to an external resource called document.html. The words "link to another document" would appear as the hyperlink text (underlined).

Let's look at how we would create a hyperlink to a location within the same web page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 Example by www.techonthenet.com</title>
</head>

<body>
<h1><a id="H_ID">Heading 1</a></h1>
<p>This is a <a href="#H_ID">link to a Heading in the existing document</a>.</p> 
</body>

</html>

In this XHTML 1.1 Document example, we have created the <a> tag that links to a location in the existing document. In this case, it will link to the id called H_ID which is within the <h1> element. The words "link to a Heading in the existing document" would appear as the hyperlink text (underlined).