Para un desarrollador Backend, el HTML no es diseño, es estructura. Cuando trabajas con Flask y Jinja2, necesitas saber qué “caja” usar para cada dato que envías desde Python.

Si tus plantillas se ven como un caos de texto sin orden, es porque te faltan los “ladrillos” básicos. En este post, vamos a ver las etiquetas que usarás el 99% del tiempo para estructurar tus aplicaciones.

1. Encabezados y Párrafos (El contenido)

Son las etiquetas básicas para mostrar texto con jerarquía.

  • <h1> a <h6>: Títulos. El <h1> es el más importante.
  • <p>: Párrafos de texto normal.
  • <strong>: Para poner texto en negrita (importancia fuerte).
  • <em>: Para poner texto en itálica (énfasis).
<h1>Panel de Control</h1>
<p>Bienvenido, <strong>Admin</strong>. Tienes mensajes <em>pendientes</em>.</p>

2. Listas: Las mejores amigas del {% for %} en Jinja2

Cuando en Python tienes una lista de usuarios o productos y quieres mostrarla en la web, usarás estas etiquetas:

  • <ul>: Lista desordenada (con viñetas/puntos).
  • <ol>: Lista ordenada (con números 1, 2, 3…).
  • <li>: Cada uno de los elementos de la lista (va siempre dentro de una <ul> o <ol>).
<h3>Mis Tareas:</h3>
<ul>
    <li>Aprender Flask</li>
    <li>Dominar Jinja2</li>
    <li>Subir mi blog a la nube</li>
</ul>

Tip: En Flask, lo normal es que tengas una sola etiqueta <li> dentro de un bucle {% for %} de Jinja2 para que se repita automáticamente por cada dato.

3. Contenedores: <div> y <span>

Estas etiquetas no tienen un formato visual por defecto, sirven para agrupar otros elementos y luego darles estilo o moverlos en bloque.

  • <div>: Un bloque que ocupa todo el ancho disponible (como una caja grande).
  • <span>: Un contenedor de línea (se usa para envolver una palabra o pequeña parte de un texto).
<div>
    <h2>Juan Pérez</h2>
    <p>Estado: <span>Conectado</span></p>
</div>

4. Enlaces y Navegación

La etiqueta <a> (ancla) es la que nos permite saltar de una página a otra usando el atributo href.

<a href="/dashboard">Ir al Dashboard</a>
<a href="https://github.com">Mi perfil de GitHub</a>

5. Tablas: Ideales para reportes de datos

Si estás haciendo un sistema de gestión o un dashboard, las tablas son fundamentales:

  • <table>: Envuelve toda la tabla.
  • <thead>: El encabezado de la tabla.
  • <tbody>: El cuerpo donde van los datos.
  • <tr>: Una fila (Table Row).
  • <th>: Una celda de encabezado (en negrita).
  • <td>: Una celda de datos normal.
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Nombre</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>01</td>
            <td>Laptop Pro</td>
        </tr>
    </tbody>
</table>

Conclusión: Tu checklist de estructura

Antes de pasar tus datos de Python al HTML, verifica que estés usando la etiqueta correcta:

  1. ¿Es una lista de elementos? Usa <ul> y <li>.
  2. ¿Es un título principal? Usa <h1>.
  3. ¿Necesitas agrupar varios elementos? Usa un <div>.
  4. ¿Quieres resaltar una palabra importante? Usa <strong>.

¿Cuál de estas etiquetas te ha causado más confusión al intentar armar tus primeras páginas?

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