El Cuerpo HTML
Introducción
En el mundo actual del desarrollo web, la estructura de una página no solo es importante para su visualización, sino también para su accesibilidad, SEO y mantenimiento. Las etiquetas semánticas HTML5 han revolucionado la forma en que construimos sitios web, proporcionando un significado claro y contextual a cada sección de nuestra página.
A diferencia de las antiguas estructuras basadas únicamente en <div>s genéricos, las etiquetas semánticas como <header>, <nav>, <main>, <article>, <section>, <aside> y <footer> comunican explícitamente la función de cada componente. Esto no solo facilita la comprensión del código para otros desarrolladores, sino que también permite a los motores de búsqueda y tecnologías asistivas interpretar correctamente el contenido.
Implementar estas etiquetas semánticas en el sitio web mejora significativamente el posicionamiento en buscadores, ya que los algoritmos modernos valoran el contenido bien estructurado y con significado claro. Además, las páginas construidas con etiquetas semánticas son más accesibles para personas con discapacidades que utilizan lectores de pantalla y otras tecnologías adaptativas.
La adopción de estas prácticas no solo representa seguir las tendencias actuales, sino que constituye una inversión en la calidad, durabilidad y alcance de tu presencia digital.
Estructura HTML no Semántica
Antes de la introducción de HTML5 y sus etiquetas semánticas, las páginas web se construían principalmente utilizando elementos genéricos, especialmente el <div>. Esta aproximación no semántica resultaba en código menos descriptivo y más difícil de mantener.
Un ejemplo de una estructura no semántica típica:
<!DOCTYPE html>
<html>
<head>
<title>Mi Sitio Web</title>
</head>
<body>
<!-- Cabecera -->
<div id="header">
<div id="logo">Mi Sitio</div>
<div id="nav">
<div class="nav-item"><a href="#">Inicio</a></div>
<div class="nav-item"><a href="#">Servicios</a></div>
<div class="nav-item"><a href="#">Contacto</a></div>
</div>
</div>
<!-- Contenido principal -->
<div id="main-content">
<div id="featured-post">
<div class="post-title">Título del Artículo</div>
<div class="post-content">
<p>Este es el contenido del artículo principal...</p>
</div>
</div>
<div id="other-posts">
<div class="post">
<div class="post-title">Artículo Secundario</div>
<div class="post-content">
<p>Contenido de un artículo secundario...</p>
</div>
</div>
</div>
</div>
<!-- Barra lateral -->
<div id="sidebar">
<div class="widget">
<div class="widget-title">Categorías</div>
<div class="widget-content">
<div class="category">Categoría 1</div>
<div class="category">Categoría 2</div>
</div>
</div>
</div>
<!-- Pie de página -->
<div id="footer">
<div class="copyright">© 2025 Mi Sitio Web</div>
</div>
</body>
</html>
En este ejemplo, observamos varios problemas:
- Falta de significado inherente: Cada
<div>requiere unidoclasepara explicar su propósito, ya que el elemento en sí no comunica nada sobre su función. - Dificultad para el mantenimiento: Al tener una estructura basada completamente en
<div>s, el código se vuelve más difícil de leer y mantener, especialmente en proyectos grandes. - Desafíos para la accesibilidad: Los lectores de pantalla y otras tecnologías asistivas tienen dificultades para interpretar correctamente la estructura del documento.
- Limitaciones para SEO: Los motores de búsqueda no pueden identificar fácilmente qué secciones contienen el contenido principal versus contenido secundario.
- Anidación excesiva: Se tiende a usar excesivamente de
<div>s, lo que hace que el código sea más verboso y menos eficiente.
Estructura HTML con Etiquetas Semánticas
Introducción a Elementos Semánticos
Dentro del desarrollo web, lo 'semántico' implica el uso de elementos HTML que expresan claramente la función y el tipo del contenido que contienen. Esta práctica supera la mera presentación visual, buscando comunicar el significado del contenido tanto a los programas de navegación como a los programadores. En contraste con elementos generales como <div> y <span>, que actúan como contenedores sin especificar la naturaleza de la información que guardan, los elementos semánticos como <header>, <article y <footer> proporcionan un contexto significativo, permitiendo que las máquinas (navegadores, buscadores, tecnologías de asistencia) interpreten mejor el papel de cada parte de la página.
La implementación de elementos semánticos representa un cambio sustancial en la trayectoria de HTML. En versiones previas, como HTML4, era habitual construir la estructura de una página web utilizando principalmente elementos <div>, a menudo acompañados de atributos id o class para intentar aclarar su función. No obstante, este enfoque dependía de la interpretación de los nombres de las clases, que podían variar o no ser evidentes. Con la introducción de HTML5, se incorporó un conjunto de elementos semánticos diseñados específicamente para describir las distintas secciones y componentes de una página de forma inherente. Este cambio significó un progreso hacia una web más significativa y accesible.
El empleo de elementos semánticos es crucial para la correcta organización de una página web por múltiples motivos. En esencia, estos elementos facilitan la navegación, la comprensión y el mantenimiento de las páginas web tanto para las personas como para las máquinas. Al transmitir de manera clara la función de cada elemento de contenido, se establecen las bases para una mejor accesibilidad, optimización para motores de búsqueda (SEO) y una mayor eficiencia en el desarrollo y la colaboración.
Beneficios el Uso de la Semántica
Mejora del SEO (Optimización para Motores de Búsqueda)
Herramientas de búsqueda, tal como Google, examinan la estructura del código de las páginas web para entender qué información presentan y cómo deben mostrarla. Los marcadores semánticos ofrecen indicaciones precisas a los sistemas de exploración web sobre el propósito y la relevancia de los distintos elementos de una página. A modo de ejemplo, el marcador <header> identifica el contenido de inicio,<nav>señala los vínculos de navegación, <main> define el contenido central y <article> agrupa el contenido autónomo.
Esta transparencia facilita a los buscadores la tarea de registrar y ordenar el contenido con mayor precisión. En el contexto de la búsqueda semántica, donde los motores de búsqueda se esfuerzan por interpretar la intención detrás de las preguntas de los usuarios, el empleo de marcadores semánticos se vuelve aún más esencial. Al definir claramente el significado y la relevancia de las diversas secciones del contenido, los creadores de sitios web permiten que los buscadores conecten de manera más eficiente las consultas de los usuarios con los resultados pertinentes. Asimismo, ciertos marcadores semánticos pueden contribuir a generar "resultados enriquecidos" en las páginas de búsqueda, lo cual puede aumentar la visibilidad y el número de clics. La utilización correcta de los marcadores de encabezado (<h1> a <h6>), el marcador <title>, las descripciones meta y el texto alternativo en las imágenes también juega un papel clave en la optimización para buscadores.
Accesibilidad Web
Las herramientas de apoyo, como los programas que leen el texto en pantalla para personas con problemas de visión, necesitan de marcadores de significado para entender y moverse dentro de los sitios de internet. Estos marcadores dan información sobre el tema y la forma en que está organizado el sitio, lo que ayuda a las personas con discapacidades a entender y usar el contenido sin problemas. Por ejemplo, el marcador <nav> señala claramente dónde está el menú de navegación, lo que permite a los lectores de pantalla dar opciones de navegación precisas al usuario. Los títulos (<h1> a <h6>) ayudan a los usuarios a ver cómo se organiza el contenido, y usar el marcador <main> permite a los lectores de pantalla ir directamente a la parte principal del contenido.
Usar marcadores de significado ayuda a que internet sea más para todos y más fácil de usar, sin importar las habilidades de cada persona. Al dar una forma organizada al contenido, se garantiza que este se pueda usar y entender por más personas. En algunos lugares, hacer que internet sea accesible es incluso una obligación por ley. Además, usar marcadores de significado puede hacer que el código sea más ordenado y corto, al no tener que usar muchas clases e ids, lo que también ayuda a que internet sea más accesible.
Mantenimiento y Legibilidad del Código
El uso de etiquetas semánticas contribuye a que el código HTML sea más comprensible y de fácil lectura. A diferencia de utilizar etiquetas genéricas como <div> con nombres de clases que no son claros, las etiquetas semánticas como <article>, <section> y <header> señalan de forma precisa la función de cada segmento de contenido. Esta nitidez favorece el mantenimiento del código, posibilita la cooperación entre programadores y vuelve más sencillas las tareas de corrección de errores y perfeccionamiento.
Si la forma en que está escrito el código muestra claramente de qué trata el contenido, los programadores pueden entender fácilmente cómo está organizada la página, lo que acelera el trabajo de desarrollo y simplifica las correcciones. Las etiquetas semánticas funcionan como una guía integrada, disminuyendo el esfuerzo mental requerido para entender el código fuente. Esto es especialmente útil cuando varios programadores colaboran en un mismo proyecto. Usar nombres claros para los elementos semánticos ayuda a encontrar rápidamente partes específicas del contenido para corregir errores o hacer cambios. También, al usar menos etiquetas que no indican el significado y evitar usar demasiadas clases e IDs, el código se vuelve más ordenado y con menos posibilidades de tener errores.
Preparación para el Futuro y Colaboración en Equipo
Emplear HTML semántico garantiza que las páginas web estén mejor equipadas para los próximos criterios y avances tecnológicos de la red. Con la progresión de los criterios de la red, el código con estructura semántica tiene mayor probabilidad de ser compatible y de ajustarse a los cambios. La comunicación optimizada y el entendimiento mutuo que promueven las etiquetas semánticas son fundamentales para una cooperación eficiente entre los equipos de programación y diseño.
Esta perspectiva a largo plazo asegura la durabilidad y disminuye la posible necesidad de modificaciones conforme cambian las tecnologías de la red. El carácter nítido y descriptivo de las etiquetas semánticas suministra un lenguaje común para programadores y diseñadores, lo cual deriva en una cooperación más efectiva. Cuando la arquitectura del HTML demuestra claramente el sentido del contenido, se reducen los errores de interpretación y se simplifica un procedimiento de programación más dinámico. Esto, asimismo, simplifica la incorporación de nuevas tecnologías o la adaptación a las variaciones en los criterios de la red en el porvenir.
Etiquetas Semánticas HTML
Las etiquetas semánticas en HTML proporcionan significado al contenido de una página web, facilitando su comprensión tanto para los navegadores como para los motores de búsqueda y tecnologías de asistencia. En lugar de usar elementos genéricos como <div> o <span>, se emplean etiquetas como <header>, <nav>, <article> y <section> para estructurar el contenido de forma clara y accesible. Su uso mejora la legibilidad, la accesibilidad y la optimización para motores de búsqueda (SEO)
Etiqueta HTML <main>: Contenido Principal Semánticamente Definido
Definición <main>
La etiqueta <main> en HTML se utiliza para definir el contenido principal de un documento. Representa la sección central de la página que es única y relevante para el propósito del documento.
Características clave <main>
- Contenido único y relevante: Contiene el contenido principal del documento, que es único y relevante para la página.
No debe incluir elementos repetitivos como menús, barras laterales o pies de página. - Debe haber solo una etiqueta
<main>por página: HTML5 establece que solo puede existir una etiqueta<main>en cada documento.
No debe anidarse dentro de elementos como<header>,<nav>,<aside>o<footer>. - Mejora la accesibilidad: Facilita la navegación para usuarios con tecnologías de asistencia, como lectores de pantalla.
Permite saltar directamente al contenido principal con accesos rápidos de teclado. - No tiene impacto visual directo:
<main>no afecta el estilo visual por sí mismo, pero puede ser estilizado con CSS. - Mejora el SEO (Optimización para Motores de Búsqueda): Ayuda a los motores de búsqueda a identificar el contenido más importante de la página.
Sintaxis Correcta <main>
La etiqueta <main> se utiliza para definir el contenido principal de una página web.
<body>
<nav>
<!-- Menú de navegación --->
</nav>
<header>
<!-- Encabezado de la página --->
</header>
<main>
<!-- Contenido principal de la página --->
<h1>Título principal</h1>
<p>Párrafo del contenido principal</p>
</main>
<footer>
<!-- Pie de página --->
</footer>
</body>
Se debe utilizar correctamente para evitar problemas de accesibilidad y estructura semántica.
Uso <main>
La etiqueta <main> se debe usar en las siguientes situaciones:
- Páginas con contenido principal único, como artículos, descripciones de productos o información empresarial.
- Blogs y noticias, para destacar publicaciones relevantes.
- Tiendas en línea, mostrando productos y detalles importantes.
- Portafolios y sitios corporativos, en secciones como "Acerca de Nosotros" o "Servicios".
- Documentación técnica y tutoriales, donde se explica información detallada.
- Foros y comunidades, para mostrar discusiones o preguntas de los usuarios.
- Resultados de búsqueda, cuando se presentan listas de coincidencias.
- Portales educativos y cursos en línea, para mostrar lecciones o materiales de estudio.
Relación con Otras Etiquetas <main>
-
<section>agrupa contenido relacionado dentro de<main>. -
<article>se usa para artículos o publicaciones individuales dentro de<main>.- Un
<main>puede contener múltiples<article>. - Un
<article>puede ser el contenido principal en ciertos casos. Si la página contiene un único artículo, este puede representar la totalidad del contenido principal.
- Un
- Trabaja en conjunto con etiquetas como
<header>,<nav>,<asidey<footer>, pero sin incluirlas dentro.
Buenas Prácticas y Errores Comunes <main>
- Buenas prácticas:
- Usar solo un
<main>por página. - Evitar colocarlo dentro de
<header>,<footer>,<nav>o<aside>. - Usar atributos
aria-*cuando sea necesario para mejorar accesibilidad. - Asegurar que el
<main>contenga contenido relevante: Debe contener información significativa, no solo enlaces o elementos decorativos. - Aplicar estilos CSS adecuados sin afectar la semántica: Se recomienda agregar un
max-width,marginypaddingadecuados para mejorar la presentación del contenido.
- Usar solo un
- Errores comunes:
- Abuso de la etiqueta: vita resaltar grandes bloques de texto con
<mark>. - Uso inapropiado: No uses
<mark>para indicar importancia, usa<strong>. - Falta de contraste: Utiliza colores que permitan leer el texto resaltado.
- Ignorar la accesibilidad: Considera el impacto del resaltado en usuarios con discapacidades.
- Confusión con otras etiquetas: Diferencia el uso de
<mark>de etiquetas como "b" o "strong".
Configuración CSS por Defecto <main>
En la mayoría de los navegadores, <main> tiene las siguientes propiedades CSS por defecto:
main {
display: block; /* Se comporta como un bloque */
}
Ejemplo Aplicado en un Proyecto Real <main>
Ejemplo de página de blog usando <main>:
See the Pen <main> by Eduardo Herrera Forero (@eduardoherreraf) on CodePen.
La etiqueta <main> se utiliza para delimitar el contenido principal del blog, mejorando la accesibilidad y la organización semántica al englobar las tres secciones. Se ha destacado visualmente con color verde.
Uso con Tecnologías de Asistencia (ARIA) <main>
El uso correcto del <main> en combinación con tecnologías de asistencia (como lectores de pantalla) y atributos ARIA es clave para mejorar la accesibilidad de una página web. A continuación, se detallan las mejores prácticas y ejemplos de uso.
Los lectores de pantalla utilizan <main> para identificar rápidamente la sección principal del contenido de una página, permitiendo a los usuarios con discapacidad navegar más eficientemente. Esto evita que tengan que recorrer menús, barras laterales u otras secciones irrelevantes antes de llegar al contenido esencial.
Ejemplo con un lector de pantalla como NVDA o JAWS:
- Al presionar "M", el lector de pantalla saltará directamente al
<main>. - Si se usa
role="main", se mejora aún más el soporte en navegadores más antiguo.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Accesible con <main></title>
</head>
<body>
<!-- Descripción general para usuarios con lectores de pantalla -->
<p id="descripcion-main" hidden>Esta sección contiene el contenido principal del sitio, incluyendo artículos y noticias relevantes.</p>
<header>
<h1>Sitio Web de Noticias</h1>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Tecnología</a></li>
<li><a href="#">Ciencia</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<!-- Contenido principal con todos los atributos ARIA -->
<main id="main-content" role="main" aria-labelledby="titulo-principal" aria-describedby="descripcion-main">
<h2 id="titulo-principal">Últimas Noticias</h2>
<article>
<h3>Avances en Inteligencia Artificial</h3>
<p>Los últimos desarrollos en IA están revolucionando la tecnología...</p>
</article>
<article>
<h3>Exploración Espacial</h3>
<p>La NASA ha anunciado nuevas misiones a Marte en 2025...</p>
</article>
</main>
<aside aria-labelledby="aside-info">
<h2 id="aside-info">Artículos Relacionados</h2>
<ul>
<li><a href="#">Cómo la IA está transformando la medicina</a></li>
<li><a href="#">El futuro de la exploración espacial</a></li>
</ul>
</aside>
<footer>
<p>© 2025 Noticias del Futuro</p>
</footer>
</body>
</html>
Explicación de los atributos ARIA usados en <main>
-
role="main": Asegura que<main>sea identificado correctamente por tecnologías de asistencia, especialmente en navegadores antiguos. -
id="main-content": Proporciona un identificador único para el<main>, permitiendo que otros elementos ARIA lo referencien. -
aria-labelledby="titulo-principal": Relaciona el contenido de<main>con su encabezado principal (<h2 id="titulo-principal">Últimas Noticias</h2>), mejorando la navegación. -
aria-describedby="descripcion-main": Proporciona una descripción adicional a los usuarios de lectores de pantalla sobre el propósito del<main>, haciendo referencia al<p id="descripcion-main">oculto.</p>.
Etiqueta HTML <section>: Agrupación Temática de Contenido
Definición <section>
La etiqueta <section> en HTML se utiliza para definir una sección dentro de un documento web. Una sección representa un conjunto de contenido relacionado temáticamente, que puede incluir encabezados, párrafos, imágenes u otros elementos. Se usa principalmente para estructurar correctamente el contenido de una página, mejorando la semántica y la accesibilidad.
Características clave <section>
La etiqueta <section> en HTML es un elemento semántico que se utiliza para definir secciones de contenido dentro de una página web. Algunas de sus características clave son:
- Elemento semántico: Ayuda a estructurar el contenido de manera significativa, lo que facilita la accesibilidad y el SEO.
- Agrupación de contenido: Se usa para agrupar contenido relacionado dentro de una página, como secciones de un artículo, capítulos de un documento o bloques de información.
- Diferente de
<div>: Mientras que<div>se usa para propósitos de diseño sin aportar significado semántico,<section>tiene un propósito más estructurado y significativo. - Puede contener otros elementos: Dentro de una
<section>se pueden incluir encabezados (<h1>a<h6>), párrafos, imágenes, listas y otros elementos HTML. - Ayuda en la accesibilidad: Permite que los lectores de pantalla y motores de búsqueda comprendan mejor la estructura del contenido.
- Puede incluir su propio encabezado: Se recomienda que cada
<section>tenga un<h2>o un<h3>para indicar claramente el tema de la sección. - Útil para dividir contenido extenso: Facilita la organización de contenido en páginas largas, mejorando la experiencia del usuario.
Sintaxis Correcta <section>
La forma correcta de escribir la etiqueta <section> es:
<section>
<h2>Título de la Sección</h2>
<p>Contenido de la sección.</p>
</section>
- Se recomienda incluir un encabezado (
<h1>-<h6>) dentro de<section>para describir su contenido, ya que mejora la estructura del documento y la accesibilidad. Permite una correcta jerarquía del contenido, facilitando la navegación en tecnologías de asistencia. - Permite una correcta jerarquía del contenido, facilitando la navegación en tecnologías de asistencia.
Uso <section>
El elemento <section> se emplea para estructurar el contenido de una página web de manera semántica. Se utiliza cuando es necesario dividir el contenido en secciones claramente diferenciadas, como partes de un artículo, bloques de servicios, o cualquier agrupación de información relacionada.
- Dividir Contenido en Secciones Temáticas: Se utiliza para agrupar contenido relacionado en secciones lógicas, como capítulos en un artículo, secciones de productos en una tienda en línea o diferentes áreas de contenido en una página de inicio.
- Organizar Artículos y Publicaciones de Blog: Cada sección de un artículo o publicación de blog puede estar dentro de una etiqueta
<section>, lo que facilita la lectura y la navegación. - Crear Secciones de Productos o Servicios: En una página de comercio electrónico, cada categoría de productos o servicio puede estar dentro de una etiqueta
<section>, lo que mejora la organización y la presentación. - Dividir el Contenido de una Página de Inicio: La página de inicio de un sitio web puede dividirse en varias secciones, como "Acerca de nosotros", "Servicios", "Productos destacados" y "Contacto", cada una dentro de una etiqueta
<section>. - Organizar Contenido en Páginas de Documentación: En una página de documentación, se pueden usar etiquetas
<section>para dividir el contenido en diferentes secciones, como "Introducción", "Instalación", "Uso" y "Ejemplos". - Crear Páginas de una Sola Página: En una página de una sola página, se pueden usar etiquetas
<section>para dividir el contenido en diferentes secciones que se desplazan suavemente al hacer clic en los enlaces de navegación.
Relación con Otras Etiquetas <section>
-
<article>:- Un
<article>puede contener varias<section>para dividir su contenido en partes temáticas. - Se usa
<article>para contenido independiente y<section>para dividirlo en secciones. - Una
<section>puede contener varios<article>. - Se usa cuando los
<article>comparten un tema en común dentro de una misma sección.
- Un
-
<div>: La etiqueta<section>tiene un significado semántico, mientras que<div>simplemente agrupa elementos sin proporcionar contexto adicional. Se recomienda utilizar<section>cuando el contenido tiene un propósito específico dentro de la estructura del documento, y usar<div>principalmente cuando el objetivo es aplicar estilos o realizar agrupaciones sin implicaciones semánticas. -
<header>y<footer>:- Cada
<section>puede tener su propio<header>y<footer>, no solo el documento principal. -
<header>en una<section>ayuda a contextualizar su contenido. -
<footer>puede usarse dentro de<section>para incluir información relevante como la fuente o fecha.
- Cada
-
<nav>:-
<nav>se usa para navegación y puede estar dentro de una<section>si es parte del contenido. - También
<section>puede estar dentro de<nav>si se organizan varias áreas de navegación.
-
-
<aside>:-
<aside>se usa para contenido complementario, mientras que<section>es parte del contenido principal. -
<aside>puede estar dentro de una<section>o viceversa, dependiendo del contexto. -
<aside>debe usarse para información adicional como citas, enlaces relacionados o publicidad.
-
Buenas Prácticas y Errores Comunes <section>
- Buenas prácticas:
- Incluir un encabezado dentro de cada
<section>: - Usar
aria-labelledbypara accesibilidad: - Mantener una estructura clara del contenido.
- Usar
<section>para contenido temáticamente relacionado.
- Incluir un encabezado dentro de cada
- Errores comunes:
- Usar
<section>sin encabezados. - Emplear
<section>para estilizar en lugar de<div> - Anidar secciones sin relación temática.
- Usar
Configuración CSS por Defecto <section>
Los navegadores aplican la siguiente configuración por defecto a <section>:
section {
display: block; /* Se comporta como un bloque */
}
Ejemplo Aplicado en un Proyecto Real <section>
Código de una página con varias secciones:
See the Pen <section> by Eduardo Herrera Forero (@eduardoherreraf) on CodePen.
Explicación del código:
- Se incluyen tres secciones: Introducción, Desarrollo y Conclusión.
- Se aplica CSS básico para mejorar la apariencia.
- Se usa
<section>para estructurar el contenido semánticamente.
Uso con Tecnologías de Asistencia (ARIA) <section>
Para mejorar la accesibilidad, se pueden usar atributos aria-* en <section>, como:
| Atributo ARIA | Función |
|---|---|
aria-labelledby="id" | Asocia la sección con un encabezado. |
aria-describedby="id" | Proporciona una descripción adicional. |
role="region" | Define la sección como una región importante. |
Ejemplo con ARIA:
<section id="noticias" role="region" aria-labelledby="titulo-noticias" aria-describedby="descripcion-noticias">
<h2 id="titulo-noticias">Últimas Noticias</h2>
<p id="descripcion-noticias">En esta sección se presentan las noticias más recientes del día.</p>
<article>
<h3>Noticia 1</h3>
<p>La industria tecnológica sigue avanzando con nuevos lanzamientos innovadores.</p>
</article>
<article>
<h3>Noticia 2</h3>
<p>El cambio climático sigue siendo un tema central en la agenda global.</p>
</article>
</section>
Etiqueta HTML <article>: Contenido Autónomo y Completo
Definición <article>
La etiqueta HTML <article> se utiliza para definir un contenido independiente dentro de un documento HTML. Esto significa que el contenido dentro de <article> tiene sentido por sí mismo y puede ser distribuido o reutilizado de forma independiente.
Características Clave <article>
- Independencia: Un
<article>representa una composición completa en sí misma. Podría ser distribuido o reutilizado en otro contexto (por ejemplo, en un feed de noticias, un archivo, o incluso en otro sitio web) sin perder su significado. - Autocontenido: El contenido dentro de
<article>debe ser comprensible por sí solo. Aunque puede contener enlaces a otros recursos, no debe depender de ellos para su significado principal. - Semántica: Proporciona significado semántico al contenido, ayudando a los navegadores, motores de búsqueda y tecnologías de asistencia a comprender la estructura y el propósito del contenido.
- Estructura: Generalmente contiene elementos estructurales como
<header>,<section>,<aside>, y<footer>para organizar su contenido interno. - Contenido Principal: Representa un bloque de contenido principal, como un artículo de blog, una entrada de foro, una noticia, etc.
- Anidamiento: Puede contener otros elementos de nivel de bloque, incluyendo otros
<article>,<section>, etc. - Accesibilidad: Ayuda a mejorar la accesibilidad al proporcionar una estructura clara y semántica para las tecnologías de asistencia.
- SEO: Contribuye a una mejor optimización para motores de búsqueda (SEO) al definir claramente el contenido principal de una página.
Sintaxis Correcta <article>
La sintaxis correcta de un elemento <article> en HTML debe seguir las reglas básicas de estructura del lenguaje. A continuación, se presenta la forma correcta de usar <article>:
<article>
<h2>Título del Artículo</h2>
<p>Este es el contenido principal del artículo. Puede incluir varios elementos como encabezados, párrafos, listas, imágenes y más.</p>
<figure>
<img src="imagen.jpg" alt="Descripción de la imagen">
<figcaption>Descripción de la imagen relevante al artículo.</figcaption>
</figure>
<section>
<h3>Subsección del Artículo</h3>
<p>Esta es una sección dentro del artículo con contenido relacionado.</p>
</section>
<aside>
<h3>Información Relacionada</h3>
<p>Este es un contenido complementario, como enlaces, citas o resúmenes.</p>
</aside>
<footer>
<p>Publicado por <strong>Autor del Artículo</strong> el <time datetime="2025-03-25">25 de marzo de 2025</time>.</p>
<p><a href="#">Leer más artículos</a></p>
</footer>
</article>
Uso <article>
La etiqueta HTML <article> es una herramienta poderosa para estructurar contenido independiente y significativo en las páginas web. Aquí se presentan algunos usos y ejemplos prácticos para que se pueda comprender mejor cómo utilizarla:
Usos Comunes:
- Entradas de Blogs y Artículos de Noticias: Cada entrada de blog o artículo de noticias individual debe estar envuelto en una etiqueta
<article>. Esto permite que el contenido se pueda sindicar o reutilizar fácilmente en otros contextos. - Publicaciones de Foros y Comentarios: Cada publicación individual en un foro de discusión o cada comentario de usuario en un artículo puede ser marcado con
<article>. - Widgets y Contenido Reutilizable: Si tienes contenido que se puede reutilizar en diferentes partes de tu sitio web o en otros sitios, como un widget de noticias o un fragmento de información, puedes envolverlo en una etiqueta
<article>. - Contenido de Sindicación (RSS): Los lectores de RSS utilizan la etiqueta
<article>para identificar el contenido principal de una página y mostrarlo en sus feeds.
Relación con Otras Etiquetas <article>
-
<main>: Puede contener uno o varios<article>, pero<article>nunca debe contener un <main>. -
<section>: Se puede usar<section>dentro de<article>o viceversa, dependiendo de la estructura deseada. -
<aside>: Puede estar dentro de<article>(si la información complementa el artículo) o fuera de<article>(si complementa todo el sitio web). -
<header>: Contiene títulos, fechas o metadatos relacionados con el artículo. -
<footer>: Muestra información como el autor, la fecha de publicación o enlaces relacionados.
Buenas Prácticas y Errores Comunes <article>
- Buenas prácticas:
- Un
<article>debe representar contenido que tenga sentido por sí mismo y pueda ser reutilizado o distribuido fuera de su contexto original. - Utilizar
<header>para los títulos o metadatos del artículo y<footer>para información del autor, la fecha de publicación o enlaces adicionales. - Si el artículo tiene varias partes o secciones temáticas, se recomienda dividirlo con
<section>. - Anidar
<article>dentro de<main>para mejorar la semántica - Usar
<aside>dentro de<article>solo para información complementaria
- Un
- Errores comunes:
- Usar
<article>para agrupar contenido sin relación. - Incluir
<main>dentro de<article>. - No usar encabezados
<h1>-<h6>dentro de<article>. - Anidar
<article>dentro de otro<article>sin justificación.
- Usar
Configuración CSS por Defecto <article>
Los navegadores aplican los siguientes estilos base a <article>:
article {
display: block; /* Se comporta como un bloque */
}
Ejemplo Aplicado en un Proyecto Real <article>
Este código representa un blog básico con dos <article>s, un diseño limpio y un botón para activar el modo oscuro.
See the Pen <article> by Eduardo Herrera Forero (@eduardoherreraf) on CodePen.
Uso con Tecnologías de Asistencia (ARIA) <article>
El uso de ARIA en <article> mejora la accesibilidad y experiencia de navegación. Se recomienda:
- Usar
aria-labelledbypara vincular títulos con artículos. - Aplicar
role="article"en elementos no semánticos si es necesario. - Asociar información con
aria-describedbypara mayor contexto. - Implementar
aria-liveen artículos con contenido dinámico.
Esto garantiza que los artículos sean comprensibles y navegables por todas las personas, incluyendo usuarios de lectores de pantalla.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Article con ARIA</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
text-align: center;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
}
article {
background: white;
padding: 15px;
margin: 15px 0;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
button {
margin: 10px;
padding: 10px;
background: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<main aria-labelledby="titulo-principal">
<h1 id="titulo-principal">Últimas Noticias</h1>
<div class="container">
<!-- Article con ARIA -->
<article id="noticia1" aria-labelledby="titulo-noticia1" aria-describedby="descripcion1" aria-live="polite">
<h2 id="titulo-noticia1">Avance en la Inteligencia Artificial</h2>
<p id="descripcion1">Un nuevo algoritmo ha sido desarrollado para mejorar el procesamiento del lenguaje natural.</p>
<p id="fuente1">Fuente: Universidad Tecnológica, 2025.</p>
</article>
<article id="noticia2" aria-labelledby="titulo-noticia2" aria-describedby="descripcion2">
<h2 id="titulo-noticia2">Nuevas Baterías de Alta Duración</h2>
<p id="descripcion2">Las nuevas baterías de estado sólido prometen mejorar la autonomía de los dispositivos móviles.</p>
<p id="fuente2">Fuente: Revista de Tecnología, 2025.</p>
</article>
</div>
<button onclick="actualizarNoticia()">🔄 Actualizar Noticia</button>
</main>
<script>
function actualizarNoticia() {
document.getElementById("descripcion1").innerText = "Investigadores han logrado aumentar la precisión en modelos de lenguaje artificial.";
}
</script>
</body>
</html>
Etiqueta HTML <nav>: Sección de Enlaces para Navegación
Definición <nav>
La etiqueta HTML <nav> define una sección de enlaces de navegación en un documento.
Características Clave <nav>
-
<nav>es un elemento semántico clave en la estructura de una página web. - Agrupa enlaces a diferentes secciones de la misma página o a otras páginas del sitio.
- Se pueden usar múltiples
<nav>en un solo documento, por ejemplo:- Menú Principal en la parte superior.
- Navegación Secundaria dentro de una sección específica.
-
<nav>ya tiene implícitamente el rol navigation, pero en elementos genéricos como<div>, se debe agregar manualmente. - Compatible con CSS y JavaScript para mejorar la apariencia visual.
Sintaxis Correcta <nav>
El elemento <nav> se usa para definir secciones de navegación en una página web. Su estructura básica es sencilla y permite contener listas de enlaces o menús de navegación.
Sintaxis Básica <nav>
<header>
<nav>
<a href="home.html">Inicio</a>
<a href="blog.html">Blog</a>
<a href="contacto.html">Contacto</a>
</nav>
</header>
<nav>define el contenedor de navegación.<ul>agrupa los elementos de la lista de enlaces.<li>representa cada elemento del menú.<a>es el enlace a la sección o página correspondiente.
Sintaxis con Etiquetas Semánticas <nav>
Se recomienda usar <header> o <footer> para organizar mejor la estructura de la página.
<header>
<nav>
<a href="home.html">Inicio</a>
<a href="blog.html">Blog</a>
<a href="contacto.html">Contacto</a>
</nav>
</header>
Ejemplo con Submenús <nav>
Se pueden crear menús desplegables dentro de <nav>.
<nav>
<ul>
<li><a href="home.html">Inicio</a></li>
<li>
<a href="#">Servicios ▼</a>
<ul>
<li><a href="web.html">Desarrollo Web</a></li>
<li><a href="seo.html">SEO</a></li>
</ul>
</li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
- Permite anidar listas
<ul>dentro de<li>para submenús. - Se puede mejorar con CSS para mostrar los submenús al pasar el cursor.
Uso <nav>
- Menús de navegación principal: Contiene los enlaces clave de un sitio web.
- Menús secundarios: Puede utilizarse para secciones internas o categorías.
- Índices de contenido: Cuando hay una lista de enlaces internos para facilitar la navegación en una página extensa.
- Menús de navegación en encabezados (
<header>) o pies de página (<footer>). - Navegación dentro de un documento largo: Índices con enlaces a diferentes partes del mismo documento.
- Breadcrumbs (Migas de Pan): Un patrón de navegación que muestra la ubicación actual del usuario.
Relación con Otras Etiquetas <nav>
-
<nav>se combina con<header>y<footer>para estructurar la navegación global. - No debe estar dentro de
<main>, pero sí puede precederlo. - Se usa en
<aside>para menús laterales. - Puede aparecer en
<section>y<article>para navegación relacionada con el contenido.
Buenas Prácticas y Errores Comunes <nav>
- Buenas prácticas:
- Usar
<nav>solo para navegaciones importantes dentro de la página. - Siempre organizar los enlaces en listas (
<ul>o<ol>). - No incluir
<nav>dentro de<main>,sino antes o después. - Usar atributos ARIA (
aria-label) para mejorar la accesibilidad. - No duplicar
<nav>innecesariamente sin diferenciarlos, deben tener diferentes roles.
- Usar
- Errores comunes:
- Incluir
<nav>dentro de<main>. - Usar
<nav>para un solo enlace. - No especificar el propósito del
<nav>. - Incluir contenido no relacionado dentro de
<nav>.
- Incluir
Configuración CSS por Defecto <nav>
nav {
display: block;
}
Ejemplo Aplicado en un Proyecto Real <nav>
A continuación, se presenta un ejemplo de una barra de navegación simple pero funcional, que podría utilizarse en un sitio web real. Se incluye HTML y CSS para lograr un diseño limpio y adaptable.
See the Pen <nav> by Eduardo Herrera Forero (@eduardoherreraf) on CodePen.
Explicación del Código:
- Estructura simple: Se usa
<nav>para envolver la navegación principal. - Lista de enlaces: Se organiza dentro de
<ul>con<li>. - Enlaces estilizados: Se les da color, espaciado y efecto hover.
- Diseño responsivo: Se adapta a pantallas pequeñas con @media.
Uso con Tecnologías de Asistencia (ARIA) <nav>
El elemento <nav> es semántico por defecto, lo que significa que los lectores de pantalla y otras tecnologías de asistencia lo identifican automáticamente como un área de navegación. Sin embargo, en algunos casos, puede ser útil mejorar la accesibilidad con atributos ARIA (Accessible Rich Internet Applications).
Cuándo Usar ARIA en <nav>
En la mayoría de los casos, no es necesario agregar atributos ARIA a <nav> porque ya es reconocido por los lectores de pantalla. Sin embargo, se pueden agregar etiquetas ARIA en los siguientes casos:
- Si hay múltiples áreas de navegación en la página: Se recomienda agregar
aria-labeloaria-labelledbypara diferenciar cada<nav>. - Si la navegación es colapsable o dinámica: Se pueden usar atributos como aria-hidden, aria-expanded o aria-controls para indicar cambios en la visibilidad.
Etiqueta HTML <aside>: Representa el contenido complementario o relacionado
Definición <aside>
La etiqueta semántica <aside> de HTML que representa contenido complementario o relacionado con el contenido principal, como barras laterales, enlaces adicionales o información secundaria.
Características Clave <aside>
- Contenido Complementario: Contiene información relacionada pero no esencial para el contenido principal.
- Ubicación Flexible: Puede estar dentro o fuera de
<article>, dependiendo de su relación con el contenido. - Usos Comunes: Se emplea en barras laterales, enlaces relacionados, anuncios o notas informativas.
- Elemento Semántico: Mejora la accesibilidad y estructura del documento para motores de búsqueda y lectores de pantalla.
- No es Contenido Principal: Su información debe ser útil, pero no indispensable para la comprensión del contenido central.
Sintaxis Correcta <aside>
La etiqueta <aside> se usa para contenido complementario y debe estar correctamente estructurada en HTML.
<aside>
<h2>Artículos Relacionados</h2>
<ul>
<li><a href="articulo1.html">Tema 1</a></li>
<li><a href="articulo2.html">Tema 2</a></li>
<li><a href="articulo3.html">Tema 3</a></li>
</ul>
</aside>
Uso <aside>
El elemento <aside> se usa cuando se necesita incluir contenido complementario o relacionado con el contenido principal, pero que no es esencial para su comprensión.
Casos de Uso Comunes:
- Barras laterales: Contenido adicional como widgets, enlaces o información extra.
- Artículos relacionados: Sugerencias de lectura dentro de una noticia o blog.
- Citas o notas informativas: Información adicional sobre un tema.
- Anuncios publicitarios: Publicidad contextual dentro de una página.
Relación con Otras Etiquetas <aside>
-
<article>:<aside>se puede usar dentro de<article>para agregar información complementaria, como notas o referencias. -
<main>:<aside>puede estar dentro de<main>, pero su contenido no debe ser el principal. -
<section>: Se puede usar<aside>dentro de<section>cuando se desea incluir información secundaria. -
<nav>: Aunque<aside>puede contener enlaces, no debe reemplazar a<nav>, ya que este último es para navegación principal. -
<footer>:<aside>puede colocarse dentro de<footer>si se desea agregar contenido secundario, como enlaces adicionales o datos complementarios.
Buenas Prácticas y Errores Comunes <aside>
- Buenas prácticas:
- Usar
<aside>solo para contenido complementario. - Ubicarlo correctamente dentro de la estructura HTML: Puede estar dentro de
<aside>para información relacionada o fuera de él si es más general. - Complementar con ARIA cuando sea necesario.
- Mantener un diseño claro y no sobrecargar con información
- Usar
- Errores comunes:
- Usar
<aside>para contenido esencial. - Usarlo para navegación principal.
- Incluir
<aside>dentro de<header>o<footer>sin necesidad. - No diferenciarlo visualmente del contenido principal.
Configuración CSS por Defecto <aside>
En los navegadores modernos, <aside> tiene la siguiente configuración predeterminada:
aside {
display: block; /* Se comporta como un bloque */
}
Ejemplo Aplicado en un Proyecto Real <aside>
See the Pen <aside> by Eduardo Herrera Forero (@eduardoherreraf) on CodePen.
Uso de <aside>:
- Contenido complementario (consejo del chef).
- No esencial para la receta, pero añade valor.
- Información extra que enriquece la comprensión.
Uso con Tecnologías de Asistencia (ARIA) <aside>
El elemento <aside> es semántico y por sí mismo es reconocido por lectores de pantalla como contenido complementario. Sin embargo, se puede mejorar su accesibilidad con atributos ARIA en ciertos casos.
ARIA Recomendado para <aside>
-
role="complementary": Se usa cuando<aside>contiene información relevante pero no esencial para la comprensión del contenido principal. ¿Cuándo usarlo? Cuando el<aside>está fuera de<article>y proporciona información adicional a todo el sitio. -
aria-labelledby: Se usa para vincular<aside>con su título, asegurando que los lectores de pantalla anuncien correctamente el propósito del contenido. -
aria-describedby: Se usa cuando<aside>complementa un contenido específico y se quiere que los lectores de pantalla lo asocien correctamente. ¿Cuándo usarlo? Cuando<aside>complementa un contenido específico y se debe establecer esa relación para tecnologías de asistencia.
Etiqueta HTML <header>: Representa la cabecera de una sección o página
Definición <header>
La etiqueta<header> en HTML es un elemento semántico que se utiliza para representar un encabezado introductorio dentro de un documento o una sección. Generalmente, contiene elementos como títulos (<h1> a <h6>), logotipos, menús de navegación, descripciones o cualquier otro contenido relacionado con la identidad o presentación de la página o sección. Características Clave <header>
- Elemento Semántico:
- Representa la sección de encabezado de un documento o una sección.
- Ayuda a mejorar la estructura y accesibilidad del documento.
- No limita su uso a la cabecera principal de una página web.
- Uso en Múltiples Secciones:
- Puede utilizarse tanto en el encabezado global de una página web como en secciones individuales dentro del documento.
- No está limitado a una sola aparición en la página.
- Contenido Común en
<header>:- Títulos (
<h1>a<h6>). - Logotipos.
- Menús de navegación (
<nav>). - Slogans o descripciones.
- Imágenes de encabezado.
- Títulos (
Sintaxis Correcta <header>
La etiqueta <header> sigue una estructura simple y clara en HTML. No requiere atributos obligatorios y su contenido puede variar según la necesidad del desarrollador.
<header>
<h1>En Esta Página</h1>
<nav>
<ul>
<li><a href="#">Capítulo 1</a></li>
<li><a href="#">Capítulo 2</a></li>
<li><a href="#">Capítulo 3</a></li>
</ul>
</nav>
</header>
Uso <header>
La etiqueta <header> se usa para definir un encabezado en un documento o en una sección específica de una página web. Sirve para incluir información introductoria, como:
- Títulos (
<h1>a<h6>). - Logotipos (
<img>). - Menús de navegación (
<nav>). - Frases descriptivas o eslóganes (
<p>).
Relación con Otras Etiquetas <header>
La etiqueta <header> es un elemento semántico que se relaciona con varias otras etiquetas en HTML, ayudando a estructurar correctamente una página web. A continuación, se explica su relación con otras etiquetas importantes:
-
<head>,<footer>,<address>: La etiqueta<header>no debe estar adentro de estas etiquetas. -
<nav>: Integración Natural, el<header>frecuentemente contiene un elemento<nav>para menús de navegación. -
<h1>-<h6>: Un<h1>dentro del<header>generalmente representa el título principal. Otros encabezados pueden usarse para subtítulos o información complementaria. -
<article>y<section>: Múltiples Instancias, un<header>puede existir dentro de:- El
<body>principal del documento. - Múltiples
<article>. - Diferentes
<section>.
- El
-
<img>: Inclusión de Logotipos, frecuentemente contiene imágenes de logo o encabezado. -
<aside>: Contenido Complementario, un<header>dentro de un<aside>puede contener información adicional.
Buenas Prácticas y Errores Comunes <header>
- Buenas prácticas:
- Usar
<header>para Encabezados Principales y Seccionales: La etiqueta<header>no solo se usa para el encabezado principal de una página, sino también dentro de<section>y<article>para definir encabezados de secciones. - Incluir Elementos Relevantes dentro de
<header>: El<header>debe contener información introductoria relevante:- Títulos (
<h1>a<h6>). - Menús de navegación (
<nav>). - Logotipos (
<img>). - Frases descriptivas (
<p>).
- Títulos (
- Mantener una Jerarquía Correcta de Encabezados: Cada
<header>debe seguir una estructura jerárquica adecuada en los títulos (<h1>a<h6>).
- Usar
- Errores comunes:
- Usar
<header>dentro de<footer>o<address>. - Usar
<header>dentro de Otro<header>. - Usar
<header>sin Contenido Relevante.
Configuración CSS por Defecto <header>
Por defecto, los navegadores aplican las siguientes reglas de estilo a <header>:
header {
display: block; /* Se comporta como un bloque */
}
Ejemplo Aplicado en un Proyecto Real <header>
See the Pen <header> by Eduardo Herrera Forero (@eduardoherreraf) on CodePen.
Características destacadas del <header>:
- Este
<header>contiene tanto información personal como el menú de navegación - Incluye una imagen de perfil y detalles personales
- Menú de navegación con enlaces a diferentes secciones del sitio
Uso con Tecnologías de Asistencia (ARIA) <header>
La etiqueta <header> mejora la accesibilidad al proporcionar una estructura semántica clara para el contenido de una página web. Sin embargo, para optimizar su interacción con tecnologías de asistencia como lectores de pantalla, se pueden emplear atributos de ARIA (Accessible Rich Internet Applications).
Uso de ARIA en <header>:
-
role="banner"para el Encabezado Principal :- Se usa en el
<header>principal de la página. - Indica que el contenido dentro del
<header>representa la identidad del sitio, generalmente con logotipos, menús de navegación y encabezados principales. - Solo debe haber un
<header>conrole="banner"en toda la página.
- Se usa en el
-
aria-labelledbypara Mejor Identificación del Contenido:- Se usa cuando el
<header>necesita una referencia clara a un título o descripción específica. - Ayuda a los lectores de pantalla a identificar mejor la función del encabezado.
- Se usa cuando el
-
aria-hidden="true"para Encabezados Decorativos: Si un<header>solo contiene elementos decorativos (como imágenes sin información relevante para la navegación), se puede ocultar de los lectores de pantalla.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Header Accesible</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
border-bottom: 3px solid #f39c12;
}
h1, h2 {
margin: 0;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
}
section {
padding: 20px;
}
.decorativo {
background-color: #f4f4f4;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<!-- ✅ HEADER PRINCIPAL con role="banner" -->
<header role="banner">
<h1>Mi Sitio Web</h1>
<nav aria-label="Menú Principal">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<!-- ✅ HEADER SECUNDARIO con aria-labelledby -->
<section>
<header aria-labelledby="titulo-seccion">
<h2 id="titulo-seccion">Últimas Noticias</h2>
</header>
<p>Esta es la sección de noticias con la información más reciente.</p>
</section>
<!-- ✅ HEADER DECORATIVO con aria-hidden="true" -->
<header class="decorativo" aria-hidden="true">
<img src="banner.jpg" alt="Decoración">
</header>
</body>
</html>
Explicación del Código:
-
role="banner":- Se usa en el
<header>principal para indicar que representa la identidad del sitio. - Solo debe haber uno por página.
- Se usa en el
-
aria-labelledby="titulo-seccion":- Se usa en un
<header>secundario dentro de una sección. - Permite que los lectores de pantalla asocien correctamente el encabezado con su contenido.
- Se usa en un
-
aria-hidden="true":- Se aplica a un
<header>decorativo que no contiene información relevante para los usuarios. - Evita que los lectores de pantalla lo lean innecesariamente.
- Se aplica a un
Etiqueta HTML <footer>: Define el pie de página de un documento o sección
Definición <footer>
El elemento <footer> en HTML representa el pie de página de una sección o de un documento. Generalmente, se utiliza dentro de un documento HTML para contener información de contacto, derechos de autor, enlaces a documentos relacionados, autoría, términos de uso o cualquier otro contenido que sea relevante como cierre de una sección o de toda la página.
Características Clave <footer>
- Elemento Semántico:
<footer>es un elemento semántico en HTML5, lo que significa que su propósito es proporcionar significado estructural al documento. Su función es indicar que el contenido dentro de este elemento pertenece a la parte final de una sección o página. Al ser semántico, facilita la accesibilidad y la indexación por parte de los motores de búsqueda. - Uso en Múltiples Secciones: Aunque es común encontrar un
<footer>en la parte inferior del documento dentro de<body>, también se puede incluir en otros elementos como<article>,<section>y<aside>. Esto permite que diferentes secciones del sitio web tengan su propio pie de página con información específica, como referencias o enlaces internos. - Contenido Común en
<footer>- Información de derechos de autor (© Año Nombre),
- Enlaces a políticas de privacidad y términos de uso,
- Datos de contacto (correo electrónico, dirección o redes sociales),
- Enlaces de navegación adicionales,
- Información del autor o la fuente en artículos o secciones específicas.
Sintaxis Correcta <footer>
<footer>
<p>© 2025 Mi Empresa. Todos los derechos reservados.</p>
<nav>
<a href="/privacidad">Política de Privacidad</a>
<a href="/terminos">Términos y Condiciones</a>
<a href="/contacto">Contacto</a>
</nav>
<p>Síguenos en:
<a href="https://facebook.com/miempresa" target="_blank">Facebook</a> |
<a href="https://twitter.com/miempresa" target="_blank">Twitter</a> |
<a href="https://instagram.com/miempresa" target="_blank">Instagram</a>
</p>
</footer>
Uso <footer>
- Información de Contacto:
- Datos de contacto de la empresa o sitio web.
- Información de redes sociales.
- Correo electrónico o teléfono de contacto.
- Información Legal:
- Derechos de autor.
- Avisos legales.
- Políticas de privacidad.
- Términos de servicio.
- Navegación Secundaria:
- Enlaces a páginas importantes.
- Mapa del sitio.
- Menús de sección.
- Metadatos e Información Adicional:
- Fecha de última actualización.
- Información del autor.
- Créditos.
- Información de versión.
Relación con Otras Etiquetas <footer>
-
<header>: Mientras que<footer>se usa para el pie de página,<header>se utiliza para la cabecera de un documento o sección. Ambas etiquetas son complementarias y ayudan a estructurar el contenido de una página web. -
<section>: La etiqueta<footer>puede ser utilizada dentro de una<section>para definir un pie de página específico para esa sección. Esto es útil para documentos largos con múltiples secciones. -
<article>: Similar a<section>, un<footer>dentro de un<article>proporciona información relacionada con ese artículo en particular, como metadatos o enlaces relacionados. -
<main>: La etiqueta<footer>generalmente se coloca fuera de<main>, ya que<main>se utiliza para el contenido principal de la página, mientras que<footer>es para información adicional o de cierre. -
<nav>: Aunque no están directamente relacionadas,<footer>a menudo contiene enlaces de navegación secundarios o enlaces a políticas de privacidad, términos de uso, etc., que pueden ser parte de una<nav>.
Buenas Prácticas y Errores Comunes <footer>
- Buenas prácticas:
- Estructura Semántica: Usar
<footer>para información de cierre o complementaria - Accesibilidad:
- Usar encabezados (
<h4>,<h5>) para organizar contenido - Proporcione texto alternativo en enlaces
- Asegure contraste de color para legibilidad
- Use etiquetas semánticas como
<nav>para grupos de enlaces
- Usar encabezados (
- Contenido Relevante:
- Incluya información útil y concisa.
- Mantenga actualizados los datos de contacto.
- Proporcione enlaces a páginas importantes.
- Diseño Adaptable:
- Adapte el footer para diferentes dispositivos.
- Use flexbox o grid para organizar contenido.
- Ajuste tamaños de fuente y espaciado.
- Optimización de Rendimiento:
- Minimice archivos CSS y JavaScript.
- Use imágenes optimizadas.
- Evite contenido pesado.
- Estructura Semántica: Usar
- Errores comunes:
- Errores de Estructura: Usar
<footer>fuera de contexto. Usar<footer>solo al final de secciones o documentos - Problemas de Accesibilidad: Sin texto alternativo en enlaces. Agregar descripciones claras
- Sobrecarga de Información: Incluir demasiados elementos. Ser selectivo, priorizar información importante
- Diseño No Adaptable: Footer estático sin adaptación móvil. Usar media queries y diseño flexible.
- Problemas de Rendimiento: Cargar recursos pesados. Optimizar imágenes y scripts
Configuración CSS por Defecto <footer>
La mayoría de los navegadores mostrarán el elemento <footer> con los siguientes valores por defecto:
footer {
display: block; /* Se comporta como un bloque (block-level element) */
unicode-bidi: isolate; /* Asegura que el contenido se aísle del resto en términos de dirección de texto */
}
display: block;: <footer> es un elemento de nivel de bloque, por lo que ocupa todo el ancho disponible.
unicode-bidi: isolate;: Asegura que el texto dentro del <footer> no se vea afectado por cambios en la dirección del texto en elementos externos.
Ejemplo Aplicado en un Proyecto Real <footer>
See the Pen <footer> by Eduardo Herrera Forero (@eduardoherreraf) on CodePen.
-
position: fixed;: Mantiene el<footer>siempre visible en la parte inferior de la ventana del navegador. -
flex: 1en.contenido: Hace que el contenido principal ocupe el espacio disponible antes del<footer>. - Diseño limpio y responsivo, adaptable a cualquier tamaño de pantalla.
Uso con Tecnologías de Asistencia (ARIA) <footer>
El elemento <footer> es semántico, lo que significa que los lectores de pantalla y otras tecnologías de asistencia pueden interpretarlo sin necesidad de atributos ARIA adicionales en la mayoría de los casos. Sin embargo, en situaciones donde se requiere mayor accesibilidad, se pueden aplicar ciertos roles y atributos ARIA.
<footer role="contentinfo" aria-labelledby="footer-title">
<h2 id="footer-title">Información Adicional</h2>
<p>© 2025 Mi Empresa. Todos los derechos reservados.</p>
<nav aria-label="Enlaces de footer">
<a href="/privacidad">Política de Privacidad</a>
<a href="/terminos">Términos y Condiciones</a>
<a href="/contacto">Contacto</a>
</nav>
</footer>
-
role="contentinfo": Refuerza la semántica del<footer>, asegurando su reconocimiento por tecnologías de asistencia. -
aria-labelen</code>nav>: Describe la navegación dentro del<footer>para mejorar la accesibilidad. -
aria-labelledbycon encabezados: Relaciona el<footer>con su título para mayor claridad.
Etiqueta HTML <figure>: Agrupa contenido multimedia
Definición <figure>
La etiqueta <figure> en HTML se usa para agrupar contenido multimedia, como imágenes, gráficos o videos, junto con su descripción opcional en una etiqueta <figcaption>. Ayuda a mejorar la semántica y accesibilidad del contenido.
La etiqueta <figcaption> en HTML se usa para agregar una descripción o leyenda a un elemento <figure>. Mejora la accesibilidad y la comprensión del contenido multimedia. Debe colocarse dentro de <figure>, generalmente como el primer o último hijo.
Características Clave <figure>
- Agrupación Semántica: Encierra contenido multimedia, como imágenes, ilustraciones o videos.
- Uso Opcional de
<figcaption>: Puede incluir una descripción asociada. - Mejora la Accesibilidad: Facilita la comprensión del contenido.
- Elemento Independiente: Puede moverse sin afectar el flujo del documento.
- Compatible con Diversos Medios: No se limita solo a imágenes.
Sintaxis Correcta <figure>
<figure>
<img src="imagen.jpg" alt="Descripción de la imagen">
<figcaption>Leyenda o descripción</figcaption>
</figure>
<figure> agrupa contenido multimedia. <figcaption> proporciona una descripción opcional. Debe ir dentro de <figure>, al inicio o al final. Compatible con imágenes, videos, audios, gráficos, tablas y código.
<picture> con Imagen:
<figure>
<img src="paisaje.jpg" alt="Paisaje montañoso">
<figcaption>Vista panorámica de los Andes</figcaption>
</figure>
<picture> con Múltiples Imágenes: Se usa para ilustraciones comparativas o secuencias de imágenes:
<figure>
<img src="foto1.jpg" alt="Primera imagen">
<img src="foto2.jpg" alt="Segunda imagen">
<figcaption>Galería de fotos de viaje</figcaption>
</figure>
<picture> con Video:
<figure>
<video src="tutorial.mp4" controls>
Tu navegador no soporta video
</video>
<figcaption>Tutorial de programación</figcaption>
</figure>
<picture> con Audio:
<figure>
<audio src="cancion.mp3" controls>
Tu navegador no soporta audio
</audio>
<figcaption>Canción del álbum 2024</figcaption>
</figure>
<picture> con Diagrama o Ilustración SVG:
<figure>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<figcaption>Diagrama de círculo básico</figcaption>
</figure>
<picture> con Código:
<figure>
<pre>
<code>
function ejemplo() {
console.log("Hola Mundo");
}
</code>
</pre>
<figcaption>Ejemplo de función JavaScript</figcaption>
</figure>
<picture> sin Leyenda (Opcional):
<figure>
<img src="grafico.png" alt="Gráfico de datos">
</figure>
<picture> con Imágenes Adaptativas:
<figure>
<picture>
<source srcset="imagen.webp" type="image/webp">
<source srcset="imagen.png" type="image/png">
<img src="imagen.jpg" alt="Descripción de la imagen">
</picture>
<figcaption>Descripción de la imagen adaptativa</figcaption>
</figure>
Explicación del código:
-
<figure>: Esta etiqueta se utiliza para agrupar contenido multimedia (como imágenes) junto con una leyenda o descripción (<figcaption>). -
<picture>: Esta etiqueta permite al navegador elegir entre múltiples versiones de una imagen, dependiendo de las capacidades del navegador y las condiciones especificadas. -
<source>: Cada etiqueta<source>dentro de<picture>especifica una versión diferente de la imagen. El navegador evaluará estas opciones en el orden en que aparecen:- Primera Opción WebP,
<source srcset="imagen.webp" type="image/webp">:srcset: Especifica la ruta de la imagen en formato WebP.-
type: Indica el tipo MIME del archivo, en este caso,image/webp. - Evaluación: El navegador intentará usar esta imagen primero si soporta el formato WebP.
- Segunda Opción PNG,
<source srcset="imagen.png" type="image/png">:srcset: Especifica la ruta de la imagen en formato PNG.-
type: Indica el tipo MIME del archivo, en este caso, image/png. - Evaluación: Si la imagen WebP no está disponible, intentará usar la imagen PNG.
- Primera Opción WebP,
-
<img>: Esta etiqueta proporciona una imagen de respaldo que se utilizará si ninguna de las opciones<source>es compatible o disponible,<img src="imagen.jpg" alt="Descripción de la imagen">.-
src: Especifica la ruta de la imagen de respaldo en formato JPEG. -
alt: Proporciona una descripción textual de la imagen, útil para accesibilidad y cuando la imagen no puede ser mostrada. - Evaluación: Si el navegador no puede usar ni WebP ni PNG, utilizará esta imagen JPEG como último recurso. JPEG es un formato ampliamente soportado y es adecuado para fotografías y gráficos muchos colores.
-
-
<figcaption>: Proporciona una leyenda o descripción para el contenido dentro de<figure>.
Uso de <picture> para Diferentes Tamaños de Pantalla:
<figure>
<picture>
<!-- Imagen pequeña para pantallas pequeñas -->
<source srcset="imagen-pequena.webp" type="image/webp" media="(max-width: 600px)">
<source srcset="imagen-pequena.png" type="image/png" media="(max-width: 600px)">
<!-- Imagen mediana para pantallas medianas -->
<source srcset="imagen-mediana.webp" type="image/webp" media="(max-width: 1200px)">
<source srcset="imagen-mediana.png" type="image/png" media="(max-width: 1200px)">
<!-- Imagen grande para pantallas grandes -->
<source srcset="imagen-grande.webp" type="image/webp">
<source srcset="imagen-grande.png" type="image/png">
<!-- Imagen de respaldo en formato JPEG -->
<img src="imagen-grande.jpg" alt="Descripción de la imagen">
</picture>
<figcaption>Descripción de la imagen adaptativa con diferentes tamaños</figcaption>
</figure>
Explicación del código:
-
media="(max-width: 600px)": Esta consulta de medios especifica que la imagen se utilizará en pantallas con un ancho máximo de 600 píxeles. -
media="(max-width: 1200px)": Esta consulta de medios especifica que la imagen se utilizará en pantallas con un ancho máximo de 1200 píxeles. - Imagen de respaldo: Si ninguna de las condiciones anteriores se cumple, se utilizará la imagen grande en formato JPEG.
-
<source>: Cada etiqueta<source>especifica una versión diferente de la imagen. El navegador evalúa estas opciones en el orden en que aparecen, desde la más pequeña hasta la más grande o por defecto.
Uso <figure>
La etiqueta <figure> se usa para encapsular contenido independiente, como imágenes, ilustraciones, gráficos o fragmentos de código, junto con su descripción asociada. Su uso adecuado incluye:
- Agrupar imágenes con su respectivo pie de foto usando
<figcaption>. - Incluir gráficos o diagramas que requieran una explicación textual.
- Asociar contenido multimedia (videos o audios) con su descripción correspondiente.
Se recomienda su uso cuando se necesita presentar contenido visual con contexto adicional, mejorando la accesibilidad y la estructura semántica del documento.
Relación con Otras Etiquetas <figure>
-
<figcaption>: Esta etiqueta se utiliza dentro de<figure>para proporcionar una leyenda o descripción del contenido multimedia. Es opcional pero útil para proporcionar contexto adicional. -
<img>: Generalmente se usa dentro de<figure>para mostrar imágenes. La etiqueta<figure>proporciona un contenedor semántico para la imagen y su descripción. -
<video> y <audio>: Aunque menos común,<figure>también puede contener elementos multimedia como<video>o<audio>, especialmente si se desea proporcionar una descripción o leyenda. -
<picture>: Puede ser utilizado dentro de<figure>para proporcionar imágenes adaptativas con múltiples formatos o tamaños, como se mostró en el ejemplo anterior. -
<article> y <section>:<figure>puede ser utilizado dentro de estas etiquetas para incluir contenido multimedia relevante dentro de un artículo o sección específica del documento.
Buenas Prácticas y Errores Comunes <figure>
- Buenas prácticas:
- Uso Semántico: Utiliza
<figure>para contenido que realmente necesita una leyenda o descripción. Esto incluye imágenes, gráficos, diagramas, y otros elementos multimedia que se benefician de una explicación adicional. - Incluir
<figcaption>: Siempre que sea posible, incluye una etiqueta<figcaption>dentro de<figure>para proporcionar contexto adicional sobre el contenido multimedia. Esto mejora la accesibilidad y la comprensión del contenido. - Accesibilidad: Asegúrate de que las imágenes dentro de
<figure>tengan atributos alt descriptivos. Esto es crucial para los usuarios de tecnologías de asistencia. - Estilos CSS: Aplica estilos CSS a
<figure>y<figcaption>para mejorar la presentación visual. Por ejemplo, puedes centrar el contenido, ajustar márgenes, o cambiar el estilo de la leyenda. - Contenido Relacionado: Usa
<figure>para agrupar contenido que está estrechamente relacionado. Esto ayuda a mantener el documento organizado y fácil de entender.
- Uso Semántico: Utiliza
- Errores comunes:
- Uso Incorrecto: No utilices
<figure>para contenido que no necesita una leyenda o descripción. Por ejemplo, no es apropiado usar<figure>para texto simple o elementos de diseño que no son significativos. - Omisión de
<figcaption>: No omitas la etiqueta<figcaption>cuando el contenido dentro de<figure>se beneficiaría de una explicación adicional. La omisión de<figcaption>puede hacer que el contenido sea menos accesible. - Sobrecarga de Estilos: Evita aplicar demasiados estilos CSS que puedan complicar la presentación del contenido. Mantén los estilos simples y efectivos.
- Falta de Atributos alt: No olvides incluir atributos alt en las imágenes dentro de
<figure>Esto es esencial para la accesibilidad y la usabilidad del documento. - Uso Excesivo: No uses
<figure>de manera excesiva. Reserva su uso para contenido que realmente necesita ser destacado con una leyenda o descripción.
- Uso Incorrecto: No utilices
Configuración CSS por Defecto <figure>
La etiqueta <figure> tiene una configuración CSS por defecto que varía según el navegador, pero generalmente incluye los siguientes estilos predeterminados:
figure {
display: block; /* Se comporta como un bloque */
margin: 1em 40px; /* Márgenes estándar en algunos navegadores */
}
figcaption {
display: block; /* Se comporta como un bloque */
text-align: center; /* Centra el texto de la descripción */
}
Ejemplo Aplicado en un Proyecto Real <figure>
See the Pen Untitled by Eduardo Herrera Forero (@eduardoherreraf) on CodePen.
Explicación del código:
- Se utiliza
<figure>para envolver la imagen y su descripción. - Se aplica CSS para centrar la imagen, limitar su tamaño y mejorar la apariencia.
-
<figcaption>describe la imagen, proporcionando contexto adicional. - Se crea un diseño limpio y responsivo para integrarlo en cualquier página web.
Uso con Tecnologías de Asistencia (ARIA) <figure>
El uso de ARIA (Accessible Rich Internet Applications) mejora la accesibilidad de <figure> para usuarios con discapacidades visuales. Aunque <figure> y <figcaption> ya son semánticos, se pueden agregar atributos ARIA para mayor compatibilidad con lectores de pantalla.
<figure role="group" aria-labelledby="descripcion-imagen">
<img src="paisaje.jpg" alt="Montañas con un cielo anaranjado al atardecer">
<figcaption id="descripcion-imagen">Atardecer en la montaña - Fotografía de John Doe</figcaption>
</figure>
-
role="group":- Indica que
<figure>es un grupo de elementos relacionados (imagen + descripción). - Permite que lectores de pantalla lo interpreten como un solo bloque.
- Indica que
-
aria-labelledby="descripcion-imagen": Asocia la descripción de<figcaption>con<figure>, asegurando que los lectores de pantalla lean ambos elementos juntos.
Etiqueta HTML <details>: Muestra y Oculta Contenido
Definición <details>
La etiqueta <details> en HTML se utiliza para crear un widget desplegable que permite al usuario mostrar u ocultar información adicional de manera interactiva. Este elemento es útil para secciones de preguntas frecuentes (FAQ), detalles adicionales en formularios o contenido que no necesita mostrarse de inmediato.
Características Clave <details>
- Interactivo: Se puede expandir y contraer.
- Nativo: No requiere JavaScript para funcionar.
- Accesible: Compatible con lectores de pantalla.
- Flexible: Puede contener cualquier contenido HTML.
- Atributo
open: Muestra el contenido por defecto. - Etiqueta
<summary>: Define el encabezado desplegable.
Sintaxis Correcta <details>
La sintaxis básica del elemento <details> es la siguiente:
<details>
<summary>Texto del encabezado</summary>
<p>Contenido oculto que se mostrará al expandir.</p>
</details>
<details>: Contenedor del contenido desplegable.<summary>: Encabezado visible que se puede hacer clic.- Contenido interno: Se muestra cuando
<details>está expandido.
Uso <details>
La etiqueta <details> se usa para crear un contenido desplegable, permitiendo al usuario mostrar u ocultar información adicional de forma interactiva.
Usos comunes:
- Preguntas frecuentes (FAQ).
- Mostrar detalles adicionales en formularios.
- Desplegar información técnica o avanzada.
- Ocultar contenido extenso para mejorar la organización.
- Mostrar términos y condiciones de forma compacta.
Relación con Otras Etiquetas <details>
El elemento <details> se relaciona con otras etiquetas que complementan su funcionalidad:
-
<summary>: Define el encabezado visible sobre el que se puede hacer clic para expandir o contraer el contenido de<details>. -
<p>, <ul>, <table>,<form>:<details>puede contener cualquier contenido HTML, incluyendo texto, listas, tablas o formularios. - CSS (
::marker): Se puede estilizar el indicador desplegable de <summary>. - JavaScrip: Puede usarse para controlar la apertura y cierre de
<details>dinámicamente.
Buenas Prácticas y Errores Comunes <details>
- Buenas prácticas:
- Siempre incluir
<summary>: Define un encabezado claro para mejorar la accesibilidad y usabilidad. - Usar
<details>solo para contenido opcional: No debe ocultar información esencial para la comprensión del usuario. - Agregar el atributo open si el contenido debe mostrarse por defecto.
- Estilizar adecuadamente con CSS: Personalizar el indicador de
<summary>y mejorar la presentación. - Asegurar compatibilidad con lectores de pantalla: Evitar anidar
<details>innecesariamente.
- Siempre incluir
- Errores comunes:
- No incluir
<%lt;summary>: Sin esta etiqueta, el contenido no tendrá un encabezado visible para desplegarse. - Usar
<details>para contenido crítico: No debe ocultar información clave o que afecte la accesibilidad. - Insertar
<summary>fuera de<details>:<%lt;summary>debe estar dentro de<details>, no separado. - No probar en diferentes navegadores: Algunos navegadores antiguos pueden no soportar
<details>. - No agregar estilos: El diseño predeterminado puede ser poco atractivo y confuso sin CSS adecuado.
- No incluir
Configuración CSS por Defecto <details>
- Estilos predeterminados de
<details>:details { display: block; } - Se muestra como un bloque por defecto.
- No tiene márgenes ni relleno predefinidos.
- Cuando está expandido, su contenido se muestra debajo de
<summary>.
<summary>:
summary {
list-style: none; /* Oculta la flecha nativa */
cursor: pointer;
font-weight: bold;
}
details[open] summary {
color: blue; /* Cambia de color cuando está abierto */
}
details p {
padding: 10px;
border-left: 3px solid #007BFF;
}
list-item), lo que permite que tenga un marcador (flecha desplegable). ::marker. Ejemplo Aplicado en un Proyecto Real <details>
See the Pen <details> by Eduardo Herrera Forero (@eduardoherreraf) on CodePen.
- Diseño simple y profesional con
border-radius,box-shadowy un fondo limpio. - Interactividad nativa sin necesidad de JavaScript.
- Cambio de color al expandir usando [
open] en CSS. - Estructura accesible para mostrar preguntas frecuentes sin ocupar mucho espacio.
Uso con Tecnologías de Asistencia (ARIA) <details>
El elemento <details> es nativamente accesible, ya que los navegadores lo reconocen y proporcionan soporte para lectores de pantalla sin necesidad de atributos ARIA adicionales. Sin embargo, en algunos casos, se pueden mejorar sus características de accesibilidad.
Estados ARIA para mejorar la accesibilidad:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Accesible con `<details>` y ARIA</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f9f9f9;
}
details {
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
summary {
font-weight: bold;
cursor: pointer;
list-style: none;
}
details[open] {
border-color: #007BFF;
}
details[open] summary {
color: #007BFF;
}
</style>
</head>
<body>
<h2>Ejemplo Accesible con <details> y ARIA</h2>
<details id="faq1" role="group" aria-labelledby="titulo1">
<summary id="titulo1" role="button" aria-controls="contenido1" aria-expanded="false">
¿Cómo puedo contactar con soporte?
</summary>
<p id="contenido1">Puedes enviarnos un correo a soporte@ejemplo.com o llamar al +123 456 789.</p>
</details>
<details id="faq2" role="group" aria-labelledby="titulo2">
<summary id="titulo2" role="button" aria-controls="contenido2" aria-expanded="false">
¿Cuáles son los métodos de pago aceptados?
</summary>
<p id="contenido2">Aceptamos tarjetas de crédito, PayPal y transferencias bancarias.</p>
</details>
<details id="faq3" role="group" aria-labelledby="titulo3">
<summary id="titulo3" role="button" aria-controls="contenido3" aria-expanded="false">
¿Cuánto tarda el envío?
</summary>
<p id="contenido3">Los envíos nacionales tardan entre 3 y 5 días hábiles, mientras que los internacionales pueden tardar hasta 10 días.</p>
</details>
<script>
// Agregar evento para actualizar dinámicamente el aria-expanded en cada <summary>
document.querySelectorAll("summary").forEach(summary => {
summary.addEventListener("click", function() {
let details = this.parentElement;
this.setAttribute("aria-expanded", details.open);
});
});
</script>
</body>
</html>
- role="group" en
<details>: Indica que el contenido dentro de este elemento pertenece a un mismo grupo lógico. - role="button" en
<summary>: Hace que el encabezado sea tratado como un botón por lectores de pantalla. - aria-labelledby="tituloX" en
<details>: Relaciona el<summary>con el contenido de<details>. - aria-controls="contenidoX" en
<summary>: Asocia el título con el contenido desplegable. - aria-expanded="false" en
<summary>: Indica si el contenido está expandido o no (se actualiza con JavaScript). - JavaScript para actualizar aria-expanded dinámicamente cuando se abre o cierra
<details>.
Etiqueta HTML <mark>: Resaltar texto sin énfasis estructural
Definición <mark>
La etiqueta <mark> representa un fragmento de texto que se destaca con fines de referencia o anotación, debido a su relevancia en el contexto circundante.
Características Clave <mark>
- Resaltado visual: Aplica un fondo amarillo por defecto.
- No afecta la semántica: Solo cambia la apariencia, sin alterar el significado del texto.
- Personalizable con CSS: Se puede modificar el color y otros estilos.
- Compatible con todos los navegadores: Funciona en la mayoría de los navegadores modernos.
- Uso en énfasis temporal: Útil para destacar información importante sin alterar la estructura del contenido
Sintaxis Correcta <mark>
La sintaxis correcta de la etiqueta <mark> es la siguiente:
<p>Este es un <mark>texto resaltado</mark> en un párrafo.</p>
<mark>: Etiqueta de apertura.- texto resaltado: Contenido dentro de la etiqueta que se resalta.
</mark>: Etiqueta de cierre.- Se usa dentro de otras etiquetas como
<p>,<span>,<div>, etc.
Uso <mark>
La etiqueta <mark> se usa cuando se quiere resaltar texto dentro de un contenido sin modificar su estructura semántica. Algunos casos comunes incluyen:
- Destacar información importante en un párrafo o artículo.
- Resaltar términos de búsqueda en aplicaciones o sitios web.
- Enfatizar contenido temporalmente sin cambiar su jerarquía.
- Mejorar la accesibilidad al destacar información clave en textos extensos.
Se recomienda su uso cuando el resaltado es necesario para la comprensión, pero sin alterar la estructura del contenido.
Relación con Otras Etiquetas <mark>
-
<strong>:<strong>enfatiza semánticamente, indicando importancia y<mark>solo resalta visualmente sin alterar el significado. -
<em>:<em>enfatiza la entonación en cambio<mark>solo resalta visualmente. -
<span>:<span>es neutra y sirve para aplicar estilos con CSS, mientras que<mark>resalta texto con un propósito visual específico. -
<u>:<u>subraya texto sin especificar su propósito, a diferencia de<mark>resalta texto para llamar la atención sobre su relevancia -
<b>:<b>aplica negrita sin significado semántico, por otro lado<mark>resalta texto para indicar relevancia visualmente.
Buenas Prácticas y Errores Comunes <mark>
- Buenas Prácticas:
- Uso semántico adecuado: Se debe emplear
<mark>para resaltar información relevante sin alterar la estructura del contenido. - Diferenciar términos clave: Es útil para destacar términos en resultados de búsqueda o información importante en textos extensos.
- Uso en contexto dinámico: Puede utilizarse para marcar términos en respuestas interactivas o actualizaciones en tiempo real.
- Complemento con CSS: Se recomienda personalizar el estilo de
<mark>para mejorar la accesibilidad y la experiencia del usuario.
- Uso semántico adecuado: Se debe emplear
- Errores comunes:
- Uso excesivo: Aplicar
<mark>a demasiadas palabras puede dificultar la lectura y perder su propósito. - Uso incorrecto para negritas o énfasis: No debe sustituir
<strong>o<em>, ya que su función es diferente. - Falta de contraste: Se debe verificar que el color de resaltado tenga suficiente contraste con el fondo para garantizar la accesibilidad.
- Uso fuera de contexto: No se recomienda su uso en elementos de navegación o títulos donde el énfasis semántico no sea necesario.
- Uso excesivo: Aplicar
Configuración CSS por Defecto <mark>
mark {
background-color: yellow;
color: black;
}
- Por lo general, los navegadores aplican un estilo de fondo amarillo al texto dentro de la etiqueta
<mark>. - Este estilo predeterminado tiene como objetivo llamar la atención sobre el texto resaltado.
- Es importante tener en cuenta que el estilo predeterminado puede variar ligeramente entre los diferentes navegadores.
Ejemplo Aplicado en un Proyecto Real <mark>
See the Pen <mark> by Eduardo Herrera Forero (@eduardoherreraf) on CodePen.
- Se usa
<mark>para resaltar la palabra "HTML". - Se aplica CSS para personalizar el resaltado con fondo amarillo.
- Este enfoque se puede ampliar con JavaScript para resaltar dinámicamente términos de búsqueda en una página web.
Uso con Tecnologías de Asistencia (ARIA) <mark>
La etiqueta HTML <mark> tiene un propósito visual claro, pero por sí sola no proporciona suficiente información semántica para las tecnologías de asistencia (AT), como los lectores de pantalla. Aquí te explico cómo puedes mejorar la accesibilidad de <mark> utilizando ARIA (Accessible Rich Internet Applications):
Problemas de accesibilidad con <mark>:
- Falta de contexto: Los lectores de pantalla requieren contexto adicional para comprender el propósito del texto marcado con
<mark>. - Significado ambiguo: ARIA proporciona claridad semántica sobre la relevancia del texto marcado.
-
aria-labeloaria-describedby: Utiliza ARIA para añadir descripciones que expliquen por qué se resalta el texto. -
role="mark"(implícito): La etiqueta mark ya posee el rol mark por lo que no es necesario agregarlo. - Uso adecuado de ARIA: Emplea ARIA de forma concisa y solo cuando sea necesario para mejorar la accesibilidad.
- Pruebas con lectores de pantalla: Verificar la correcta interpretación del contenido marcado mediante pruebas con lectores de pantalla.
- Contraste de color: Mantener un contraste de color adecuado para asegurar la legibilidad del texto marcado.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resaltado Accesible</title>
</head>
<body>
<p>Aprender <mark role="mark" aria-label="Texto resaltado">HTML</mark> es esencial para el desarrollo web.</p>
</body>
</html>
role="mark"indica que el texto es un resaltado semántico.-
aria-label="Texto resaltado"ayuda a los lectores de pantalla a entender el propósito del<mark>. - Esto mejora la accesibilidad para usuarios con discapacidad visual.
Etiqueta HTML <time>: Mostrar la fecha
Definición <time>
La etiqueta<time> en HTML se utiliza para representar fechas, horas o cualquier valor temporal de forma estructurada, facilitando su interpretación por navegadores y motores de búsqueda. Puede incluir atributos como datetime para especificar el formato exacto del tiempo. Características Clave <time>
- Representación de tiempo estructurada: Permite marcar fechas y horas de manera comprensible para navegadores y motores de búsqueda.
- Atributo
datetime: Facilita la especificación del tiempo en un formato estándar (ISO 8601). - Mejora la accesibilidad: Ayuda a herramientas como lectores de pantalla y asistentes virtuales a interpretar correctamente la información temporal.
- Optimización para SEO: Los buscadores pueden identificar y mostrar mejor los datos de eventos y fechas relevantes.
- Compatibilidad con contenido visible: Puede incluir texto legible por humanos mientras mantiene un valor estructurado para las máquinas.
Sintaxis Correcta <time>
<time datetime="2025-03-29">29 de marzo de 2025</time>
-
<time>: Etiqueta que envuelve el contenido de la fecha o la hora. -
datetime="YYYY-MM-DD": Atributo opcional que permite especificar la fecha en formato estándar (ISO 8601). - Contenido visible: Se muestra el formato legible para el usuario.
Otros casos:
- Fecha y Hora (Año-Mes-DíaTHH:MM):
<time datetime="2025-09-15T09:00">15 de septiembre de 2025 a las 9:00 AM</time> - Fecha, Hora y Zona Horaria (Año-Mes-DíaTHH:MM±HH:MM):
<time datetime="2025-09-15T09:00-05:00">15 de septiembre de 2025, 9:00 AM (GMT-5)</time>
- Solo la Hora (HH:MM):
<time datetime="14:30">2:30 PM</time> - Año y Mes (Año-Mes):
<time datetime="2025-07">julio de 2025</time> - Solo el Año (YYYY):
<time datetime="2023">2023</time> - Solo el Mes y Día (MM-DD):
<time datetime="12-25">25 de diciembre</time> - Solo la Duración (P[n]Y[n]M[n]DT[n]H[n]M[n]S):
<time datetime="P2DT3H30M">2 días, 3 horas y 30 minutos</time>
Recomendaciones:
- Siempre usar
datetimeen formato ISO 8601 para garantizar compatibilidad. - Incluir texto legible para los usuarios dentro de
<time>. - Evitar usos incorrectos como números sin relación con fechas o tiempos.
Uso <time>
La etiqueta<time> se usa cuando se quiere representar fechas u horas dentro de un contenido de manera estructurada, facilitando su interpretación por navegadores y motores de búsqueda. Algunos casos comunes incluyen: - Marcar fechas de eventos en artículos o publicaciones.
- Representar horarios en calendarios o agendas digitales.
- Indicar fechas de publicación o actualización de contenido. litar la extracción de información temporal en aplicaciones o sitios web.
Relación con Otras Etiquetas <time>
-
<p>:<time>suele utilizarse dentro de párrafos para indicar fechas o horas de manera clara. -
<article>: Se emplea dentro de artículos para indicar la fecha de publicación o modificación. -
<header>: Puede incluirse en la cabecera de una sección o documento para mostrar la fecha de un post o evento. -
<footer>: Se usa en los pies de página para indicar fechas de derechos de autor o actualizaciones. -
<span>: Puede utilizarse dentro de un<span>para aplicar estilos personalizados a la fecha o la hora.
Buenas Prácticas y Errores Comunes <time>
- Buenas Prácticas:
- Usar datetime correctamente: El atributo debe seguir el formato ISO 8601 para mejorar la interpretación por sistemas automatizados.
- Mantener el contenido legible: El texto dentro de
<time>debe ser comprensible para los usuarios. - Utilizar
<time>solo para valores temporales: No debe aplicarse a números que no representen fechas u horas. - Incluirlo en contextos adecuados: Es útil en artículos, eventos y agendas donde la información temporal es relevante.
- Errores comunes:
- Omitir el atributo
datetime: Puede afectar la interpretación de la fecha por motores de búsqueda. - Usar formatos incorrectos en
datetime: Se debe emplear el estándar ISO 8601 para evitar errores. - Aplicarlo a información no temporal: No debe usarse para valores como precios o cantidades.
- Anidar múltiples etiquetas
<time>innecesariamente: Esto es redundante y no aporta valor semántico.
- Omitir el atributo
Configuración CSS por Defecto <time>
La etiqueta <time> en HTML no tiene un estilo visual específico por defecto en la mayoría de los navegadores. Su apariencia es la misma que la de un elemento en línea (inline). Sin embargo, su configuración CSS predeterminada es la siguiente:
time {
display: inline; /* Se comporta como un elemento en línea */
font-style: normal; /* No tiene estilo especial por defecto */
font-weight: normal; /* No es negrita a menos que se aplique */
}
Ejemplo Aplicado en un Proyecto Real <time>
Un sitio web de conferencias tecnológicas presenta detalles sobre un evento, incluyendo la fecha del evento, la hora de inicio, el período de inscripciones y el año de la última edición.
See the Pen <time> by Eduardo Herrera Forero (@eduardoherreraf) on CodePen.
-
<Sección: Presenta el título del evento y su descripción.<header> -
<Sección: Muestra los detalles del evento utilizando<section>con.event-details<time>en diferentes formatos:- Fecha completa:
2025-09-15. - Fecha y hora:
2025-09-15T09:00. - Solo hora:
03:30(duración estimada). - Año y mes:
2025-07(fecha de inicio de inscripciones). - Solo año:
2023"(última edición).
- Fecha completa:
-
<Sección: Indica el año actual en los derechos de autor.<footer>
Uso con Tecnologías de Asistencia (ARIA) <time>
La etiqueta <time> es semántica y, por defecto, es reconocida por tecnologías de asistencia como lectores de pantalla. Sin embargo, en algunos casos puede ser útil mejorar su accesibilidad con atributos ARIA.
Mejores Prácticas con ARIA con <time>
- Usar
aria-labelpara una lectura clara: Algunos lectores de pantalla pueden no interpretar correctamente el formato de fecha u hora. Se puede usararia-labelpara proporcionar una lectura más clara.<time datetime="2025-09-15" aria-label="15 de septiembre de 2025"> 15/09/2025 </time> - Indicar la duración de eventos con
aria-live: Si el tiempo cambia dinámicamente (por ejemplo, un temporizador), se recomienda usararia-livepara notificar el cambio.El evento termina en: <time id="countdown" datetime="PT10M" aria-live="polite">10 minutos</time>
- Marcar fechas importantes con
role="presentation"cuando sea necesario: Si<time>se usa solo con fines visuales y no aporta valor semántico, se puede agregarrole="presentation"para evitar que los lectores de pantalla lo procesen innecesariamente.<time datetime="2025-12-31" role="presentation">31/12/2025</time>
Etiqueta HTML <hr>: Regla Horizontal
NuevoDefinición <hr>
La etiqueta HTML<hr> representa una separación temática entre bloques de contenido, indicando un cambio de tema o de contexto dentro de una página web. Aunque visualmente suele mostrarse como una línea horizontal, su propósito principal es semántico: señalar una transición temática entre secciones, no solo servir como adorno visual. Características Clave <hr>
- Es un elemento de bloque, lo que significa que ocupa todo el ancho disponible.
- Representa una transición temática en el contenido (por ejemplo, un cambio de tema o de contexto).
- No contiene contenido (es vacía).
- En HTML5, su función es puramente semántica.
- Por defecto, se muestra como una línea horizontal.
- Su estilo puede modificarse ampliamente con CSS (color, grosor, ancho, degradados, etc.)
- Ayuda a estructurar el contenido para usuarios y tecnologías de asistencia, aunque no tiene un rol ARIA específico
Sintaxis Correcta <hr>
En HTML5, la sintaxis correcta es:
<hr>
También es válida la notación autocontenida:
<hr />
No debe usarse </hr>, ya que <hr> es un elemento vacío.
Uso <hr>
- Separar secciones en un artículo, después de una introducción mostrar el cuerpo principal.
- Dividir comentarios de una publicación, diferenciando el contenido principal de los comentarios de los usuarios.
- Marcar el final de una sección de contenido específico, separando el contenido y el pie de página o una barra lateral.
- En los formularios separación de grupos de campos de entrada.
- Mejora de la legibilidad: Proporciona una pausa visual que facilita la comprensión y navegación del contenido
- Útil en documentos largos, blogs, artículos y formularios para segmentar partes relevantes
Relación con Otras Etiquetas <hr>
<section>,<article>y<div>: Agrupan contenido,<hr>puede usarse dentro para marcar cambios de tema.<p>: Suele emplearse para separar párrafos temáticamente diferentes.<br>:<br>genera un salto de línea, pero no implica cambio temático, mientras que<hr>sí.
Buenas Prácticas y Errores Comunes <hr>
- Buenas Prácticas:
- Utilizar con propósito semántico, no solo como decoración.
- Usar
<hr>para separar secciones lógicas de contenido. - Combinar con CSS para mejorar el estilo y la apariencia.
- Mantener la consistencia en el uso de la sintaxis en todo el proyecto.
- Asegurar que su estilo no haga que desaparezca o sea difícil de percibir, especialmente si es importante para la estructura visual.
- Errores comunes:
- Usar
<hr>repetidamente para diseño visual sin sentido semántico. - Usarla simplemente para dibujar una línea, ignorando su significado semántico.
- Aplicar atributos obsoletos (
align,width,noshade, etc.). - Intentar cerrar el elemento con
</hr>, lo cual es incorrecto.
- Usar
Configuración CSS por Defecto <hr>
Los navegadores aplican por defecto un estilo similar a este:
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
border-color: #ccc;
height: 1px;
}
Esto puede variar ligeramente entre navegadores. Se recomienda sobrescribir estilos con CSS personalizado según el diseño del sitio.
Ejemplo Aplicado en un Proyecto Real <hr>
See the Pen Untitled by Eduardo Herrera Forero (@eduardoherreraf) on CodePen.
En este ejemplo, se utilizan tres tipos diferentes de reglas horizontales:
- Una
<hr>básica para separar el encabezado del primer artículo. - Una
<hr>dentro del artículo para separar los ingredientes de las instrucciones. - Una
<hr>con clase personalizada article-divider para separar artículos completos. - Una
<hr>con clase personalizada footer-divider para separar el contenido del pie de página.
Uso con Tecnologías de Asistencia (ARIA) <hr>
- El elemento
<hr>no requiere atributos ARIA específicos, ya que su significado semántico es reconocido por lectores de pantalla y otras tecnologías de asistencia. Estos dispositivos suelen anunciar la presencia de un "separador" o "cambio de tema", facilitando la navegación para usuarios con discapacidad visual. - Se puede usar
aria-hidden="true"si se desea ocultar la línea horizontal de los lectores de pantalla, aunque esto no es común. - Si se necesita un mayor control de accesibilidad, se recomienda usar roles ARIA como
role="separator", aunque no es obligatorio ni comúnmente necesario. - Si necesita proporcionar información adicional sobre el cambio temático, considere usar un encabezado (
<h2>,<h3>, etc.) en lugar de depender únicamente de<hr>.
Plantilla HTML de un Diseño Semántico
Plantilla HTML de un Diseño Semántico
See the Pen Untitled by Eduardo Herrera Forero (@eduardoherreraf) on CodePen.
Las etiquetas semánticas utilizadas en la plantilla son:
<header>: Representa la cabecera de la página.<nav>: Define la navegación principal.<main>: Contiene el contenido principal del sitio.<section>: Agrupa contenido temáticamente relacionado.-
<article>: Representa artículos o unidades de contenido independientes. <figure>: Agrupa contenido multimedia, como imágenes.<figcaption>: Proporciona una descripción para la figura.<time>: Representa una fecha o una hora específica.<mark>: Resalta texto importante sin alterar la semántica.<aside>: Contiene contenido complementario o relacionado.<dialog>: Representa un cuadro de diálogo interactivo.
Plantilla HTML de un Diseño Semántico Con ARIA
See the Pen Plantilla con ARIA by Eduardo Herrera Forero (@eduardoherreraf) on CodePen.