View video tutorial

HTML <a> Tag

HTML

The <a> tag is used to create a hyperlink.

HTML <a> anchor tag.


<a> defines hyperlink to the same page or other page of a web site, or a page to other websites.

To create hyperlink to a page there must be <href> attribute.

If the <href> attribute is not used then <target>, <download>, <rel>, <ping>, <hreflang>, <type> and <referrerpolicy> attribute should be omitted.

Element Attributes

Attribute Value Description
href Address of the hyperlink Specifies the URL of the page the link goes to
target _blank
_parent
_self
_top
Specifies where to open the linked document
download filename Specifies that the target will be downloaded when a user clicks on the hyperlink
ping list_of_URLs URLs to ping
rel alternate
author
bookmark
external
help
license
next
nofollow
noreferrer
noopener
prev
search
tag
Relationship between the location in the document containing the hyperlink and the destination resource
hreflang language_code Specifies the language of the linked document
type media_type Specifies the media type of the linked document
referrerpolicy no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
same-origin
strict-origin-when-cross-origin
unsafe-url
Specifies which referrer information to send with the link.

Global attributes

Global attributes may be applied on all elements, although some elements may have no effect on them.

<accesskey>, <class>, <contenteditable>, <contextmenu>, <data-*>, <dir>, <draggable>, <dropzone>, <hidden>, <id>, <lang>, <spellcheck>, <style>, <tabindex>, <title>, <translate>.

Global Event Handler Attributes

Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.

<onabort>, <onautocomplete>, <onautocompleteerror>, <onblur>, <oncancel>, <oncanplay>, <oncanplaythrough>, <onchange>, <onclick>, <onclose>, <oncontextmenu>, <oncuechange>, <ondblclick>, <ondrag>, <ondragend>, <ondragenter>, <ondragleave>, <ondragover>, <ondragstart>, <ondrop>, <ondurationchange>, <onemptied>, <onended>, <onerror>, <onfocus>, <oninput>, <oninvalid>, <onkeydown>, <onkeypress>, <onkeyup>, <onload>, <onloadeddata>, <onloadedmetadata>, <onloadstart>, <onmousedown>, <onmouseenter>, <onmouseleave>, <onmousemove>, <onmouseout>, <onmouseover>, <onmouseup>, <onmousewheel>, <onpause>, <onplay>, <onplaying>, <onprogress>, <onratechange>, <onreset>, <onresize>, <onscroll>, <onseeked>, <onseeking>, <onselect>, <onshow>, <onsort>, <onstalled>, <onsubmit>, <onsuspend>, <ontimeupdate>, <ontoggle>, <onvolumechange>, <onwaiting>.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

HTML Hyperlink

Link to a section of the page.

<a href="#headline">Go</a> to Todays Headline.
<div id="headline">

Example

<a href="#headline">Go</a> to Todays Headline.
<div id="headline">
	<h2>Todays Headline</h2>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		Sed non risus. Suspendisse lectus tortor, dignissim sit amet,
		adipiscing nec, ultricies sed, dolor. Lorem ipsum dolor sit amet, 
        consectetur adipiscing elit.
	</p>
</div>
Try it Now »

Click on the "Try it Now" button to see how it works.


HTML Hyperlink

Link to an email client.

<p>Send an <a href="mailto:info@example.com">email</a> to us.</p>

Sample Code

Copy each file contents and paste it to your own project and run to see the final output

Example

<!-- Link to an email client-->
<!DOCTYPE html>
<html>
<head>
    <title>HTML a tag Example</title>
    <meta charset="utf-8" />
</head>
<body>
    <h2>HTML a tag Example</h2>
    <p>Send an <a href="mailto:info@example.com">email</a> to us.</p>
</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.


HTML Hyperlink

Link to a phone app.

<p><a href="tel:+012223334444">Call +012223334444</a> to us.</p>

HTML Hyperlink

Link to a script and execute it.

    <p><a href="javascript:alert('Hello HTML')">Click Here</a></p>
    <p><a id="d2" href="#">Mouse Over Here</a></p>
    <p><a id="d3" href="javascript:document.getElementById('d1').innerHTML='World';document.getElementById('d1').style.color='#fff';document.getElementById('d1').style.backgroundColor='#404040';preventDefault();">Click</a>
    </p>
    <p><a href="javascript:add(5,10)">Call a Function</a></p>
    <script>
        function add(a, b) {
            alert(a + b);
        }
        document.getElementById('d2').addEventListener('mouseover', function (e) {
            e.preventDefault(); // Prevents page from scrolling to the top
            alert('Hi!');
        });
    </script>

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML a tag Example</title>
    <meta charset="utf-8" />
</head>
<body>
    <h2 id="d1">HTML a tag Example</h2>
    <p><a href="javascript:alert('Hello HTML')">Click Here</a></p>
    <p><a id="d2" href="#">Mouse Over Here</a></p>
    <p><a id="d3" href="javascript:document.getElementById('d1').innerHTML='World';document.getElementById('d1').style.color='#fff';document.getElementById('d1').style.backgroundColor='#404040';preventDefault();">Click</a>
    </p>
    <p><a href="javascript:add(5,10)">Call a Function</a></p>
    <script>
        function add(a, b) {
            alert(a + b);
        }
        document.getElementById('d2').addEventListener('mouseover', function (e) {
            e.preventDefault(); // Prevents page from scrolling to the top
            alert('Hi!');
        });
    </script>
</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.