Links in HTML5

1 - The <a> tag in HTML5

Commonly, when we are creating websites, we need to link parts of either our own site or a different one. For that, we use links. We use the tag <a>text</a> for links.

The text or block between the opening and closing tag is what will be affected. If we include an image, the entire image will be affected by the link.

<a>enlace</a>
<a><img src="imagen1.jpg"/></a>

2 - Link Attributes in HTML5

But this tag alone does nothing. It needs some attributes to go with it. For example, we need to specify which page it will refer to.

2.1 - Reference attribute

When we reference another page, whether it’s on our own domain or an external one, we must do so with the href = "" attribute, which, as discussed in the previous video, accepts relative paths to the pages it refers to as well as full links.

<a href="pagina2.html">enlace</a>
<a href="pagina2.html"><img src="imagen1.jpg"/></a>

But this isn't the only thing we can do with the href attribute; the attribute itself has different settings.

A - Email in HTML

If we use "mailto:[email protected]" inside the href attribute, the browser will automatically open the email client, and we can also specify attributes like the message title or a blind copy.

<a href="mailto:[email protected]">[email protected]</a><br/>

B - Phone in HTML

In this case, if we include "tel:+34 555555555" in the href attribute, when the user clicks on it, an application will open, like Skype on a PC or the calls app on a mobile phone, to call that number.

<a href="tel:+34 555 555 55">555 555 555</a>

2.2 - Target Attribute in HTML

As you have probably noticed when browsing the web and clicking on a link, sometimes it opens in the same browser window, sometimes in another. This is because of the target attribute, which allows us to configure this action. The options are the following:

• _blank: opens the site in another browser window
•  _self: opens the site in the same window.

When we leave this attribute out, the browser understands it as _self. In HTML4 there were more options, but they are no longer available in HTML5.

Este <a href="pagina2.html" target="_blank" >enlace</a> nos manda a Netmentor.

2.4 - Meaning of links

When we create a link, we should add an attribute so that when we mouse over it, we get a bit of extra information as a tooltip.

Este <a href="pagina2.html" target="_blank" title="curso programacion web">enlace</a> nos manda a Netmentor.<br/>

2.5 - Links to the same HTML page

Finally, we can link to different points within our own page, just as we would in a Word index. For this, we're going to create a link on the same page, using the href attribute in the link. But that's not all, because in the target we must specify that it is the recipient. We do this by assigning an id. As we saw in the second post on HTML attributes, it's a common attribute for all tags, and as we remember, it must be unique.

In the destination tag, we need to include an id

<h2 id="titulo1">Título 1</h2>

And then, in the link, we must indicate that id, adding first the character #, which would look like this:

<a href="#titulo1">Título 1</a><br/>

As we see, if we click on the link, it takes us straight to the id position.

3 - Check that the link works.

As we can see, to know that something is a link, the browser by default shows it in a very clear way.

When we move the cursor over it, it changes, and it's also a different color.

Finally, when we click on it, the link color changes to indicate it has already been clicked.

All these properties can be changed and configured; we'll see how when we get to the CSS part.