El método
Ante cualquier trozo de información que tengas que marcar, esta es la secuencia. No cambia en toda tu carrera:
- ¿Qué es esto? Un título, una lista, un dato tabular, una acción
- ¿Existe un elemento que ya significa eso?
- Si existe, úsalo. Si no existe, entonces sí: un
div - Compruébalo sin verlo: con el teclado, con las imágenes apagadas, con el validador
El paso tres separa a quien ha entendido la unidad de quien ha memorizado etiquetas. div no es el error: usarlo en lugar de algo que sí significaba, sí.
La idea más importante
Si dentro de un año has olvidado los atributos, que quede esta:
Que una página se vea bien no demuestra nada. El navegador repara el HTML roto en silencio, y lo que repara no es lo que escribiste.
De ahí sale todo lo demás: por eso se valida, por eso se prueba con el teclado, por eso se apagan las imágenes, y por eso el alt correcto no depende de lo que se ve sino de para qué está la imagen.
HTML describe qué es cada cosa, no cómo se ve
Esa frase es la que hace posible la siguiente unidad. Si tu estructura dice lo que las cosas son, el CSS podrá cambiar por completo su apariencia sin tocar una línea de tu HTML.
Un buen desarrollador no es quien memoriza todas las etiquetas
En desarrollo web tendrás siempre a mano documentación, autocompletado, buscadores, validadores, herramientas de análisis e IA. El objetivo no es memorizar MDN.
El objetivo es construir un modelo mental que te permita decidir:
- ¿Qué elemento representa mejor esta información?
- ¿Mi documento tiene una estructura lógica?
- ¿Puede entenderlo una herramienta además de una persona?
- ¿He usado HTML para estructurar, o estoy intentando usarlo para presentar?
- ¿Cómo compruebo que mi código es correcto?
No hace falta que lo recuerdes todo. Sí que sepas qué estás haciendo y dónde buscar lo que no recuerdas.
Al terminar deberías poder responder
- ¿Qué función tiene HTML dentro de una aplicación web?
- ¿Qué diferencia existe entre elemento, etiqueta y atributo?
- ¿Qué contienen respectivamente
headybody? - ¿Para qué sirven
charset,viewport,langytitle? - ¿Cómo se organiza correctamente una jerarquía de encabezados?
- ¿Qué diferencia existe entre una ruta relativa y una absoluta?
- ¿Qué información debería contener un
alt, y cuándo debe estar vacío? - ¿Cuándo utilizarías
section,articleodiv? - ¿Por qué no debemos utilizar tablas para maquetar?
- ¿Qué relación existe entre
labeleinput, y qué papel tienename? - ¿Por qué existen diferentes tipos de
input? - ¿Qué función tienen
fieldsetylegend? - ¿Qué ventajas aporta usar elementos HTML nativos frente a recrearlos?
- ¿Por qué una página puede verse correctamente y contener HTML incorrecto?
- ¿Para qué sirven HTMLHint y el validador del W3C, y qué no detecta ninguno de los dos?
- ¿Qué es Emmet y qué problema resuelve?
Si además puedes construir y modificar un sitio multipágina sin depender de una plantilla, tienes la base para continuar.
El vocabulario de la unidad
| Concepto | Significa |
|---|---|
| Elemento | La unidad completa: etiqueta de apertura, contenido y cierre |
| Etiqueta | La marca que delimita un elemento |
| Atributo | Un dato añadido a una etiqueta, con nombre y valor |
| Elemento vacío | El que no envuelve contenido y no se cierra: img, meta, br |
| Anidación | Contener unos elementos dentro de otros, cerrando en orden inverso |
| Entidad | Código como < para escribir un carácter reservado |
| Linter | Programa que avisa de errores mientras escribes, sin ejecutar el código |
| Validador | Servicio que dictamina si un documento cumple la especificación |
| Emmet | Sistema de abreviaturas que expande estructuras HTML al escribirlas |
doctype |
La declaración de que el documento es HTML estándar |
charset |
Cómo se traducen los bytes del archivo a caracteres |
viewport |
La instrucción de adaptarse al ancho real del dispositivo |
| Jerarquía de encabezados | El índice del documento, de h1 a h6, sin saltos |
id |
Identificador único de un elemento dentro del documento |
| Ruta relativa | Camino al destino desde el archivo que escribe el enlace |
| Landmark | Zona con significado propio: header, nav, main, aside, footer |
section |
Parte temática que solo tiene sentido dentro de esta página |
article |
Contenido que se entendería publicado por separado |
| Texto alternativo | Lo que ocupa el lugar de una imagen cuando la imagen no está |
scope |
Declara si un encabezado de tabla manda sobre su fila o su columna |
| Etiqueta asociada | label unido a su campo mediante for e id |
name |
El nombre con el que un dato de formulario viaja al servidor |
| Validación nativa | Comprobaciones que hace el navegador sin JavaScript |
| ARIA | Atributos que describen papel y estado cuando HTML no llega |
| Accesibilidad | Que el contenido siga siendo usable sin ver la pantalla y sin ratón |
La siguiente unidad
Durante seis semanas hemos respondido principalmente a una pregunta:
¿Qué es cada cosa?
En la siguiente empezamos a responder la otra:
¿Cómo queremos que se vea?
- HTML · estructura y significado
- CSS · presentación y diseño
Partiremos exactamente del sitio que has construido aquí, y trabajaremos selectores, cascada, especificidad, box model, tipografía, unidades, colores, Flexbox, Grid, diseño adaptable, media queries, variables, estados y transiciones.
El trabajo de estas seis semanas demuestra aquí su utilidad: sobre una estructura semántica, dar estilo se reduce a escribir selectores. Sobre una sopa de div, es cuestión de adivinar cuál era cuál.
Ya deberías ser capaz de
- Montar un proyecto web en VS Code y detectar errores antes de abrir el navegador.
- Escribir documentos HTML5 válidos con los metadatos que de verdad cambian algo: charset, viewport, lang y title.
- Ordenar el contenido con una jerarquía de encabezados que funcione como índice del documento.
- Marcar texto por su significado y no por su apariencia, y escribir caracteres especiales con entidades.
- Representar información con el tipo de lista que le corresponde, incluidas las anidadas.
- Enlazar archivos con rutas relativas que sigan funcionando al mover el proyecto de sitio.
- Elegir el texto alternativo correcto para una imagen, incluido decidir cuándo debe ir vacío.
- Sustituir maquetación a base de div por elementos semánticos y justificar cada sustitución.
- Construir tablas accesibles y reconocer cuándo unos datos no son una tabla.
- Escribir formularios completos que se puedan usar con el teclado y con un lector de pantalla.
- Auditar un documento ajeno, localizar sus fallos y proponer la corrección concreta.