Elementos semánticos.
<header>: La cabecera de la página o de una sección.
<nav>: Un bloque de enlaces de navegación principal.
<main>: El contenido principal de la página, lo que la hace única.
<article>: Un contenido completo que tendría sentido por separado.
Elementos semánticos: dicen qué papel tiene cada zona. No cambian el aspecto (eso es CSS), pero ayudan a los lectores de pantalla, a los buscadores y a quien lee tu código.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. La cabecera de la página o de una sección: logotipo, título, navegación. Puede haber varios (uno por artículo, por ejemplo).
Esencial. Un bloque de enlaces de navegación principal: el menú del sitio, un índice.
Esencial. El contenido principal de la página, lo que la hace única. Solo uno visible por página, sin la cabecera, el menú ni el pie comunes.
Esencial. Un contenido completo que tendría sentido por separado: una entrada de blog, una noticia, la ficha de un proyecto, un comentario.
Esencial. Una parte temática de un documento o de un artículo. Debería llevar su propio encabezado; si solo la quieres para dar estilo, usa <div>.
Contenido relacionado pero secundario: una barra lateral, una nota al margen, enlaces relacionados.
Esencial. El pie de la página o de una sección: autoría, derechos, contacto, enlaces legales.
Esencial. Los seis niveles de encabezado. <h1> es el título principal (uno por página) y los demás forman el índice del contenido. No saltes niveles: después de un h2 viene un h3, no un h4. Elige el nivel por su lugar en el índice, no por el tamaño.
Agrupa un encabezado con su subtítulo o antetítulo, que van en párrafos.
Datos de contacto de la persona o la organización responsable de la página o de un artículo. No es para cualquier dirección postal.
Agrupa un formulario o unos controles de búsqueda o filtrado. Es nuevo (2023): los lectores de pantalla lo anuncian como zona de búsqueda.
Código del tema: <header>
Elementos semánticos: dicen qué papel tiene cada zona. No cambian el aspecto (eso es CSS), pero ayudan a los lectores de pantalla, a los buscadores y a quien lee tu código.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. La cabecera de la página o de una sección: logotipo, título, navegación. Puede haber varios (uno por artículo, por ejemplo).
Esencial. Un bloque de enlaces de navegación principal: el menú del sitio, un índice.
Esencial. El contenido principal de la página, lo que la hace única. Solo uno visible por página, sin la cabecera, el menú ni el pie comunes.
Esencial. Un contenido completo que tendría sentido por separado: una entrada de blog, una noticia, la ficha de un proyecto, un comentario.
Esencial. Una parte temática de un documento o de un artículo. Debería llevar su propio encabezado; si solo la quieres para dar estilo, usa <div>.
Contenido relacionado pero secundario: una barra lateral, una nota al margen, enlaces relacionados.
Esencial. El pie de la página o de una sección: autoría, derechos, contacto, enlaces legales.
Esencial. Los seis niveles de encabezado. <h1> es el título principal (uno por página) y los demás forman el índice del contenido. No saltes niveles: después de un h2 viene un h3, no un h4. Elige el nivel por su lugar en el índice, no por el tamaño.
Agrupa un encabezado con su subtítulo o antetítulo, que van en párrafos.
Datos de contacto de la persona o la organización responsable de la página o de un artículo. No es para cualquier dirección postal.
Agrupa un formulario o unos controles de búsqueda o filtrado. Es nuevo (2023): los lectores de pantalla lo anuncian como zona de búsqueda.