Definición destacada

¿Como funciona el comando en HTML5: 'portal'?

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Linux HTML5 Dominios

La imagen muestra un fondo azul con un texto centrado en letras blancas que muestra la palabra portal

Última modificación: 2024-06-18

Instrucción HTML5: `<portal>`

El elemento <portal> es una adición interesante y relativamente nueva en el conjunto de herramientas de HTML5, siendo parte de las propuestas impulsadas por Google para mejorar la navegabilidad y rendimiento de las aplicaciones web. Aunque aún está en fase experimental y no es ampliamente adoptado por todos los navegadores , su propuesta apunta a facilitar transiciones más rápidas y fluidas entre diferentes páginas del mismo sitio o incluso entre diferentes sitios.

Atributos del `<portal>`

El <portal> tiene algunos atributos que controlan su comportamiento:

src: El atributo src especifica la URL de la página que se cargará dentro del portal. Funciona de manera similar al atributo src en un elemento <iframe>.
```
<portal src="https://example.com/page"></portal>
```
referrerpolicy: Este atributo define la política de referencia que se aplicará al cargar la página dentro del portal. Al igual que en otros elementos de carga de recursos, puede tener valores como no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, etc.
```
<portal src="https://example.com/page" referrerpolicy="no-referrer"></portal>
```
loading: Indica la preferencia del método de carga del contenido del portal. Podría tener valores como lazy para cargas diferidas.
```
<portal src="https://example.com/page" loading="lazy"></portal>
```

Uso de `<portal>` en HTML5

El uso principal del elemento <portal> está en permitir que una vista previa de una página externa sea integrada e interactuable antes de tomar la decisión de navegar completamente hacia dicha página. Esto puede mejorar considerablemente la experiencia del usuario al proporcionar transiciones más fluidas entre secciones del contenido.

Ejemplo Sencillo de Uso

Vista Previa de una Página

Este ejemplo muestra cómo puedes usar un <portal> para cargar una vista previa de un artículo que podría interesar al usuario. Al hacer clic en el portal, la navegación se completa, llevando al usuario a la página completa.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portal Element Example</title>
</head>
<body>
    <h1>Check out this article:</h1>

    <portal src="https://example.com/article" referrerpolicy="no-referrer" loading="lazy">
        <p>Your browser does not support the portal element</p>
    </portal>

    <script>
        const portalElement = document.querySelector('portal');

        portalElement.addEventListener('click', () => {
            portalElement.activate();
        });
    </script>
</body>
</html>

En este ejemplo:

Se usa un <portal> para cargar una vista previa de la página https://example.com/article.
El contenido del portal se carga de manera diferida (gracias al atributo loading="lazy"), lo que mejora la performance inicial de la página.
Una vez que el usuario hace clic en la vista previa (portal), se activa la transición completa a la nueva página usando el método activate().

Este método permite a los desarrolladores ofrecer una vista interactiva y más rápida de los contenidos antes de que el usuario decida si quiere realizar una navegación completa, reduciendo significativamente el tiempo de espera perceptible y mejorando la experiencia de navegación en general.

Vale la pena recordar que <portal> es una característica experimental y los desarrolladores deben verificar su compatibilidad y soporte en los navegadores que esperan utilizar.

Colaboraciónes de nuestros usuarios

¿Tienes algo que agregar? ¡Déjanos tu colaboración!

¿Como funciona el comando en HTML5: 'portal'?

Instrucción HTML5: <portal>

Atributos del <portal>

Uso de <portal> en HTML5