Creating Hyperlinks
Hyperlinks are created using the a element.
href attribute specifies the URL that the a element refers to.
External Hyperlinks
A URL starting with http:// creates a hyperlink to other external HTML documents.
<!DOCTYPE HTML>
<html>
<head>
<title>external links</title>
</head>
<body>
I like <a href="http://java2s.com">java2s.com</a>.
</body>
</html>
Relative URLs
If the href attribute doesn't start with a protocol, such as http://, then the hyperlink is a relative reference.
The relative urls means that the target resource is available in the same host location.
<!DOCTYPE HTML>
<html>
<head>
<title>relative URLs</title>
</head>
<body>
I like <a href="htmlCodeTutorial.html">HTML tutorial</a>.
</body>
</html>
Internal Hyperlinks
The hyperlinks can bring another element from the same html document or another html document into the browser by using the ID selector.
<!DOCTYPE HTML>
<html>
<head>
<title>Internal Hyperlinks</title>
</head>
<body>
Check it out:<a href="#para">here</a>.
<p id="para">
This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph.
</p>
</body>
</html>
Targeting a Browsing Context
The target attribute tells the browser where to display the linked resource.
The supported values for the target attribute:
| Attribute | Description |
|---|---|
| _blank | Open the document in a new window (or tab). |
| _parent | Open the document in the parent frameset. |
| _self | Open the document in the current window (default behavior). |
| _top | Open the document in the full body of the window. |
| <frame> | Open the document in the specified frame. |
Optional Attributes
| Attribute | Value | Specifies |
|---|---|---|
| charset | char_encoding | the character-set of a linked document |
| coords | coordinates | the coordinates of a link when using with image map |
| href | URL | the target URL |
| hreflang | language_code | the language of the linked document |
| name | section_name | the name of an anchor |
| rel | text | the relationship between the current document and the linked document |
| rev | text | the relationship between the linked document and the current document |
| shape | default rect circle poly | Specifies the shape of a link |
| target | _blank _parent _self _top framename | Specifies where to open the linked document |