Diseño Web 1 — 2026

Temas

Contenedores Semánticos

Repaso de Etiquetas de Estructura

No Semánticas

<div>
  Caja
</div>
<!-- display:block --> 

<span>Selección</span> 
<!-- display:inline -->

<br> 
<!-- Line break -->

Semántica

<hr> 
<!-- Horizontal rule -->

Etiquetas de Estructura Semánticas

<header>
  Cabezal del documento o sección
</header>
<nav>
  Elementos de navegación
</nav>

Conjunto de vínculos de navegación (menús, migas de pan, no todos los enlaces están en un <nav>)

<main>

<main>
  Contenido principal del documento
</main>

Representa el contenido principal del cuerpo (body).

  • Incluye el contenido que es único en la página y excluye contenido que se repite en todas las páginas de la web (menú, pie de página, barra lateral, etc).
  • No debe incluirse más de un elemento <main> por página.
  • No debe incluirse el elemento <main> dentro de elementos como article, aside, footer, header o nav.

<section>

<section>
  Sección
</section>

Define la sección de un documento. Agrupa temáticamente los contenidos con un título.

<article>

<article>
  Artículo
</article>

Es un contenido independiente/autónomo. Su contenido es una unidad de información.

  • Debe tener sentido por sí mismo y se puede redistribuir de forma independiente.
  • Ej. noticia, mensaje de un foro, comentario, producto

<aside>

<aside>
  Contenido aparte de una página
</aside>

Para una barra lateral. Un contenido aparte que está relacionado con el contenido de sus alrededores. Es un apartado secundario.

<figure> y <figcaption>

<figure>
  <img src="imagen.jpg" alt="Descripción">
  <figcaption>Título del elemento</figcaption> 
</figure>

Representa contenido independiente. Si bien se relaciona con el flujo principal, su posición es independiente de éste. Por lo general, se trata de una imagen, una ilustración, un diagrama, un fragmento de código, o un esquema al que se hace referencia en el texto principal, pero que se puede mover a otra página o a un apéndice sin que afecte al flujo principal.

<canvas>

<canvas>
  Contenedor de gráficos
</canvas>

Se puede utilizar para dibujar gráficos a través de secuencias de comandos (por lo general JavaScript). Ej. puede usarse para dibujar gráficos, hacer composiciones de fotos o incluso realizar animaciones.

HTML Semántico vs No Semántico

El uso de etiquetas semánticas proporciona:

  • Mejor estructura y significado del documento
  • Mejor accesibilidad
  • Mejor SEO
  • Mejor mantenibilidad del código