Unidad 1 — Clase 3

Tablas, formularios, atributos y buenas prácticas en HTML

En esta clase empezamos a trabajar con dos elementos que aparecen de forma permanente en sitios web reales: por un lado, la necesidad de mostrar información ordenada, y por otro, la posibilidad de recibir datos del usuario. Para eso, HTML nos ofrece dos herramientas centrales: las tablas y los formularios.

Además, esta clase incorpora un tema que al principio puede parecer secundario, pero que después resulta fundamental para escribir HTML correctamente: los atributos. Muchas veces una etiqueta sola no alcanza. Necesita datos adicionales para funcionar como corresponde, identificarse, vincularse con otros elementos o definir mejor su propósito.

La idea no es aprender etiquetas aisladas, sino entender cuándo corresponde usar cada una, qué problema resuelve, cómo escribir un HTML más claro y qué errores conviene evitar desde el comienzo.

Antes de empezar: qué resuelve cada estructura

HTML se usa para estructurar contenido. Eso parece simple, pero en la práctica implica distintas necesidades. No es lo mismo escribir un texto, listar elementos, mostrar datos comparativos o pedirle información al usuario.

Por ejemplo:

• a veces necesitamos un título y un párrafo;

• a veces necesitamos una lista de temas;

• a veces necesitamos una tabla con horarios;

• a veces necesitamos un formulario para completar datos.

Cada uno de esos casos requiere etiquetas distintas.

Ejemplo: una lista de temas

<ul>
  <li>HTML semántico</li>
  <li>Tablas</li>
  <li>Formularios</li>
</ul>

Ejemplo: un cronograma

<table>
  <tr>
    <th>Día</th>
    <th>Materia</th>
    <th>Horario</th>
  </tr>
  <tr>
    <td>Miércoles</td>
    <td>Front-End</td>
    <td>18:00 a 20:10</td>
  </tr>
</table>

Ejemplo: un formulario de inscripción

<form>
  <label for="nombre">Nombre</label>
  <input type="text" id="nombre" name="nombre">
</form>

Lo importante es entender que no todo contenido se representa de la misma manera. Una parte esencial de aprender HTML consiste justamente en elegir la estructura adecuada para cada situación.

Tablas en HTML

Qué es una tabla

Una tabla sirve para representar información organizada en:

• filas,

• columnas,

• celdas.

No se usa porque “queda ordenado visualmente”, sino porque los datos tienen una estructura tabular y resulta natural leerlos de esa manera.

Casos en los que una tabla tiene sentido

• una lista de alumnos,

• un cronograma de clases,

• una comparación de precios,

• horarios de atención,

• stock de productos,

• resultados de evaluaciones.

Casos en los que una tabla no tiene sentido

• maquetar toda una página;

• poner bloques de texto uno al lado del otro;

• construir un menú de navegación;

• acomodar visualmente elementos que en realidad deberían resolverse con CSS.

Durante muchos años se usaron tablas para diseñar páginas completas, pero esa práctica hoy se considera incorrecta. Las tablas son para datos, no para maquetación.

Estructura básica de una tabla

Las etiquetas principales son:

• <table>: define la tabla completa;

• <tr>: define una fila;

• <th>: define una celda de encabezado;

• <td>: define una celda de dato.

Primer ejemplo

<table>
  <tr>
    <th>Nombre</th>
    <th>Edad</th>
    <th>Curso</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>22</td>
    <td>Front-End</td>
  </tr>
  <tr>
    <td>Lucas</td>
    <td>25</td>
    <td>Back-End</td>
  </tr>
</table>

Cómo se interpreta

• la tabla comienza con <table>;

• dentro de ella se crean filas con <tr>;

• la primera fila suele contener encabezados, usando <th>;

• las filas siguientes contienen los datos, usando <td>.

La primera fila ayuda a interpretar qué representa cada columna. Por eso es importante que esté bien definida.

Diferencia entre <th> y <td>

Aunque a simple vista puedan parecer similares, no cumplen exactamente la misma función.

<th>

Se usa para encabezados.
Generalmente nombra una categoría o identifica el tipo de dato que contendrá la columna o la fila.

<td>

Se usa para datos comunes.

Ejemplo

<tr>
  <th>Producto</th>
  <th>Precio</th>
</tr>
<tr>
  <td>Teclado</td>
  <td>$25000</td>
</tr>

Un error frecuente es usar <td> en todos lados simplemente porque “igual se ve”. Eso puede mostrar algo parecido visualmente, pero semánticamente está mal. Si una celda cumple función de encabezado, corresponde usar <th>.

Estructura más completa: caption, thead, tbody y tfoot

Además de las etiquetas básicas, HTML permite organizar mejor una tabla usando otras etiquetas semánticas.

• <caption>: define el título de la tabla;

• <thead>: agrupa la cabecera;

• <tbody>: agrupa los datos principales;

• <tfoot>: agrupa una fila de cierre, totales o resumen.

Ejemplo

<table>
  <caption>Horarios de cursada</caption>
  <thead>
    <tr>
      <th>Día</th>
      <th>Materia</th>
      <th>Horario</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Miércoles</td>
      <td>Front-End</td>
      <td>18:00 a 20:10</td>
    </tr>
    <tr>
      <td>Viernes</td>
      <td>Modelado</td>
      <td>18:00 a 20:10</td>
    </tr>
  </tbody>
</table>

Por qué conviene usarlas

Estas etiquetas no solo ordenan mejor el código. También ayudan a que la tabla tenga una estructura más clara, facilitan la lectura del documento y aportan sentido semántico.

Ejemplo con pie de tabla

<table>
  <caption>Ventas del día</caption>
  <thead>
    <tr>
      <th>Producto</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mouse</td>
      <td>3</td>
      <td>$45000</td>
    </tr>
    <tr>
      <td>Teclado</td>
      <td>2</td>
      <td>$50000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total general</td>
      <td>$95000</td>
    </tr>
  </tfoot>
</table>

Unir celdas: colspan y rowspan

A veces una celda necesita ocupar más de una columna o más de una fila.

colspan

Hace que una celda se extienda sobre varias columnas.

rowspan

Hace que una celda se extienda sobre varias filas.

Ejemplo con colspan

<table>
  <tr>
    <th colspan="2">Datos personales</th>
  </tr>
  <tr>
    <td>Nombre</td>
    <td>Lucía</td>
  </tr>
</table>

Ejemplo con rowspan

<table>
  <tr>
    <th>Alumno</th>
    <th>Materia</th>
  </tr>
  <tr>
    <td rowspan="2">Martín</td>
    <td>HTML</td>
  </tr>
  <tr>
    <td>CSS</td>
  </tr>
</table>

Estos atributos son útiles, pero conviene usarlos con criterio. Si una tabla tiene demasiadas combinaciones de celdas, puede volverse más difícil de leer y mantener.

Buenas prácticas al trabajar con tablas

Conviene tener presentes algunas ideas simples:

• usar tablas solo cuando la información realmente sea tabular;

• definir encabezados claros;

• mantener una estructura consistente entre filas y columnas;

• no sobrecargar la tabla con demasiada información;

• usar caption cuando haga falta dar contexto.

Ejemplo bien organizado

<table>
  <caption>Inscriptos al curso de Front-End</caption>
  <thead>
    <tr>
      <th>Apellido y nombre</th>
      <th>Edad</th>
      <th>Turno</th>
      <th>Modalidad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Gómez, Ana</td>
      <td>21</td>
      <td>Noche</td>
      <td>Presencial</td>
    </tr>
    <tr>
      <td>Pérez, Lucas</td>
      <td>24</td>
      <td>Tarde</td>
      <td>Virtual</td>
    </tr>
    <tr>
      <td>Ruiz, Carla</td>
      <td>19</td>
      <td>Noche</td>
      <td>Presencial</td>
    </tr>
  </tbody>
</table>

Formularios en HTML

Si las tablas sirven para mostrar datos, los formularios sirven para recibirlos.

Qué es un formulario

Un formulario es una sección de la página en la que el usuario puede:

• escribir información,

• seleccionar opciones,

• marcar casillas,

• enviar datos.

Casi cualquier sitio web que tenga interacción usa formularios: inicio de sesión, registro, contacto, compra, búsqueda, encuestas o inscripción.

La etiqueta <form>

Todo formulario comienza con la etiqueta <form>.

Ejemplo básico

<form>
  <label for="nombre">Nombre</label>
  <input type="text" id="nombre" name="nombre">
</form>

La etiqueta <form> contiene todos los campos relacionados con el envío de información.

action y method

Dos atributos muy frecuentes de <form> son:

• action

• method

Ejemplo

<form action="/enviar" method="post">
  ...
</form>

Qué indica cada uno

action

Señala a qué dirección se enviarán los datos del formulario.

method

Indica cómo se enviarán esos datos.

Los valores más comunes son get y post.

Diferencia general entre GET y POST

GET

Suele enviar los datos en la URL.
Se usa mucho para búsquedas o filtros.

POST

Envía los datos de otra manera y no los deja visibles del mismo modo en la URL.
Se usa más para registros, envíos de formularios y acciones importantes.

En esta instancia alcanza con entender la lógica general. Más adelante, cuando se vea integración con otras tecnologías, se puede profundizar mejor.

La importancia de label

Un error muy común al empezar es crear campos sin etiqueta descriptiva.

Ejemplo flojo

<input type="text" placeholder="Nombre">

Mejor versión

<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre" placeholder="Ingrese su nombre">

Por qué label es importante

• le dice claramente al usuario qué debe ingresar;

• mejora la accesibilidad;

• hace el formulario más comprensible;

• vincula el texto con el campo correspondiente.

Regla importante

El valor de for en la etiqueta <label> debe coincidir con el id del campo.

<label for="correo">Correo electrónico</label>
<input type="email" id="correo" name="correo">

La etiqueta <input> y sus tipos más comunes

La etiqueta <input> es una de las más versátiles de HTML. Cambia bastante según el valor de su atributo type.

text

Se usa para texto breve.

<input type="text" id="nombre" name="nombre">

Sirve para nombre, apellido, ciudad, asunto o cualquier dato corto escrito en texto.

email

Se usa para direcciones de correo electrónico.

<input type="email" id="email" name="email">

El navegador ya interpreta que se espera un mail y puede aplicar validaciones básicas.

password

Se usa para contraseñas.

<input type="password" id="clave" name="clave">

number

Se usa para valores numéricos.

<input type="number" id="edad" name="edad">

Puede servir para edad, cantidad, stock o cualquier dato numérico.

date

Se usa para fechas.

<input type="date" id="fecha" name="fecha">

file

Permite subir archivos.

<input type="file" id="archivo" name="archivo">

submit

Se usa para enviar el formulario.

<input type="submit" value="Enviar">

De todos modos, hoy suele preferirse <button> porque da más flexibilidad.

Otros elementos importantes de los formularios

No todo se resuelve con <input>. Hay otros elementos que conviene conocer.

textarea

Se usa para textos más largos.

<label for="mensaje">Mensaje</label>
<textarea id="mensaje" name="mensaje"></textarea>

Es útil para comentarios, observaciones, descripciones o consultas extensas.

No conviene usarlo para datos breves, como nombre o email.

select y option

Se usan cuando el usuario debe elegir entre opciones ya definidas.

<label for="turno">Turno</label>
<select id="turno" name="turno">
  <option value="mañana">Mañana</option>
  <option value="tarde">Tarde</option>
  <option value="noche">Noche</option>
</select>

Esto permite reducir errores, porque el usuario no inventa una respuesta libre cuando la opción ya está delimitada.

Suele servir para elegir turno, provincia, modalidad, categoría o estado.

checkbox

Se usa para opciones independientes que pueden marcarse o no.

<input type="checkbox" id="acepta" name="acepta">
<label for="acepta">Acepto los términos y condiciones</label>

También puede usarse un conjunto de checkboxes cuando se permite seleccionar varias opciones.

<input type="checkbox" id="html" name="intereses" value="html">
<label for="html">HTML</label>

<input type="checkbox" id="css" name="intereses" value="css">
<label for="css">CSS</label>

<input type="checkbox" id="js" name="intereses" value="javascript">
<label for="js">JavaScript</label>

En este caso, el usuario puede marcar una, varias o todas.

radio

Se usa cuando hay varias opciones posibles, pero solo se puede elegir una.

<p>Modalidad</p>

<input type="radio" id="presencial" name="modalidad" value="presencial">
<label for="presencial">Presencial</label>

<input type="radio" id="virtual" name="modalidad" value="virtual">
<label for="virtual">Virtual</label>

Para que el navegador entienda que forman parte de un mismo grupo, los radios deben compartir el mismo atributo name.

button

Se usa para enviar el formulario o para otras acciones.

<button type="submit">Enviar</button>

También puede aparecer como:

<button type="reset">Limpiar</button>

o

<button type="button">Hacer algo</button>

Ese último caso se vuelve más importante cuando aparece JavaScript.

Qué es un atributo

Los atributos aportan información adicional a las etiquetas.

Ejemplo

<input type="text" id="nombre" name="nombre">

En este caso, type, id y name son atributos.

Atributos globales

Los atributos globales son aquellos que pueden usarse en muchísimas etiquetas.

Algunos de los más importantes al comenzar son:

• id

• class

• title

• lang

• hidden

• style

• tabindex

No hace falta memorizarlos todos de una vez, pero sí comprender bien los más frecuentes.

id

Identifica de manera única un elemento dentro del documento.

<h1 id="titulo-principal">Curso de Front-End</h1>

Sirve para vincular un label con un campo, seleccionar elementos con CSS o JavaScript, y distinguir un elemento puntual.

No conviene repetir el mismo id en varios elementos.

class

Agrupa elementos que comparten una misma categoría o estilo.

<p class="destacado">Este texto es importante.</p>
<p class="destacado">Este también.</p>

A diferencia del id, una clase puede repetirse en muchos elementos.

title

Agrega una información complementaria.

<p title="Información adicional">Pase el mouse por acá</p>

No reemplaza al contenido principal, solo aporta contexto extra.

lang

Indica el idioma del documento o del contenido.

<html lang="es">

Es una buena práctica muy importante, porque ayuda a navegadores, lectores de pantalla y otras herramientas a interpretar correctamente el idioma.

hidden

Permite ocultar un elemento.

<p hidden>Este texto está oculto.</p>

Atributos específicos

No todos los atributos sirven para cualquier etiqueta. Algunos son específicos de ciertos elementos.

href

Se usa en enlaces.

<a href="https://www.ejemplo.com">Ir al sitio</a>

src y alt

Se usan en imágenes.

<img src="foto.jpg" alt="Foto del aula">

action y method

Se usan en formularios.

<form action="/registro" method="post">

type

Es muy común en input y button.

<input type="email">
<button type="submit">Enviar</button>

colspan

Se usa en celdas de tablas.

<td colspan="2">Total</td>

Atributos muy usados en formularios

name

Identifica el dato que se enviará.

<input type="text" name="nombre">

placeholder

Muestra un texto de ayuda dentro del campo.

<input type="text" placeholder="Ingrese su nombre">

required

Indica que el campo es obligatorio.

<input type="email" required>

value

Define un valor inicial.

<input type="text" value="Argentina">

checked

Marca por defecto un checkbox o un radio.

<input type="checkbox" checked>

selected

Marca una opción inicial dentro de un select.

<option value="noche" selected>Noche</option>

Ejemplos completos

Formulario simple de contacto

<form action="/contacto" method="post">
  <label for="nombre">Nombre</label>
  <input type="text" id="nombre" name="nombre" required>

  <label for="email">Correo electrónico</label>
  <input type="email" id="email" name="email" required>

  <label for="mensaje">Mensaje</label>
  <textarea id="mensaje" name="mensaje" rows="5"></textarea>

  <button type="submit">Enviar mensaje</button>
</form>

Este ejemplo está bien planteado porque:

• usa form;

• cada campo tiene su label;

• el for coincide con el id;

• se usan tipos adecuados;

• los campos importantes están marcados como obligatorios;

• el botón es claro.

Formulario de inscripción

<form action="/inscripcion" method="post">
  <label for="apellido">Apellido</label>
  <input type="text" id="apellido" name="apellido" required>

  <label for="nombre">Nombre</label>
  <input type="text" id="nombre" name="nombre" required>

  <label for="edad">Edad</label>
  <input type="number" id="edad" name="edad" min="16" max="100">

  <label for="email">Correo</label>
  <input type="email" id="email" name="email" required>

  <label for="turno">Turno preferido</label>
  <select id="turno" name="turno">
    <option value="mañana">Mañana</option>
    <option value="tarde">Tarde</option>
    <option value="noche">Noche</option>
  </select>

  <p>Modalidad</p>
  <input type="radio" id="presencial" name="modalidad" value="presencial">
  <label for="presencial">Presencial</label>

  <input type="radio" id="virtual" name="modalidad" value="virtual">
  <label for="virtual">Virtual</label>

  <input type="checkbox" id="acepta" name="acepta" required>
  <label for="acepta">Acepto las condiciones de inscripción</label>

  <button type="submit">Inscribirme</button>
</form>

En este caso no alcanza con que el formulario “funcione”. También importa si:

• está ordenado;

• usa bien los tipos de campo;

• pide solo lo necesario;

• se entiende fácilmente al leerlo.

Tabla de horarios

<table>
  <caption>Horarios de cursada del primer cuatrimestre</caption>
  <thead>
    <tr>
      <th>Día</th>
      <th>Materia</th>
      <th>Horario</th>
      <th>Modalidad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Miércoles</td>
      <td>Desarrollo Front-End</td>
      <td>18:00 a 20:10</td>
      <td>Presencial</td>
    </tr>
    <tr>
      <td>Viernes</td>
      <td>Modelado y Diseño de Software</td>
      <td>18:00 a 20:10</td>
      <td>Virtual</td>
    </tr>
  </tbody>
</table>

Errores frecuentes que conviene evitar

Usar placeholder en lugar de label

Versión floja

<input type="text" placeholder="Nombre">

Mejor versión

<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre" placeholder="Ingrese su nombre">

El placeholder ayuda, pero no reemplaza la función del label.

No usar name en los campos

Incorrecto

<input type="text" id="nombre">

Mejor

<input type="text" id="nombre" name="nombre">

El atributo name es importante porque identifica el dato cuando el formulario se envía.

Usar tablas para maquetar

Enfoque incorrecto

<table>
  <tr>
    <td>Menú</td>
    <td>Contenido principal</td>
  </tr>
</table>

Eso no representa datos. Es un intento de diseñar la página con tablas, y para eso no deberían usarse.

Escribir el código desordenado

Poco legible

<form><label for="n">Nombre</label><input type="text" id="n" name="n"><button>Enviar</button></form>

Mucho mejor

<form>
  <label for="n">Nombre</label>
  <input type="text" id="n" name="n">

  <button type="submit">Enviar</button>
</form>

El código prolijo se entiende mejor, se corrige mejor y se mantiene mejor.

Elegir mal el tipo de input

Si se espera un correo, conviene usar type="email".
Si se espera una fecha, conviene usar type="date".
Si se espera una contraseña, conviene usar type="password".

No es un detalle menor. El navegador interpreta mejor el dato esperado y puede ayudar con validaciones o comportamientos más adecuados.

Buenas prácticas generales en HTML

Escribir HTML correctamente no consiste solo en que el navegador muestre algo. También importa cómo está construido el documento.

Conviene tener en cuenta estas prácticas:

• usar la etiqueta correcta para cada tipo de contenido;

• mantener consistencia en la estructura;

• pedir solo la información necesaria en un formulario;

• nombrar claramente los atributos;

• indentar el código;

• separar la estructura del diseño visual.

HTML organiza y da sentido al contenido. CSS se encargará más adelante de la presentación visual. Es importante no mezclar funciones.

Ejercicio de análisis

Código con problemas

<form>
  <input type="text" placeholder="Nombre">
  <input type="text" placeholder="Correo">
  <input type="text" placeholder="Edad">
  <button>Enviar</button>
</form>

Qué se puede observar

• faltan labels;

• el correo debería usar type="email";

• la edad podría representarse mejor con type="number";

• faltan id y name;

• el código funciona de manera muy básica, pero está poco claro y mal resuelto.

Versión mejorada

<form action="/registro" method="post">
  <label for="nombre">Nombre</label>
  <input type="text" id="nombre" name="nombre" required>

  <label for="correo">Correo</label>
  <input type="email" id="correo" name="correo" required>

  <label for="edad">Edad</label>
  <input type="number" id="edad" name="edad">

  <button type="submit">Enviar</button>
</form>

Propuestas para seguir practicando

Una buena forma de afianzar esta clase es trabajar con ejercicios que integren varios de los elementos vistos.

Propuesta 1

Crear una página que tenga:

• un título principal;

• un párrafo introductorio;

• una tabla con cursos;

• un formulario de inscripción.

Propuesta 2

Armar una tabla de productos con estas columnas:

• nombre,

• categoría,

• precio,

• stock.

Propuesta 3

Diseñar un formulario de contacto que incluya:

• nombre,

• correo,

• motivo de consulta,

• mensaje,

• aceptación de términos.

Propuesta 4

Tomar un formulario mal construido y corregirlo aplicando buenas prácticas.

Ejemplo integrador

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Inscripción a cursos</title>
</head>
<body>
  <h1>Inscripción a cursos</h1>

  <p>Complete el siguiente formulario para registrarse en una propuesta de cursada.</p>

  <table>
    <caption>Cursos disponibles</caption>
    <thead>
      <tr>
        <th>Curso</th>
        <th>Día</th>
        <th>Horario</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>HTML</td>
        <td>Lunes</td>
        <td>18:00</td>
      </tr>
      <tr>
        <td>CSS</td>
        <td>Miércoles</td>
        <td>18:00</td>
      </tr>
      <tr>
        <td>JavaScript</td>
        <td>Viernes</td>
        <td>18:00</td>
      </tr>
    </tbody>
  </table>

  <h2>Formulario de inscripción</h2>

  <form action="/inscripcion" method="post">
    <label for="apellido">Apellido</label>
    <input type="text" id="apellido" name="apellido" required>

    <label for="nombre">Nombre</label>
    <input type="text" id="nombre" name="nombre" required>

    <label for="email">Correo</label>
    <input type="email" id="email" name="email" required>

    <label for="curso">Curso elegido</label>
    <select id="curso" name="curso">
      <option value="html">HTML</option>
      <option value="css">CSS</option>
      <option value="javascript">JavaScript</option>
    </select>

    <p>Modalidad preferida</p>

    <input type="radio" id="presencial" name="modalidad" value="presencial">
    <label for="presencial">Presencial</label>

    <input type="radio" id="virtual" name="modalidad" value="virtual">
    <label for="virtual">Virtual</label>

    <label for="comentarios">Comentarios</label>
    <textarea id="comentarios" name="comentarios"></textarea>

    <input type="checkbox" id="terminos" name="terminos" required>
    <label for="terminos">Acepto las condiciones</label>

    <button type="submit">Enviar inscripción</button>
  </form>
</body>
</html>

Este ejemplo permite practicar varias cosas al mismo tiempo:

• la estructura general del documento HTML;

• una tabla con caption, thead y tbody;

• un formulario con distintos tipos de campos;

• el uso correcto de label, id y name;

• atributos globales y específicos;

• orden y legibilidad del código.

Qué conviene haber comprendido al terminar esta clase

Después de trabajar estos contenidos, debería quedar claro:

Sobre tablas

• cuándo corresponde usar una tabla;

• cómo construir una estructura básica;

• qué diferencia hay entre th y td;

• para qué sirven caption, thead, tbody y tfoot;

• qué hacen colspan y rowspan.

Sobre formularios

• cuál es la función de form;

• por qué label es importante;

• qué tipos de input son frecuentes;

• cuándo conviene usar textarea;

• cuándo conviene usar select;

• qué diferencia hay entre checkbox y radio;

• para qué sirve button.

Sobre atributos

• qué es un atributo;

• qué diferencia hay entre atributos globales y específicos;

• para qué sirven id, class, name, placeholder, required, href, src, alt y otros similares.

Sobre buenas prácticas

• por qué importa escribir HTML claro y ordenado;

• por qué no deben usarse tablas para diseño;

• por qué conviene elegir siempre la etiqueta adecuada;

• por qué la semántica y la legibilidad importan desde el comienzo.

Cierre

Esta clase marca un avance importante dentro de la unidad. Hasta ahora HTML venía apareciendo sobre todo como una herramienta para estructurar contenido estático. Con tablas y formularios empezamos a entrar en situaciones mucho más cercanas a la web real.

Una tabla bien construida no solo organiza datos: también comunica estructura.
Un formulario bien resuelto no solo permite escribir: también guía al usuario.
Y un HTML bien escrito no solo funciona: además se entiende, se corrige y se puede ampliar sin volverse desordenado.

Aprender HTML no consiste en memorizar muchas etiquetas sueltas. Lo importante es desarrollar criterio para pensar qué se quiere representar, qué etiqueta corresponde en cada caso y cómo escribirlo de manera clara, ordenada y consistente.