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>
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>
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>
Click on the "Try it Now" button to see how it works.