Creating Hyperlinks


Posted on September 8th, by Learning in HTML, HTML Elements In Context. 2 comments

Hyperlinks are a critical feature in HTML, and provide the basis by which users can navigate through content, both within the same document and across pages. You create hyperlinks using the a element, which is summarized in the table below.

Element a
Element Type The a element is considered as a phrasing element when it contains phrasing content, and as a flow element when it contains flow content.
Permitted Parents Any element that can contain phrasing content
Local Attributes href, hreflang, media, rel, target, type
Contents Phrasing content and flow elements
Tag Style Start and end tag required
New in HTML5 No
Changes in HTML5 This element can now contain flow as well as phrasing content.
The media attribute has been added. The target attribute, which was deprecated in HTML4, has now been reinstated.
In HTML5, an a element without an href value is a placeholder for a hyperlink.
The id, coords, shape, urn, charset, methods, and rev attributes are obsolete.
Style Convention a:link, a:visited {
color: blue;
text-decoration: underline; cursor: auto;
}
a:link:active, a:visited:active {
color: blue;
}

The a element defines six local attributes, described in the table below. The most important of these attributes is href.

Attribute Description
href Specifies the URL of the resource that the a element refers to.
hreflang Specifies the language of the linked resource.
media Specifies the device that the linked content is intended for.
rel Specifies the kind of relationship between the document and the linked resource.
target Specifies the browsing context in which the linked resource should be opened.
type Specifies the MIME type of the linked resource, such as text/html.

Creating External Hyperlinks

You can create hyperlinks to other HTML documents by setting the href attribute to a URL that starts with http://. When the user clicks the hyperlink, the browser will load the specified page. The code below shows the a element being used to link to external content.


<!DOCTYPE HTML>
<html>
 <head>
 <title>Example</title>
 <meta name="author" content="Luís"/>
 <meta name="description" content="A simple example"/>
 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
 </head>
 <body>
 I like <a href="http://en.wikipedia.org/wiki/Apples">apples</a> and
 <a href="http://en.wikipedia.org/wiki/Orange_(fruit)">oranges</a>.
 </body>
</html>

In this example, I have created two a elements that link to Wikipedia articles. Clicking either link will cause the appropriate article to be loaded and displayed to the user.

Not all URLs have to refer to other web pages. Although the http protocol is the most widely used form of URL, browsers also support other protocols such as https and ftp. If you want to reference an e-mail address, you can use the mailto protocol; for example, mailto:[email protected]

Tip You can use the a element to create image-based hyperlinks (where the user clicks an image, rather than text, to follow a hyperlink). This requires the use of the img element.

Creating Relative URLs

If the value of the href attribute doesn’t start with a recognized protocol, such as http://, then the browser treats the hyperlink as a relative reference. By default, this means that the browser assumes that a target resource is available in the same location as the current document. The code below gives an example of a relative URL.


<!DOCTYPE HTML>
<html>
 <head>
 <title>Example</title>
 <meta name="author" content="Luís"/>
 <meta name="description" content="A simple example"/>
 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
 </head>
 <body>
 I like <a href="http://en.wikipedia.org/wiki/Apples">apples</a> and
 <a href="http://en.wikipedia.org/wiki/Orange_(fruit)">oranges</a>.
 You can see other fruits I like <a href="fruitlist.html">here</a>.
 </body>
</html>

In this example, I have set the value of the href attribute to fruitlist.html. When the user clicks the link, the browser uses the URL of the current document to determine how to load the linked page. As an example, if the current document had been loaded from http://www.mydomain.com/docs/example.html, then the browser would load the target page from http://www.mydomain.com/doc.fruitlist.html.

Creating Internal Hyperlinks

You can create hyperlinks that bring another element into view in the browser window. You do this using the CSS-style ID selector, #<id>, as shown in the code below.


<!DOCTYPE HTML>
<html>
 <head>
 <title>Example</title>
 <meta name="author" content="Luís"/>
 <meta name="description" content="A simple example"/>
 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
 </head>
 <body>
 I like <a href="http://en.wikipedia.org/wiki/Apples">apples</a> and
 <a href="http://en.wikipedia.org/wiki/Orange_(fruit)">oranges</a>.
 You can see other fruits I like <a href="#fruits">here</a>.

 <p id="fruits">
 I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
 </p>
 </body>
</html>

I have created a hyperlink with the href value of #fruits. When the user clicks the link, the browser will look for an element in the document whose id attribute has a value of fruits. If the element isn’t already visible on the screen, the browser will scroll the document so that it is.

Tip If the browser can’t find an element with the desired id attribute value, it will search again, looking for a name attribute that matches the target.

Targeting a Browsing Context

The target attribute lets you tell the browser where you want the linked resource to be displayed. By default, the browser uses the window, tab, or frame in which the current document is displayed, meaning that the new document replaces the existing one. However, you do have other choices. The table below describes 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 (this is the default behavior).
_top Open the document in the full body of the window.
<frame> Open the document in the specified frame.