Estructura del documento
28 pasos en 6 series de HTML.
El documento en sí. Doctype y head, encabezados y texto, listas, enlaces e imágenes, y tablas hechas como se debe, con caption y celdas de encabezado de verdad.
Veintiocho pasos, todos validados con el Nu Html Checker, el mismo validador detrás de validator.w3.org. Cada fragmento aquí parsea limpio, que es más de lo que se puede decir de la mayoría del HTML en la web.
El documento
- El esqueleto del documentoCinco líneas que toda página necesita antes de necesitar cualquier otra cosa.
- Comentarios y dónde importa el espacioUn comentario es invisible para el lector y muy visible en el código fuente.
- Entidades de caracteresEscapar los caracteres que el propio marcado se reserva.
Texto y encabezados
- EncabezadosLos encabezados son el esquema del documento, no una forma de cambiar el tamaño de letra.
- Párrafos y saltosTexto en bloque: párrafos, un corte temático y un salto de línea donde importa.
- Semántica en líneaElementos en línea que llevan significado: énfasis, importancia, código y abreviaturas.
- Énfasis e importanciaCuatro elementos que parecen estilo y en realidad son significado.
- Código, salidas y variablesMarcar las partes de una sesión de terminal para que cada una signifique algo.
- CitasCitas en bloque, citas en línea y referencias, cada una con su propio elemento.
- Abreviaturas, tiempos y valores de máquinaTres elementos que llevan un valor legible por máquina junto al humano.
Listas
- Listas sin ordenUna lista de viñetas: el orden no significa nada, y las listas se anidan.
- Listas ordenadasUna lista numerada para pasos, donde el orden es lo que importa.
- Listas anidadasUna sublista va dentro del ítem al que pertenece, no a su lado.
- Controlar los números de una listaUna lista ordenada puede empezar donde sea, contar hacia atrás o saltarse un número.
- Listas de descripciónPares de término y definición: glosarios, metadatos, detalle clave-valor.
Enlaces e imágenes
- EnlacesEl elemento ancla y las formas que puede tomar un destino.
- Enlaces fuera de la webLas anclas también apuntan a correos, números de teléfono y descargas.
- Destinos y relaciones de los enlacesLos atributos que dicen dónde abre un enlace y para qué sirve.
- Enlaces dentro de la páginaUn enlace de fragmento salta al elemento que lleve ese id.
- ImágenesUna imagen necesita fuente, texto alternativo y dimensiones que reserven su espacio.
- Imágenes que no mueven la páginaWidth y height no son estilo: reservan el espacio antes de que llegue el archivo.
- Figuras y leyendasUna figura une una imagen, gráfico o ejemplo de código con su leyenda.
Tablas
- TablasUna tabla de datos: las celdas de encabezado nombran columnas, las de datos guardan valores.
- Secciones de tabla y scopeSecciones de cabecera, cuerpo y pie, con scope indicando qué rotula cada encabezado.
- Celdas que abarcancolspan ensancha una celda; rowspan la profundiza. Cuenta bien o la cuadrícula se rompe.
- Columnas como grupocolgroup es el único lugar donde tratas una columna entera de la tabla de una vez.
Bis
- landing_page.htmlUna landing page completa: metadatos en el head, hero, lista de características, pie.
- docs_page.htmlUna página de documentación: enlace de salto, barra lateral, índice y contenido en orden.