HTML5 Links

HTML5 Anchor Links

While surfing the web, you must have gone through many websites that contain internal and external links. HTML5 anchor links allow users to navigate from one page to another.

HTML5 Anchor Links or Hyperlinks

HTML5 anchor links are also referred to as hyperlinks. They allow users to navigate to another document by clicking on a link.

When you hover a mouse over a hyperlink, the mouse arrow will convert into a little hand. HTML5 anchor links do not necessarily have to be text. Aside from text, we can use an image or any other HTML5 element as a link.

Syntax of HTML5 Anchor Links

HTML5 <a> tag represents hyperlink. The code listed below is used to insert anchor links in HTML document.

<a href=”url” > Anchor Text</a>

The most common attribute of <a> tag is href that defines the link’s destination. Viewers of your website can only see the text enclosed between the <a> element.

Upon clicking the link text, the user will be directed to the specified URL address.

The example listed below will explain this fact.

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 Anchor Links </title>
</head>
<body>
    <a href="https://www.vishacademy.com">Visit Vish Academy</a>
</body>
</html>

The output of this code will be

By default, browsers apply one of the following text colors to the links:

An unvisited link is usually underlined, and blue
A visited link is usually underlined with text color purple
An active link is usually underlined with the text color red.

You can use CSS to override browsers by default styling.

The Target Attribute of HTML5 Anchor Links

By default, browsers display HTML5 anchor links in the current browser window. To override this default setting, you can define another target for that link.

The target attribute instructs the browser where to open a specified URL address.

We can assign four different values to the target attribute, and they are:

_self: specified link will open in the same window
_blank: URL will open in new window or tab
_open: open the specified URL in the parent frame
_top: open the specified URL in the full body of the window

If we do not assign any value to the target attribute, its default value will be _self.

In the code example listed below, we’ve assigned the value “_blank” to the target attribute to open the specified link in the new tab.

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 Anchor Links </title>
</head>
<body>
    <a href="https://www.vishacademy.com" target="_blank">Visit Vish Academy</a>
</body>
</html>

The output of this code will be

The hyperlink will open in the new tab.

Using Image as an HTML5 Anchor Links

To use the image as an HTML5 anchor link, we have to nest the image tag in <a> tag.

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 Anchor Links </title>
</head>
<body>
    <a href="https://www.vishacademy.com" target="_blank">
        <img src="Jackets.jpg" alt="Jackets" style="width:300px;height:400px;">
    </a>
</body>
</html>

The output of this code will be

HTML5 Anchor Links

You can click on this link to visit website.

Link to an Email Address

Write mailto: inside the href attribute to create a link that will direct the user to the email program.

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 Anchor Links </title>
</head>
<body>
    <h2> using html5 anchor tag to create a link to an email address</h2>
    <p><a href="mailto:[email protected]">Send email</a></p>
    </a>
</body>
</html>

The output of this code will be

HTML5 Anchor Links

Button as a Link

To use the HTML5 button as a link, you need to embed some Javascript into it. JavaScript code will specify what will happen upon the occurrence of a certain event, such as hovering over a mouse or clicking a button.

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 Anchor Links </title>
</head>
<body>
    <h2>Using HTML5 button element as a link</h2>
    <p> click the link below to stat your learning journey </p>
    <button onclick="document.location='vishacademy.com'"> Learn web development for free</button>
</body>
</html>

The output of this code will be

HTML5 Anchor Links

Link Titles

The title attribute inside an anchor tag conveys a piece of extra information about an element. The information is displayed as a tooltip element when a user hovers over that element.

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 Anchor Links </title>
</head>
<body>
    <h2>Title attribute</h2>
    <p>title attribute within anchor tag conveys an additional information about an HMTL5 element</p>
    <a href="https://www.vishacademy.com" title="visit our site vishacademy">Start learning HTML5 from today</a>
</body>
</html>

The output of this code will be

HTML5 Anchor Links

Next Lesson » « Previous Lesson