Skip to main content

Practical Exercise 18: Absolute and Relative Links

Discover the difference between absolute and relative links in HTML with this practical exercise. Learn when and how to use each type of link to build well-structured and easy-to-navigate websites.

Activity​

Create an HTML document containing both absolute and relative links. For this exercise, you will need to create two different HTML files. You can name them index.html and page.html.

Interactive Solution​

Solution with complete HTML code​

Create an index.html file with the following code.

index.html
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Enlaces Absolutos y Relativos</title>
  </head>
  <body>
    <h1>Enlace Absoluto</h1>
    <a href="https://div.zone" target="_blank">Ir a DivZone</a>

    <h2>Enlace Relativo</h2>
    <a href="page.html">Ir a Página Interna</a>
  </body>
</html>

Within the same folder, create another file called page.html to use as an internal page.

page.html
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Enlaces Absolutos y Relativos - Página interna</title>
  </head>
  <body>
    <h1>Mi página interna de ejemplo.</h1>
  </body>
</html>