En nuestro blog de programación ya hemos tocado temas muy importantes relativos al código HTML de las páginas. Por ejemplo, con nuestro artículo sobre cómo hacer tablas en HTML o con nuestro artículo sobre cómo dejar espacio en HTML. Todas estas informaciones son esenciales a la hora de programar y diseñar nuestro sitio web. Un sitio web que, por norma general y salvo contadas excepciones, suele estar conformado por más de una página. La pregunta es: ¿cómo vamos de una página web a otra página web de nuestro sitio?
Enlace a otra página HTML
La respuesta a la pregunta anterior es mediante un código HTML enlace a otra página. Es clave recordar que los enlaces internos no solo facilitan la usabilidad de nuestra web de cara a todos los usuarios que navegan por ella. También es muy importante de cara al posicionamiento SEO de nuestro sitio web. En primer lugar, porque dicha mayor usabilidad aumenta el tiempo que el usuario pasa en nuestro sitio web y Google premia eso. En segundo lugar, porque Google tiene muy en cuenta los sitios web con estructuras internas sólidas.
Así que llegamos a la pregunta clave: ¿cómo crear dicho enlace a otra página? Pues para ello tenemos que emplear el elemento ancla <a>. Se trata de un elemento contenedor que adopta la siguiente forma: <a>…</a>. De esa forma, el contenido que engloba podrá ser pulsado por el visitante a nuestra página web para ser redirigido a otra página web de nuestro sitio. Eso sí, ese enlace html que hemos creado no está apuntando hacia ninguna otra página de momento y es necesario implementar otro paso para conseguirlo.
En este caso, el paso consiste en proporcionar a dicho contenedor la URL de la página a la que queremos que redirija el mismo. ¿Cómo hacemos eso? Mediante un atributo href, que significa referencia de hipervínculo. A continuación vamos a construir la secuencia de código completa a la que debemos llegar para construir un hiperenlace HTML en nuestro sitio web. Para mostrar el ejemplo sustituiremos una posible URL original por una inventada: losservicios.html. Con eso presente, nuestra secuencia de código sería la siguiente:
<a href=»losservivios.html»>Los servicios</a>
Etiqueta link HTML
Pero esa etiqueta link HTML solo funcionará cuando el archivo losservicios.html se encuentre alojado en la misma carpeta de la página web que lo contiene y desde donde el visitante será redirigido. Es por eso que debemos contar con una gran organización interna del sitio a través del uso de carpetas y subcarpetas. En este punto la creación de sitios web se vuelve algo más complicada. Por supuesto, podemos aprender de manera autodidacta a programar webs, pero los profesionales son capaces de optimizarlas notablemente.
Hiperenlace HTML
Pero además del enlace a otra págna html de nuestro sitio web, que nos permita proporcionar la usabilidad y la optimización SEO que necesitamos, también podemos crear enlaces externos a otros sitios web diferentes al nuestro. De esa manera, los visitantes a nuestra web que pulsan en dichos enlaces son redirigidos a una página web externa a nuestro sitio. Para crear este tipo de enlace se necesitan unas herramientas diferentes que para crear enlaces HTML internos que redirijan a otros lugares de nuestro sitio web.
En el caso de los enlaces internos debemos utilizar una ruta relativa. Estas rutas permiten más libertad a la hora de hacer cambios. Por el contrario, en el caso de los hiperenlaces HTML que conducen a páginas web externas debemos utilizar una ruta absoluta. Estas rutas definen toda una URL completa: su nombre de dominio, su carpeta y su página. Los enlaces internos pueden utilizar ambas rutas. Como decíamos, las primeras son más ventajosas. Los enlaces externos sí están obligados a utilizar las rutas absolutas.
