Índice de contenidos del artículo
The most important element that a web page has is the hyperlink, commonly called a link. These allow you to link the current document with another page so that the user can move between the different sections of a website.
This is what makes the page of a book different from the page of a website. Normally a book is traversed sequentially, that is, one after another in an orderly way; but in a website we can arrange the links we want on the pages we want, thus generating different ways or paths to access the contents.
Normally, the browser, when finding the hyperlink tag, displays an underlined text, and clicking with the mouse on it will load the destination indicated in that hyperlink.
Something quite useful is to notice that when we pass the mouse over a link, the browser shows us the destination URL of the same in the lower left corner of the screen on desktop devices. This is very useful, for example, to detect a malicious link in time.
This visible, usually underlined text that we click on is called anchor text.
The hyperlink tag is
<a>and has opening and closing clauses. The complete syntax would be as follows:
<a href="target">Visible clickable text, called anchor text</a>A hyperlink to another page on the same site has the following syntax:
<a href="page2.html">News</a>What lies between opening and closing is the text that appears visible to the user on the page and we call it anchor text. In the example, the word News.
Keep in mind that within the anchor text we can put any other element or HTML elements, such as an image. We would achieve this by putting the img tag where the anchor text would go.
What’s new in this element is an attribute. Attributes are incorporated within the opening clause and have a value that is assigned with the = sign and is usually expressed in quotation marks.
Both ‘single’ and ‘double’ quotation marks can be used in HTML attribute values.
In the example above, the attribute is href and its value is page2.html.
The href attribute is used to specify the destination of the link, that is, the page that will open after clicking on it.
An email link is one whose destination is an email address. When the user clicks on such a link, the default email manager on the device, for example, Outlook or Thunderbird, will open.
To create an email link we add the reserved word mailto: in front of the destination address in the href attribute:
Additionally we can add other fields to the same link so that, for example, the subject appears preloaded. This is done by adding ? at the end of the email address and & to separate each of the parameters:
<a href="mailto:diego1@gmail.com?
subject=subject here&cc=diego2@gmail.com&
bcc=diego3@gmail.com">Send email.</a>With the subject parameter we provide the subject and with the cc and bcc parameters to other recipients in copy and in hidden copy respectively.
Remember that you can also send emails through a form with the Form tag, although with HTML we only generate the visual part. We will need a server language to make the shipments.
Links to phone numbers are very useful today because most users connect from mobile devices.
Using the syntax that I show you below, allows the user to make the call just by pressing the link, which is extremely useful at the usability level. And the thing does not end there, since search engines like Google also know that this link is from a phone, and therefore will give it the importance it deserves.
To create a link to the phone number you just have to add tel: in front of the phone number, inside the href attribute.
<a href="tel:123456789">123 456 789</a>Another possibility that HTML gives us is to have a reference within the page to be able to later create a hyperlink to that reference.
It is a common practice when we want to scroll within a very long page. Currently they are very fashionable, for example, for specific events, websites called “one page” that only have one page and the main menu takes us to the various sections of it.
In previous versions of HTML, the syntax for defining an anchor was:
<a name="anchorname"></a>In HTML5 this technique is deprecated, resorting to the use of the id attribute.
The id tribute serves to declare a unique identifier to the element where we place it and we can assign as a value the name we want. Thus, an id in an h2 would be:
We should not confuse an id with a hyperlink, an identifier id, is defined in a part of the page that we want to access from a hyperlink.
The syntax for going to an anchor from a hyperlink is as follows:
<a href="#idname">Link text</a>We see that in the href property we indicate the name of the id preceded by #.
To type the symbol of the numeral or pad with a Spanish keyboard, press the Alt Gr key + the number 3 above the letter E.
