Unidad 1 — Clase 3

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

En esta clase empezamos a trabajar con dos cosas que aparecen todo el tiempo en la web real: mostrar datos de forma ordenada y recibir datos del usuario. Para eso, HTML nos da dos herramientas centrales: las tablas y los formularios.

Además, esta clase suma un tema que parece menor al principio, pero que después se vuelve clave: los atributos. Muchas veces una etiqueta HTML sola no alcanza. Necesita más información para cumplir bien su función. Ahí entran los atributos: permiten identificar elementos, configurarlos, conectarlos entre sí y darles comportamiento básico.

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

1. Antes de empezar: qué problema resuelve cada cosa

HTML no “programa” lógica compleja. Lo que hace es estructurar contenido. Eso incluye varias necesidades distintas.

Por ejemplo:

• a veces queremos escribir un título, un párrafo o una lista;

• a veces queremos mostrar información comparativa en filas y columnas;

• a veces necesitamos que el usuario complete su nombre, seleccione una opción y envíe un formulario.

No todo se resuelve con las mismas etiquetas.

Ejemplo de situaciones distintas

Caso 1: una lista de temas

Acá usaríamos una lista.

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

Caso 2: un cronograma

Acá probablemente conviene una tabla, porque hay relación entre columnas.

<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>

Caso 3: inscripción a un curso

Acá necesitamos un formulario.

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

La clave es esta: no todo contenido se marca igual. Una parte importante de aprender HTML consiste en elegir la estructura correcta para cada situación.

2. Tablas en HTML

2.1 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 estructura tabular.

Ejemplos donde una tabla sí tiene sentido

• listado de alumnos;

• cronograma de clases;

• comparación de precios;

• horarios de atención;

• stock de productos;

• resultados de evaluaciones.

Ejemplos donde una tabla no tiene sentido

• maquetar toda una página web;

• poner dos bloques de texto uno al lado del otro;

• hacer un menú;

• organizar visualmente botones.

Eso antes se hacía mucho, pero está mal. Para el diseño visual se usa CSS, no tablas.

2.2 Estructura mínima de una tabla

Las etiquetas básicas son:

• <table>: define la tabla

• <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 leerlo

• primero se abre la tabla;

• adentro hay varias filas;

• en la primera fila usamos encabezados;

• en las filas siguientes usamos datos comunes.

La primera fila funciona como referencia para entender qué representa cada columna.

2.3 Diferencia entre <th> y <td>

Esto es básico, pero importante.

<th>

Se usa para encabezados.
Normalmente nombra la categoría de la columna o fila.

<td>

Se usa para datos comunes.

Ejemplo

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

Error frecuente

Usar <td> en todos lados “porque igual se ve”.
Eso puede mostrar algo parecido, pero semánticamente está peor. Si una celda es un encabezado, corresponde usar <th>.

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

HTML permite organizar mejor una tabla usando:

• <caption>

• <thead>

• <tbody>

• <tfoot>

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>

Para qué sirve cada una

<caption>

Es el título descriptivo de la tabla.

<thead>

Agrupa la cabecera.

<tbody>

Agrupa los datos principales.

<tfoot>

Agrupa una fila final, a veces usada para totales o resúmenes.

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>

2.5 colspan y rowspan

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

colspan

Hace que una celda ocupe varias columnas.

rowspan

Hace que una celda ocupe 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>

Ojo con esto

colspan y rowspan son útiles, pero si se usan mal vuelven la tabla difícil de entender. Conviene usarlos cuando realmente agregan claridad, no por decorar.

2.6 Buenas prácticas con tablas

Usar tablas solo para datos

No para diseño.

Nombrar bien la cabecera

La cabecera tiene que ayudar a interpretar los datos.

Mantener una estructura consistente

Si la tabla tiene tres columnas, todas las filas deberían responder a esa lógica.

No sobrecargar una tabla

Si hay demasiada información, quizás conviene dividirla o resumirla.

Usar un caption cuando aporta contexto

Especialmente si la tabla aparece fuera de contexto.

2.7 Ejemplo real mejor armado

<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>

3. Formularios en HTML

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

3.1 Qué es un formulario

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

• escribir información;

• elegir una opción;

• marcar o desmarcar elementos;

• enviar datos.

Casi cualquier sitio web serio usa formularios:

• login;

• registro;

• búsqueda;

• contacto;

• checkout;

• encuestas;

• reservas;

• inscripción.

3.2 La etiqueta <form>

Todo formulario empieza con <form>.

Ejemplo básico

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

La etiqueta <form> envuelve todos los campos relacionados.

3.3 action y method

Dos atributos muy comunes del formulario son:

• action

• method

Ejemplo

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

Qué significa cada uno

action

Indica a dónde se envían los datos.

method

Indica cómo se envían.

Los valores más comunes son:

• get

• post

Diferencia simple entre GET y POST

GET

Los datos suelen verse en la URL.
Se usa mucho en búsquedas o filtros.

POST

Los datos no quedan expuestos igual en la URL.
Se usa más para registros, envíos y acciones importantes.

En esta materia, por ahora, alcanza con entender la idea general. Más adelante se ve mejor cómo se integra con lógica de servidor o JavaScript.

3.4 La importancia de label

Un error muy común al empezar es escribir campos sin label.

Mal ejemplo

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

Funciona, sí. Pero está flojo.

Mejor ejemplo

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

Por qué label es importante

• le dice al usuario qué tiene que escribir;

• mejora accesibilidad;

• hace el formulario más claro;

• conecta texto y campo mediante for e id.

Regla útil

El for del label debe coincidir con el id del input.

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

4. Inputs: el campo más usado

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

4.1 text

Se usa para texto corto.

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

Sirve para:

• nombre;

• apellido;

• ciudad;

• asunto;

• título.

4.2 email

Se usa para correos electrónicos.

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

Ventaja: el navegador ya entiende que se espera un mail y puede hacer validaciones básicas.

4.3 password

Se usa para contraseñas.

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

El contenido no se muestra en texto normal en pantalla.

4.4 number

Se usa para valores numéricos.

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

Sirve para:

• edad;

• cantidad;

• stock;

• número de documento, aunque ahí hay que pensar si realmente conviene número o texto;

• calificación.

4.5 date

Se usa para fechas.

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

Según el navegador, puede mostrar un selector de calendario.

4.6 file

Permite subir archivos.

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

4.7 submit

Sirve para enviar el formulario.

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

Aunque hoy suele preferirse <button> por ser más flexible.

5. Textarea, select, option, checkbox y radio

No todo se resuelve con input.

5.1 textarea

Sirve para texto más largo.

Ejemplo

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

Cuándo usarlo

• comentarios;

• observaciones;

• descripción;

• mensaje de contacto;

• motivo de consulta.

Cuándo no usarlo

Para respuestas cortas como nombre o correo. Ahí conviene input.

5.2 select y option

Sirven cuando el usuario debe elegir entre opciones ya definidas.

Ejemplo

<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>

Ventaja

Reduce errores, porque el usuario no inventa valores.

Buenos usos

• turno;

• provincia;

• modalidad;

• categoría;

• estado;

• tipo de documento.

5.3 checkbox

Se usa para opciones independientes que pueden activarse o no.

Ejemplo

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

También puede haber varios

<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 ese caso el usuario puede marcar una, dos o todas.

5.4 radio

Se usa cuando hay varias opciones, pero solo puede elegirse una.

Ejemplo

<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>

Punto clave

Todos los radio del mismo grupo deben compartir el mismo name.

Si no comparten name, el navegador no entiende que forman parte de una misma elección.

5.5 button

Puede usarse para enviar o para otras acciones.

Ejemplo

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

También existe:

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

y

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

Este último se usa más cuando después interviene JavaScript.

6. Atributos globales

Los atributos agregan información extra a las etiquetas.

6.1 Qué es un atributo

En HTML, los atributos se escriben dentro de la etiqueta de apertura.

Ejemplo

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

Acá:

• type

• id

• name

son atributos.

6.2 Qué son los atributos globales

Son los que pueden usarse en muchísimas etiquetas distintas.

Los más importantes para empezar:

• id

• class

• title

• lang

• hidden

• style

• tabindex

No hace falta memorizar todos, pero sí entender los más usados.

6.3 id

Identifica un elemento de manera única dentro de la página.

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

Para qué sirve

• enlazar un label con un input;

• seleccionar el elemento con CSS o JavaScript;

• crear anclas internas;

• distinguir un elemento puntual.

Regla útil

No repetir el mismo id en varios elementos.

6.4 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>

Para qué sirve

Sobre todo para CSS y JavaScript.
A diferencia del id, una misma clase puede repetirse.

6.5 title

Agrega una información complementaria.

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

No reemplaza al contenido principal. Es solo un apoyo.

6.6 lang

Indica el idioma del contenido.

<html lang="es">

Es una buena práctica muy importante.
Le dice al navegador y a otras herramientas que el documento está en español.

6.7 hidden

Oculta un elemento.

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

No es para “diseñar bonito”, sino para casos puntuales.

7. Atributos específicos

No todos los atributos sirven para cualquier etiqueta.

7.1 Ejemplos claros

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>

7.2 Atributos frecuentes de formularios

name

Es el nombre con el que se identifica el dato enviado.

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

placeholder

Muestra una ayuda breve dentro del campo.

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

required

Vuelve obligatorio el campo.

<input type="email" required>

value

Define un valor inicial.

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

checked

Marca por defecto un checkbox o radio.

<input type="checkbox" checked>

selected

Marca una opción por defecto en un select.

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

8. Ejemplos completos y explicados

8.1 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>

Qué tiene bien este ejemplo

• usa form;

• cada campo tiene label;

• el for coincide con el id;

• se usan tipos correctos;

• los campos importantes son obligatorios;

• el botón tiene una función clara.

8.2 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>

Qué se puede discutir de este ejemplo

No alcanza con “funciona”. También importa si:

• el formulario es claro;

• pide solo lo necesario;

• usa bien los tipos de campo;

• mantiene orden lógico.

8.3 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>

9. Errores típicos que conviene evitar

9.1 Usar placeholder en lugar de label

Flojo

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

Mejor

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

El placeholder ayuda, pero no reemplaza al label.

9.2 No usar name en los campos del formulario

Mal

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

Mejor

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

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

9.3 Usar tablas para maquetar

Mal enfoque

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

Eso no es una tabla de datos, es un intento de diseño visual.
Para eso más adelante se usa CSS.

9.4 No cerrar etiquetas o escribir código desordenado

Difícil de leer

<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>

No es solo estética. El código prolijo se entiende, se corrige y se mantiene mejor.

9.5 Elegir mal el tipo de input

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

No es un capricho. Hace que el navegador entienda mejor la intención.

10. Buenas prácticas generales en HTML

10.1 Escribir con semántica

Usar la etiqueta correcta para cada contenido.

10.2 Mantener consistencia

Si una parte del formulario usa labels arriba de los campos, no mezclar arbitrariamente con otra lógica en la misma sección.

10.3 Pedir solo lo necesario

Un formulario demasiado largo cansa y genera errores.

10.4 Nombrar bien

name="correo" es mejor que name="x1".

10.5 Indentar

El código con sangría correcta se entiende mucho mejor.

10.6 Separar estructura de presentación

HTML estructura. CSS diseña.
No mezclar roles.

11. Ejercicio de análisis: qué está mal acá

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

Problemas

• no hay labels;

• el correo debería ser email;

• la edad podría ser number;

• faltan id y name;

• el botón no aclara explícitamente su tipo, aunque dentro de form se comporta como submit.

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>

12. Actividad sugerida para practicar más

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:

• nombre;

• categoría;

• precio;

• stock.

Propuesta 3

Armar un formulario de contacto con:

• nombre;

• correo;

• motivo de consulta;

• mensaje;

• aceptación de términos.

Propuesta 4

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

13. Mini proyecto integrador de esta clase

Una buena práctica para afianzar la clase es construir una página sencilla con esta estructura:

<!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>

Qué permite practicar este ejemplo

• estructura completa de un documento;

• tabla con caption, thead y tbody;

• formulario con varios tipos de campo;

• labels bien vinculados;

• atributos frecuentes;

• orden y legibilidad.

14. Qué debería quedar claro después de esta clase

Al terminar esta clase, un estudiante debería poder reconocer esto con claridad:

Sobre tablas

• cuándo corresponde usarlas;

• cómo se arma 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

• qué función cumple form;

• por qué label es importante;

• qué tipos de input son más comunes;

• cuándo conviene usar textarea;

• cuándo conviene usar select;

• diferencia entre checkbox y radio;

• para qué sirve button.

Sobre atributos

• qué es un atributo;

• diferencia entre global y específico;

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

Sobre buenas prácticas

• escribir HTML claro;

• no usar tablas para diseño;

• usar etiquetas con sentido;

• mantener orden y consistencia.

15. Cierre

Esta clase marca un cambio importante. Hasta ahora HTML venía apareciendo como una herramienta para mostrar contenido relativamente estático. Con tablas y formularios empezamos a entrar en una lógica mucho más parecida a la web real.

Una tabla bien hecha no solo “ordena” datos: comunica estructura.
Un formulario bien hecho no solo “permite escribir”: guía al usuario.
Y un HTML bien escrito no solo funciona: también se entiende, se corrige y se puede ampliar sin volverse un caos.

Aprender HTML no es memorizar cien etiquetas. Es empezar a pensar con criterio: qué quiero representar, qué etiqueta corresponde y cómo escribirlo de forma clara.

16. Resumen ultra corto

• Tabla: para datos en filas y columnas.

• Formulario: para capturar datos del usuario.

• Atributos: agregan información o configuración a las etiquetas.

• Buenas prácticas: hacen que el HTML sea más claro, correcto y mantenible.