Black and Red Laptop Computer Beside White Puma Curve Brim Cap

What are links in the HTML

This tutorial explains the nature and behavior of links in HTML. It will cover the most important aspects of links and the different ways they can be defined.

TABLE OF CONTENTS

CONCEPT

Links are a vital part of HTML and are the very reason why the WWW exists. The Internet is considered a "network" because of how links connect all these unique parts (or documents) to each other.

The basic function of a link is to make a reference, from an HTML document to a resource, which can in turn be another document. In other words, a link defines a relationship between two resources on the web.

ELEMENT A

The elementa can be used to insert links within the content of the document. In general, these links, together with the functionalities of the browsers, allow users to move from one document to another in a very direct way.

Browsers highlight the content of this element (by default, showing it in blue and underlined) and allow users to follow the link with one click.

Among the many ways authors have to build a link, the most basic consists of the elementa with its content (the text between the opening and closing tags) and a reference to the pointed resource (a URI specified in the attribute href). In the following example, we will define a basic link following these criteria: the opening tag with the URI of the resource in the attribute href, the content, and the closing tag.

To improve accessibility, the text of a link (commonly known as " anchor text ") should provide a concise description of the contents of the linked resource.

<a href="../reference/uri-url.html">Definición de URI y URL</a>

URI and URL definition

If you are wondering what that " URI " is, don't worry. For now, let's just say it is a "route" to go from one resource to another. Later, we will see this topic in detail in the tutorial "Organizing a website".

In the example above we created a link to a line of text as content, but in reality, you can link almost anything to the elementa , especially since HTML 5 came on the scene. In the following example, we will make a link to a piece of document that includes an image ( img) and text.

<a href="http://www.w3.org/"> <img src="../../images/w3c-icon.gif"> El consorcio de la WWW </a>

LINKING TO FRAGMENTS

A link can also be more specific and link to a particular fragment of another document. To create these types of links, you must carry out two tasks:

Prepare the target document, adding an attribute idto the element you need to link to. It is a good practice to create links directed sections of a document, defined by sectioning as elements section, article,h1, etc. Whatever identifier you use in this attribute, you will need it in the second part of this process.
Create the link in the source document (with the elementa ) by adding to the URI of the destination document, a pound sign ("#"), and the identifier used in the previous step.

To make it clearer, let's look at an example. First, we will analyze the structure of this website in order to link it to one of its sections. On any of its pages, you will find a good number of attributes idbeing used for linking purposes. In fact, every section in this document is ready to be linked. In the following code, we will reveal the structure of the first section in this document, called "Concept".

<section id="concept"> <h2>Concepto</h2> ... contenido, ejemplos, etc. ... </section>

Here you can see basically three things: the elementsection setting limits and containing all the elements of the section; the heading h2defining a title for the section, and content. Taking advantage of the presence of the elementsection , we set the attribute idthere, so that the links can refer to "this section of the document".

Now comes the second part where we will establish a link that points to that section. This is rather simple, and basically consists of creating a link to this same page, adding the pound symbol ("#") and the value of the attribute idof the linked section, to the URI in the attribute href. Because we are linking to and from the same document, the URI is the empty string (""). Adding to it the number symbol ("#") and idwe get "#concept".

Let's create that link in an example and see what the browser does for us when we click on it.

<a href="#concept">Volver a la sección "Concepto"</a>

Back to the "Concept" section

As you can see, the browser does the same thing as with common links: it takes you to the linked content.

Must Read, HTML Articles