Enlaces a secciones y páginas internas

Secciones dentro de una página

Existen enlaces que nos pueden desplazar dentro de una misma página.

Lo podemos hacer agregando un atributo id al elemento al que nos queremos desplazar.

Y usar el atributo href de un link (<a>) usando la notación: #id.

<a href="#mi-elemento">Desplazar a elemento</a>

<!-- Más contenido-->

<div id="mi-elemento">Desplázame hasta aquí</div>

Aquí hay un ejemplo funcional:

Enlaces a páginas internas

Un sitio web puede estar compuesto de diferentes rutas. Usualmente la página de inicio se encuentra en la raíz del proyecto, y su ruta se considera: /.

Aunque podemos tener estructuras más elaboradas.

En este ejemplo tenemos la siguiente estructura:

📦mi-sitio
 ┣ 📂primer-nivel
 ┃ ┣ 📂segundo-nivel
 ┃ ┃ ┗ 📜index.html
 ┃ ┗ 📜index.html
 ┣ 📜index.html
 ┗ 📜otra-ruta.html

Aquí está el proyecto práctico:

Debemos notar los diferentes archivos y los valores utilizados en los diferentes href.

Comentarios

Rutas relacionadas

Web Dev (Frontend)