Redirigir a una página web en HTML

  2. HowTo
  3. HTML Howtos
  4. Redirigir a una página web en HTML
Nithin Krishnan 19 febrero 2023
HTML
  1. Utilice Meta Refresh para redireccionar en HTML
  2. Utilice la etiqueta de anclaje para redireccionar en HTML
  3. Conclusión
Redirigir a una página web en HTML

Hay varias formas HTML de redirigir a un usuario si un servidor deja de funcionar o está en mantenimiento. Depende de los requisitos comerciales sobre qué tipo de comportamiento de redireccionamiento debe tener el sitio. El manejo de redireccionamientos en la interfaz de usuario mejora el rendimiento, ya que el HTML de la página web será el primero en renderizarse. Comencemos analizando las formas HTML de redirigir a una página web diferente.

  1. Meta actualización
  2. Etiqueta de anclaje

Utilice Meta Refresh para redireccionar en HTML

En HTML, tenemos la etiqueta <meta> que entiende el navegador. Usando esta etiqueta HTML, podemos pedirle al navegador que redireccione a la página mencionada. También nos permite programar un retraso si lo deseamos.

<meta http-equiv="refresh" content="5;url=https://www.delftstack.com" />

Aquí, se incluyen un par de parámetros, el http-equiv y el content.

  • http-equiv: es similar a un encabezado de solicitud HTTP, que envía información adicional para que el navegador la comprenda. Este atributo acepta varios valores. El más utilizado es el content-type que le dice al navegador el tipo de contenido que debe esperar. refresh es otro valor para http-equiv, que le dice al navegador que navegue hasta el enlace especificado en el atributo content.
  • content: incluye un retardo programable (en segundos) para que el usuario sepa que está siendo redireccionado. Si desean continuar, pueden o quedarse atrás sin ser redirigidos. Y la URL es el enlace al que se debe realizar la navegación.

Observaciones

  1. Este método se utiliza generalmente en la página base para redirigir a los usuarios incluso antes de que se cargue el sitio.
  2. Según el tiempo establecido en la metaetiqueta, una vez que se carga una página, la funcionalidad de actualización de meta redireccionará automáticamente al usuario.
  3. Es posible que el botón de retroceso del navegador no pueda acceder a la página web que contiene este código.
  4. Si no especificamos una URL, la página se volverá a cargar.
  5. No abuse de las metaetiquetas de redireccionamiento en una página. Se considera que tiene contenido de spam y puede afectar la reputación de las listas de motores de búsqueda.

Utilice la etiqueta de anclaje para redireccionar en HTML

Es posible que esté familiarizado con la etiqueta de anclaje en HTML. Se usa ampliamente en páginas web para navegar a una subpágina o un sitio web externo. A diferencia del método de actualización de meta, la etiqueta de anclaje es estática. Por lo tanto, requiere un evento, un clic, para invocarlo. Podemos utilizar la etiqueta de anclaje para redirigir al usuario de las siguientes formas:

<a href='https://www.delftstack.com/'>Go to Delfstack</a>
<a href='/tutorial'>Tutorials</a>
  • El primer método utiliza la URL completa (https://www.delftstack.com/) pasada como valor al atributo href de la etiqueta <a>; esto es efectivo si necesitamos salir de la aplicación y navegar a un sitio externo. Se puede utilizar el botón de retroceso del navegador para volver a la página de origen.
  • El segundo método se utiliza para navegar a una página dentro del sitio. En este caso, mencionamos la ruta relativa de la página deseada (/tutorial). El navegador traduce esta ruta relativa como https://www.delftstack.com/tutorial.

Observaciones

  1. Este método se basa en la interacción del usuario, un evento de clic para la navegación.
  2. Se puede usar el método de redireccionamiento de etiquetas de anclaje para enrutar dentro del sitio web o hacia un sitio web diferente.
  3. Si no pasamos ninguna URL al atributo href, al hacer clic en la etiqueta de anclaje se volverá a cargar la página actual.

Conclusión

Dependiendo de los requisitos comerciales, será bueno utilizar el método de actualización de meta para redirigir a un usuario tan pronto como llegue a la página web del sitio de mantenimiento. Nos da la libertad de introducir un retraso para mostrar un mensaje al usuario para el cambio de ruta. El uso de una etiqueta de anclaje es bastante común si la navegación se basa en un evento como el clic de un usuario.