Thread by @baumannzone

🔥 ¿Sabías que #HTML tiene una etiqueta especial llamada `template`?

Te sonará si has trabajado con #vuejs. Pero no te preocupes si no la conoces, te lo explico aquÍ abajo.

[ HILO ] ⇣

La etiqueta `template` de #HTML te permite tener contenido oculto en tu documento HTML. Es como una guarida secreta* para tu contenido.

⚠️ *¹ No lo uses para como sistema seguro para ocultar contenido.

Y... ¿para qué? Tal vez te sirva para mejorar el #rendimiento de tu #web.
El contenido de la etiqueta no se añade a la página hasta que tú se lo indiques. (Sí, con #JavaScript)

Esto significa que el navegador no tiene que descargar y analizar ese contenido cuando la página se carga por primera vez, lo que puede hacer que la página se cargue más rápido.

La etiqueta `template` también puede ser útil si quieres mostrar el mismo contenido en varios lugares de la página, es decir, usarla como plantilla (de ahí el nombre) que puedes clonar.

Este sería un ejemplo básico de como se usa la etiqueta `template` de HTML.

Código HTML ⇣

Y aquí el código JavaScript necesario ⇣

Increíble el párrafo sin cerrar porque se cambió de linea al generar la imagen

Otro ejemplo rápido: quieres agregar una fila a una tabla que ya existe en tu documento.
Creas la plantilla de la fila con la etiqueta `template` y después rellenas dicha plantilla con texto deseado usando JavaScript. Finalmente la añades al DOM. Repite el proceso. 🔁

En RESUMEN:
La etiqueta `template` de #HTML es un sistema para tener contenido oculto cuando se carga una página, que puede ser instanciado posteriormente a través de #JavaScript. Puede ser útil para tener una plantilla que se pueda clonar e insertar en la página.

Muchas gracias por todo tu apoyo. 🙌

Si te gustó este hilo:

1. Like
1. Sigue a @baumannzone
2. RT para compartirlo con tu audiencia

No cierran bien los <p>