## Objetivos de Aprendizaje - Entender HTML semántico vs no semántico - Usar elementos semánticos correctamente - Mejorar la accesibilidad y el SEO ## ¿Qué es HTML Semántico? HTML semántico usa elementos que describen su significado tanto para los navegadores como para los desarrolladores. ```html

...

...

``` ## Elementos de Estructura del Documento ### header Representa contenido introductorio o un grupo de ayudas de navegación: ```html

Título del Sitio

``` ### nav Define enlaces de navegación: ```html ``` ### main El contenido dominante del documento: ```html

Bienvenido a Nuestro Sitio

Esta es el área de contenido principal.

``` ### article Contenido autocontenido e independientemente distribuible: ```html

Título de la Entrada del Blog

Publicado el 23 de junio de 2026

El contenido del artículo va aquí...

``` ### section Agrupación temática de contenido: ```html

Características

Nuestro producto tiene muchas características...

``` ### aside Contenido tangencialmente relacionado con el contenido circundante: ```html

Artículo Principal

Contenido del artículo...

``` ### footer Pie de página de una sección o página: ```html ``` ## Semántica a Nivel de Texto ### time Representa una fecha u hora: ```html

Evento el 23 de junio de 2026 a las 19:00

``` ### mark Texto resaltado/marcado: ```html

El término resaltado es importante.

``` ### address Información de contacto: ```html

Escrito por Nombre del Autor.
Visítanos en: Calle Principal 123, Ciudad

``` ### figure y figcaption Contenido autocontenido con un pie de foto: ```html

``` ## Comparación: div vs elementos semánticos ### Cuándo usar div Contenedor genérico cuando ningún elemento semántico encaja: ```html ``` ### Cuándo usar elementos semánticos ```html

Título del Artículo

Contenido del artículo...

``` ## Beneficios del HTML Semántico ### Accesibilidad Los lectores de pantalla pueden navegar por puntos de referencia: ```html ``` ### SEO Los motores de búsqueda entienden la estructura del contenido: ```html

Título Rico en Palabras Clave

Contenido Relacionado

``` ### Mantenibilidad El código es autodocumentado: ```html

...

...

``` ## Ejemplo Completo de Página ```html

Mi Blog

Entendiendo el HTML Semántico

Publicado el 23 de junio de 2026

El HTML semántico mejora la accesibilidad y el SEO...

Beneficios Clave

• Mejor accesibilidad
• SEO mejorado
• Código más limpio

``` ## Resumen - Los elementos semánticos describen su significado (`

`, `