Skip to content

Links, absolute and relative paths in HTML

May 24, 2020
Learn about ⭐ LINKS, ABSOLUTE and RELATIVE paths of HTML ✅: definition, structure and EXAMPLES ⭐ practical and easy. ENTERS!

In this post we will teach you everything you need to know about links, absolute and relative HTML paths: definition, structure and practical examples. ENTERS!


Welcome to another post.

Thanks to the links is that you can go from web page to web page investigating and indicating about any subject, and they exist practically from the beginnings of Internet.

Commonly also they are called hyperlinks, both have the same meaning and denote the same function. The structure of a link is the next:

  • Text: it is also known as «anchor text» and is the text which will contain the link or hyperlink to another web page destination.
  • Hyperlink: is destiny which is placed in the anchor text. Here you must specify the web page destination.

Next, we will show you how you can put into practice the insertion of links (with their respective relative and absolute paths) in HTML.

Links in HTML

The Default HTML links look blue, that if you hover the mouse over it, it will turn into a hand pointing to the anchor text. The length of the anchor text is delimited by the number of words that the link covers.

If you want to create a link, you must follow the following structure:

<a href="">Este es un enlace que dirige a El Blog de Master Coria</a>

La etiqueta HTML «<a>» es la que rige por defecto la creación de enlaces, y es el estándar que Google oficialmente usa cuando es de temas SEO para tu sitio web.

Attribute "Href" is the one that designates the link destinatario adonde será llevado el usuario, y el anchor text es básicamente el texto que está entre las etiquetas, es decir, el valor de la etiqueta «<a>».

Mencionar que, para efectuar el cierre de esa etiqueta, se deberá emplear su contra etiqueta que es «</a>», de lo contrario, el anchor text tomará la longitud de todos los caracteres escritos después de la apertura del enlace.

Absolute paths

They are all those links that point to a web address or URL, is also known daily as "link". This link is the most common on the internet, and the one that we recommend ALWAYS use, since among good SEO practices, it is recommended to use it.

These absolute path links in HTML can be both external (links from your own website), or external links (links to other websites).

Example of absolute path binding in HTML.
Example of absolute path binding in HTML.

Examples of absolute paths in HTML

Below we will give you some clear examples which will explain to 100% the use of the absolute paths within your HTML document. Pay attention to each type of example as it describes different types of absolute paths well.

<a href="">Ruta absoluta a página principal de El Blog de Master Coria.</a>
<a href="">Ruta absoluta a sitio principal, incluyendo una petición hacia una determinada sección.</a>
<a href="">Ruta absoluta a YouTube, incluyendo una petición de un determinado video.</a>

Como puedes observar, todos los enlaces vienen dentro del atributo «href» de la etiqueta HTML «<a>», y pueden ser de different types of web addresses. You just have to put that link directly between the quotes of that attribute.

Be very careful which sites you link to, since Google takes this into account in the SEO of your website. Polish your Backlinking strategy before making movements.

Relative paths

They are local HTML links that search for some content within the computer or server. We recommend using relative paths as little as possible in your HTML document as they could cause future confusion due to their structure.

We recommend you:  Basic HTML Tags: Structure of a Web Page

This structure works in the same way as an absolute path, but relative paths have a different way of working or employing in the HTML document.

First, let's look at a concrete example of a relative HTML path so that we can understand what this question is about:

<a href="C:\\Usuarios\MasterCoria\Escritorio\leon.png">Ruta relativa (dirección interna o local del PC o servidor) hacia una imagen determinada.</a>

Generally, relative paths are used under programming languages that run behind the server, because exposing this type of internal addresses of a server can carry risks. However, there are other types of relative paths within HTML that can be used:

Example of relative path links in HTML.
Example of relative path links in HTML.

Examples of relative paths in HTML

<a href="">Ruta relativa que dirige a la sección /contacto del sitio en cuestión.</a>

These relative path HTML links direct to the contact section of the website where this hyperlink is placed. If the site is Facebook, then it would go to "".

Another example is the use of these routes to go to certain other sections, using point navigation:

<a href="/en/../index.html/">Ir a la página principal.</a>

Point navigation indicates that it will go back a directory, and look for the index HTML file for that site. If, for example, the user is found in "sections / example.html", the navigation indicates that he should go to "/index.html", leaving the "sections" directory.

It can be worked in more directory levels, as explained below:

<a href="/en/../../../index.html/">Salir de 3 directorios, ir al archivo índice HTML.</a>

We hope that in this informative article you have learned quite a bit about links (both relative as absolute paths) in HTML. These links may be of interest to you:

Did you understand the issues addressed? Comment your doubts in the comments!

See you in another post.