Tendencias recientes en HTML

Este artículo explica las tendencias recientes en HTML.

Esto explica las etiquetas que se han añadido relativamente recientemente en HTML5.

YouTube Video

Tendencias recientes en HTML

Etiqueta <template>

 1<template id="myTemplate">
 2    <div>
 3        <p>Hello, this is a reusable template!</p>
 4    </div>
 5</template>
 6<button onclick="useTemplate()">Use Template</button>
 7<div id="container"></div>
 8<script>
 9    function useTemplate() {
10        const template = document.getElementById('myTemplate');
11        const clone = template.content.cloneNode(true);
12        document.getElementById('container').appendChild(clone);
13    }
14</script>

• La etiqueta <template> se utiliza para definir fragmentos HTML reutilizables que permanecen ocultos hasta que son activados mediante JavaScript.

• Mediante el uso de la etiqueta <template>, puedes crear dinámicamente componentes de interfaz de usuario reutilizables, como tarjetas o elementos de lista. También ayuda a reducir la duplicación de código y mejora el mantenimiento en aplicaciones a gran escala.

• En este ejemplo, al hacer clic en el botón 'Usar plantilla' se muestra el contenido de la etiqueta <template>.

Etiqueta <slot>

 1<template id="myElementTemplate">
 2    <slot name="header">Default Header</slot>
 3    <main>Default Content</main>
 4    <slot name="footer">Default Footer</slot>
 5</template>
 6<my-element>
 7    <p slot="header">Header Content</p>
 8    <p slot="footer">Footer Content</p>
 9</my-element>
10<script>
11    class MyElement extends HTMLElement {
12        constructor() {
13        super();
14        const shadow = this.attachShadow({ mode: 'open' });
15        shadow.innerHTML = document.getElementById('myElementTemplate').cloneNode(true).innerHTML;
16        }
17    }
18    customElements.define('my-element', MyElement);
19</script>

• La etiqueta <slot> actúa como un marcador de posición dentro de un componente web para mostrar contenido proporcionado por el elemento padre.
  • Si no se proporciona contenido para un slot, se mostrará contenido alternativo (el contenido predeterminado escrito directamente dentro de la etiqueta <slot>).
• En este ejemplo, los slots con nombre (header y footer) se definen dentro del elemento <template>.
• <my-element> es un elemento HTML personalizado definido por el usuario. El atributo slot en la etiqueta <p> dentro de este elemento especifica el nombre del slot y el contenido que se insertará en el slot.

Etiqueta <dialog>

 1<dialog id="exampleDialog">
 2    <p>This is a dialog box.</p>
 3    <button id="closeButton">Close</button>
 4</dialog>
 5
 6<button id="openButton">Open Dialog</button>
 7
 8<script>
 9    const dialog = document.getElementById('exampleDialog');
10    const openButton = document.getElementById('openButton');
11    const closeButton = document.getElementById('closeButton');
12
13    openButton.addEventListener('click', () => dialog.showModal());
14    closeButton.addEventListener('click', () => dialog.close());
15</script>

• La etiqueta <dialog> se utiliza para definir ventanas interactivas como cuadros modales o ventanas emergentes. Se puede controlar la apertura y el cierre utilizando JavaScript.

• En este ejemplo, al hacer clic en el botón 'Abrir diálogo' se muestra el diálogo.

Atributo inputmode de la etiqueta <input>

1<label for="phone">Phone Number:</label>
2<input type="text" id="phone" inputmode="tel" placeholder="Enter your phone number">

• El atributo inputmode de la etiqueta <input> especifica el tipo de teclado virtual que se muestra en dispositivos táctiles, mejorando la experiencia del usuario. Por ejemplo, inputmode="tel" muestra un teclado numérico para la entrada de números de teléfono.
• El atributo inputmode solo sirve para ajustar la visualización del teclado virtual y no valida el contenido ingresado. Para hacer cumplir las restricciones de entrada, necesitas usar el atributo type o validación con JavaScript.
• Dado que no todos los navegadores y dispositivos lo admiten completamente, es mejor preparar alternativas adecuadas.
• El atributo inputmode puede tomar los siguientes valores. Cada valor se utiliza para mostrar un tipo de entrada o teclado virtual específico.

El atributo theme-color de la etiqueta <meta>

1<meta name="theme-color" content="#4CAF50">
2<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
3<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

• El atributo theme-color de la etiqueta <meta> se utiliza para personalizar el color de la barra de direcciones y la interfaz en navegadores móviles compatibles.
• Por ejemplo, puede cambiar entre el modo oscuro y el modo claro utilizando el atributo media.

Estas etiquetas y atributos son avances de HTML5 y se han convertido en elementos esenciales en el desarrollo web moderno. Se recomienda verificar la compatibilidad y soporte específico de los navegadores al utilizarlos.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video