HTML Element: <a>
[this page | pdf | back links]
The HTML <a> or anchor element represents
a hyperlink. It typically takes the form:
<a href="url">text</a>
or
<a href="url"
target="x">text</a>
Here:
-
text is what the user sees
-
the href
attribute contains the destination address of the link (i.e. where the browser
goes to when the hyperlink is clicked). This could be a web address, e.g. http://www.nematrian.com/Introduction.aspx,
a local link (to the same website as the page, e.g. introduction.aspx) or a bookmark within a resource
-
the target
attribute indicates where to open the linked document
The attributes it can take
(other than HTML
global attributes and HTML event attributes)
include:
Attribute
|
Description
|
More
|
download
|
Target will be
downloaded when user clicks on hyperlink
|
Here
|
href
|
URL of
page the link goes to
|
Here
|
hreflang
|
Language of linked
document
|
Here
|
media
|
Specifies media /
device linked document is optimised for
|
Here
|
rel
|
Relationship between
current document and linked document
|
Here
|
target
|
Specifies where / how
to open the linked document (or where to submit the form)
|
Here
|
type
|
Type of element
|
Here
|
To create or access such
an element in JavaScript
see here. The corresponding HTML DOM object supports
standard
DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above (except
perhaps the media attribute). It
also has a text property which
sets or returns the text content of the object. It also supports the hash, host,
hostname, origin, password,
pathname, port, protocol,
search and username variants of the href attribute, see here for more
details.
By default, an unvisited
link is underlined and is usually blue, a visited link is underlined and purple
and an active link is underlined and is usually purple, see here. However, it is
possible to change these defaults by setting relevant CSS
attributes.
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
Created using HTML:<br>
<a href="http://www.nematrian.com">link to www.nematrian.com</a>
<br><br>Created using JavaScript:<br>
<span id="element"></span>
<script>
var x = document.createElement("A");
x.href = "http://www.nematrian.com";
x.textContent = "link to www.nematrian.com";
// or use x.text = "link to www.nematrian.com";
document.getElementById("element").appendChild(x);
</script>
</body>
</html>
|
NAVIGATION LINKS
Contents | Prev | Next | HTML Elements