Escribir HTML estático es como dibujar un mapa en papel: una vez que lo terminas, no cambia. Pero las aplicaciones modernas necesitan ser como un GPS: deben reaccionar, mostrar datos diferentes para cada usuario y adaptarse a las circunstancias.

Aquí es donde entra Jinja2, el motor de plantillas que viene integrado en Flask. Jinja2 te permite inyectar lógica de programación directamente en tu HTML. En este post, vamos a dominar las 5 etiquetas que usarás en el 90% de tus proyectos.

1. La etiqueta de salida: {{ ... }}

Es la más básica y la que más usarás. Sirve para “imprimir” el valor de una variable que viene desde tu código Python.

<p>Bienvenido de nuevo, {{ usuario.nombre }}</p>

Tip: Dentro de las dobles llaves puedes hacer operaciones simples, como sumar números o llamar a métodos de strings: {{ nombre.upper() }}.

2. El condicional: {% if %}

¿Quieres mostrar un botón de “Cerrar sesión” solo si el usuario está conectado? ¿O un mensaje de “Stock agotado” si un producto llega a cero? Para eso usamos los condicionales.

{% if usuario_conectado %}
    <a href="/logout">Cerrar sesión</a>
{% else %}
    <a href="/login">Iniciar sesión</a>
{% endif %}

Ojo: A diferencia de Python, en Jinja2 es obligatorio cerrar el bloque con {% endif %}. El motor no usa la indentación para saber dónde termina el bloque.

3. El bucle: {% for %}

Si tienes una lista de productos o mensajes, no vas a escribir el HTML para cada uno. Usas un bucle para repetir una estructura.

<ul>
{% for producto in lista_productos %}
    <li>{{ producto.nombre }} - {{ producto.precio }}</li>
{% endfor %}
</ul>

Tip: Jinja2 te da un objeto especial llamado loop. Por ejemplo, puedes usar {{ loop.index }} para mostrar el número de la iteración actual (empezando en 1).

4. Herencia de plantillas: {% block %} y {% extends %}

Esta es la joya de la corona. Te permite crear un archivo “base” (con el Navbar y el Footer) y hacer que todas tus otras páginas “hereden” de él.

Archivo base.html:

<nav>Mi Super Web</nav>
{% block contenido %}
    <!-- Aquí irá el contenido de cada página -->
{% endblock %}
<footer>Copyright 2026</footer>

Archivo index.html:

{% extends "base.html" %}

{% block contenido %}
    <h1>Esta es la página de inicio</h1>
{% endblock %}

5. Comentarios: {# ... #}

A veces necesitas dejar notas para ti o para otros desarrolladores en el HTML, pero no quieres que el usuario las vea al “Ver código fuente” en su navegador.

{# Esto es un comentario de Jinja2. No aparecerá en el HTML final. #}
<!-- Esto es un comentario de HTML. SÍ aparecerá en el código fuente. -->

Conclusión: Tu checklist de Jinja2

Dominar estas etiquetas te permitirá dejar de ser un “maquetador” y empezar a ser un desarrollador de aplicaciones web. Antes de terminar tu plantilla, verifica:

  1. ¿Cerraste todos tus {% if %} con {% endif %}?
  2. ¿Usaste {% for %} para las listas en lugar de repetir código?
  3. ¿Estás aprovechando la herencia de plantillas para no repetir el Navbar?
  4. ¿Usaste {{ }} solo para imprimir valores y {% %} para lógica?

¿Cuál de estas etiquetas te parece que te ahorrará más tiempo en tu próximo proyecto de Flask?

Siguiente paso recomendado: Flask 101: Cómo conectar Python con HTML