HTML5 Tutorial - HTML Links

Posted by Ridwan Fadilah on Jul 06, 2020 - 05:52 pm

HTML Links

Learn about HTML5 Links. Tags, Syntax, Hyperlinks, Link Button, and more examples.

The links can be found nearly on each website. A link will direct you to another page, site, or might to the others section of the page.

HTML5 links are hyperlinks.

You can make the HTML5 link element by using the <a> tag.

Example:

<a href="url">This is a link</a>

The example above will display by the browser like this:

HTML5 Links

In this tutorial, you'll learn about HTML5 Links with the usage example.

HTML Links Syntax

You can make an HTML5 link by using this following syntax:

<a href="url">your link text</a>

The href is the attribute of the HTML5 <a> element that most important and must included in the link element.

The link text is visible to the users. When users click on the link text, the link will direct users to the other page.

Example:

<a href="https://iniblog.xyz/">Visit INIBLOG</a>

Here's the result. Click this link to see how it works:

Visit INIBLOG

By default, the links will appear in all browsers like this:

HTML5 Visited and Unvisited Links
  • An unvisited link will have an underline, and the color is blue.
  • When the link is visited, the color will be purple.
  • The active link will have a red color.

Target Attribute

HTML link has a href attribute, another attribute that could be used with the link element is the target attribute.

By default, the linked page will displayed in the current browser tab.

You can specify the target of the link by using this following value:

  • _self - default. The linked page will open in the same browser tab.
  • _blank - The linked page will open in a new browser tab.
  • _parent - The linked page will open in the parent frame.
  • _top - The linked page will open in the full body of the window.

Example:

<a href="https://iniblog.xyz/" target="_blank">Visit INIBLOG</a>

Here's the result. Click this link to see how it works:

Visit INIBLOG

Absolute and Relative URLs

The absolute URL is a full web address in the href attribute.

The relative URL is a link to a page within the same website (local link). The relative URL is a web address without the "https://www" in the href attribute.

Example:

<a href="https://google.com/" target="_blank">Visit Google</a>
<a href="/blogpost/category/6/HTML5 Tutorial" target="_blank">HTML5 Tutorial</a>

Here's the result. Click this link to see how it works:

Visit Google
HTML5 Tutorial

HTML5 Image Links

If you want to use an image as the link, you can put the <img> tag inside the <a> element.

Example:

<a href="https://google.com/" target="_blank">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
</a>

Here's the result. Click this image to see how it works:



HTML5 Button Links

You can use a button as the link.

If you want to use a button as the link, you need to add JavaScript onclick function.

Example:

<button onclick="document.location='/blogpost/category/6/HTML5 Tutorial'">HTML5 Tutorial</button>

Here's the result. Click this button to see how it works:



HTML5 Link Title

The last is the title attribute.

You can use the title attribute to add extra information about the link element. The title attribute will show as a tooltip when the mouse over the element.

Example:

<a href="https://iniblog.xyz/" title="Go to INIBLOG home">Visit INIBLOG</a>

Here's the result. Mouse over the link to see how it works:

Visit INIBLOG

Okay, that's the basic tutorial about the HTML5 Links. Find another HTML5 Tutorial on the related article below.

You can also find another tutorial on our YouTube Channel.

Thanks for reading, see you in the next article.


Related Articles