Semántica y metadatos
23 pasos en 4 series de HTML.
Marcar lo que las cosas significan y no cómo se ven. Los puntos de referencia de la página, medios e incrustaciones, y los metadatos que deciden cómo aparece tu página en un resultado de búsqueda o en un enlace compartido.
Veintitrés pasos. La serie de puntos de referencia es la que más importa y la que más se salta: un nav y un main correctos son la diferencia entre una página que un lector de pantalla puede navegar y una que no.
Puntos de referencia
- Puntos de referencia de la páginaEl esqueleto de una página: banner, navegación, contenido principal, pie.
- Artículos y seccionesUn artículo se sostiene solo; una sección es una parte titulada de algo mayor.
- Asides y footers anidadosContenido tangencial junto al flujo principal, y un pie limitado a su artículo.
- Navegación de migas de panUn rastro de migas de pan es una lista ordenada dentro de un nav rotulado.
- Los encabezados son un esquemaLos niveles de encabezado son la tabla de contenido, al tamaño que sea que se muestren.
- El punto de referencia de búsquedaYa hay un elemento para el área de búsqueda; antes era un div con un role.
- Datos de contactoEl elemento address es para contactar a una persona, no para direcciones postales en general.
Medios e incrustaciones
- VideoUn elemento de video con controles, un cuadro de portada y subtítulos.
- Captions y subtítulosUn video sin pista de texto es un video que alguna gente no puede usar.
- AudioReproducción de audio, con los atributos que hacen tolerable el autoplay.
- Audio con fallbacksDos formatos y un enlace, porque ningún códec se reproduce en todas partes.
- Imágenes responsivasServir el archivo de imagen correcto para la pantalla que lo pide.
- SVG en líneaUn ícono pequeño escrito directo en el marcado, estilable con CSS.
- Íconos SVG reutilizablesDefine la forma una vez y luego referénciala donde aparezca el ícono.
- CanvasUn canvas es un buffer de píxeles en blanco: todo lo suyo es invisible para la tecnología asistiva.
- Marcos incrustadosUn iframe con los atributos que evitan que un embed se porte mal.
Metadatos
- El head del documentoLos metadatos que toda página necesita: charset, viewport, título, descripción.
- Etiquetas de vista previa socialLas etiquetas Open Graph y de Twitter deciden cómo se ve un enlace compartido.
- Instrucciones para rastreadores y navegadoresUn puñado de metaetiquetas que cambian cómo se indexa y renderiza una página.
- Datos estructuradosLos mismos hechos otra vez, en la forma que lee un buscador.
- Pistas de recursosCuatro valores de rel que cambian cuándo el navegador descarga algo.
- Íconos y el manifiesto de la app webLos links que deciden cómo se ve tu página en una pestaña, un teléfono y un marcador.
Bis
- article_page.htmlUna página de artículo con metadatos sociales, estructura semántica y una figura.