3.4 Estructura tu contenido: Listas, tablas y formularios

1. Descubre cómo organizar tu contenido

Cada estructura tiene una función específica:

1. Las listas muestran ítems agrupados (en orden o sin orden).
2. Las tablas permiten comparar o mostrar datos estructurados.
3. Los formularios capturan información del usuario para procesarla más adelante.

Elegir el elemento correcto ayuda a que el contenido sea más claro, accesible y funcional.

2. Crea listas ordenadas paso a paso

Para crear una lista ordenada en HTML:

1. Usa la etiqueta <ol> para iniciar la lista.
2. Dentro, agrega cada elemento con <li>.
3. Cierra la lista con </ol>.

Ejemplo:

<ol>
  <li>Despertar</li>
  <li>Preparar café</li>
  <li>Revisar tareas del día</li>
</ol>

El navegador mostrará los elementos numerados automáticamente.

1. Despertar
2. Preparar café
3. Revisar tareas del día

3. Usa listas desordenadas para agrupar ideas

Se crean con la etiqueta <ul> y elementos con <li>.

1. Estructura una lista desordenada con los siguientes pasos:
2. Abre con la etiqueta <ul>.
3. Añade cada ítem con <li>.
4. Cierra con </ul>.

Ejemplo:

<ul>
  <li>Regar las plantas</li>
  <li>Responder correos</li>
  <li>Planear la semana</li>
</ul>

Este tipo de lista es útil para mostrar elementos de lista no secuenciales.

4. Anida listas para jerarquizar contenido

Para anidar listas en HTML:

1. Inserta una lista <ul> o <ol> dentro de un <li> de otra lista.
2. Puedes combinar listas ordenadas y desordenadas según el caso.
3. Este recurso permite representar relaciones entre ítems.

<ul>
  <li>Trabajo
    <ul>
      <li>Revisar informes</li>
      <li>Enviar correos</li>
    </ul>
  </li>
  <li>Casa
    <ul>
      <li>Cocinar</li>
      <li>Limpiar baño</li>
    </ul>
  </li>
</ul>

Cada sublista se visualizar con sangrado por default para mayor claridad.

5. Organiza datos con tablas simples

Una tabla básica en HTML se estructura así:

1. Usa <table> para definir la tabla.
2. Cada fila se crea con <tr>.
3. Cada celda de dato con <td>.

Ejemplo:

<table>
  <tr>
    <td>Tarea</td>
    <td>Prioridad</td>
  </tr>
  <tr>
    <td>Revisar agenda</td>
    <td>Alta</td>
  </tr>
</table>

Las tablas se leen de izquierda a derecha y de arriba a abajo.

6. Agrega encabezados y filas a tus tablas

Para crear una tabla con encabezados:

1. Usa <thead> para definir la cabecera.
2. Dentro de cada fila de cabecera, usa <th> en lugar de <td>.
3. El contenido de la tabla va dentro de <tbody>.

<table>
  <thead>
    <tr>
      <th>Tarea</th>
      <th>Fecha límite</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Enviar reporte</td>
      <td>20/07/2025</td>
    </tr>
  </tbody>
</table>

Esto mejora la accesibilidad y el estilo visual de la tabla.

7. Conoce los formularios, estructura y funcionalidad

Un formulario HTML básico incluye:

1. <form> como contenedor principal.
2. <label> para identificar cada campo.
3. <input> o <textarea> para recibir datos.
4. <button> para enviar la información.

<form>
  <label for="tarea">Nueva tarea:</label>
  <input type="text" id="tarea" name="tarea">
  <button type="submit">Agregar</button>
</form>

*El procesamiento de los datos enviados se verá más adelante en el módulo de BackEnd.

8. Conclusión

Hoy conociste elementos fundamentales del HTML que te permiten presentar información de forma clara y ordenada.

1. Las listas ayudan a mostrar pasos, ideas o tareas en orden o agrupadas.
2. Las tablas permiten organizar datos de forma visual y comparativa.
3. Los formularios recogen datos del usuario y procesan la información para visualizarla posteriormente.

Estas estructuras forman la base de muchas interfaces que usamos a diario, como gestores de tareas, tiendas online o redes sociales.