HTML semántico como base de una buena interfaz

Una buena interfaz no empieza en CSS ni en JavaScript. Empieza en la estructura. Antes de elegir colores, animaciones o efectos, necesitamos responder una pregunta simple: ¿qué significa cada parte de la página?

HTML semántico significa usar etiquetas según el significado del contenido, no solo según cómo queremos que se vea. Un encabezado no es un texto grande: es un encabezado. Una navegación no es una fila de enlaces cualquiera: es una zona para moverse por el sitio. Un artículo no es una tarjeta visual: es una pieza de contenido que puede entenderse como unidad.

En los capítulos anteriores hablamos de interfaz, usabilidad, flujo y accesibilidad. Hoy vamos a unir esas ideas en una base muy concreta: construir páginas que tengan estructura real. Cuando el HTML está bien pensado, el CSS trabaja mejor, el JavaScript se entiende mejor y la accesibilidad deja de sentirse como un parche de último minuto.

Qué aprenderás hoy

• Comprender qué significa semántica en HTML.
• Diferenciar etiquetas estructurales como header, nav, main, section, article y footer.
• Usar títulos en orden lógico.
• Evitar el abuso de div cuando existe una etiqueta más precisa.
• Crear una estructura base reutilizable para proyectos de clase.

Por qué importa

Cuando todo se construye con div, el navegador puede mostrar la página, pero el documento pierde significado. Para una persona que mira la pantalla, el diseño visual puede ayudar. Para un lector de pantalla, un buscador o un desarrollador que llega después, la estructura se vuelve menos clara.

MDN explica que los elementos semánticos describen su propósito tanto para el navegador como para quien desarrolla. W3C/WAI también recomienda organizar las páginas con regiones, encabezados y estructura comprensible para facilitar navegación y orientación. En términos prácticos: una página bien estructurada se puede recorrer mejor, mantener mejor y escalar mejor.

Además, el HTML semántico ayuda a pensar. Si no sabes si algo es una sección, un artículo, una navegación o un complemento, probablemente todavía no has definido bien la intención de esa parte de la interfaz.

El problema de diseñar solo con div

Este ejemplo es muy común en prácticas iniciales. Visualmente puede funcionar, pero semánticamente dice poco:

<div class="page">
  <div class="top">
    <div class="logo">Mi sitio</div>
    <div class="menu">
      <a href="/">Inicio</a>
      <a href="/cursos">Cursos</a>
      <a href="/contacto">Contacto</a>
    </div>
  </div>

  <div class="content">
    <div class="title">Cursos disponibles</div>
    <div class="card">
      <div class="card-title">HTML y CSS</div>
      <div class="card-text">Aprende a crear tus primeras interfaces.</div>
    </div>
  </div>

  <div class="bottom">2026 - Mi sitio</div>
</div>

El problema no es que div sea malo. El problema es usarlo para todo. Un div no comunica si algo es navegación, contenido principal, pie de página, artículo o encabezado. Si existe una etiqueta con significado claro, conviene usarla.

Una estructura semántica base

Ahora veamos una versión mejorada. No es más complicada; simplemente usa etiquetas que describen la función de cada bloque.

<header class="site-header">
  <a class="site-logo" href="/">Mi sitio</a>

  <nav aria-label="Navegación principal">
    <ul>
      <li><a href="/">Inicio</a></li>
      <li><a href="/cursos">Cursos</a></li>
      <li><a href="/contacto">Contacto</a></li>
    </ul>
  </nav>
</header>

<main>
  <section aria-labelledby="courses-title">
    <h1 id="courses-title">Cursos disponibles</h1>

    <article class="course-card">
      <h2>HTML y CSS</h2>
      <p>Aprende a crear tus primeras interfaces web con estructura y estilo.</p>
      <a href="/cursos/html-css">Ver curso</a>
    </article>
  </section>
</main>

<footer class="site-footer">
  <p>2026 - Mi sitio</p>
</footer>

Esta versión comunica más. Hay un encabezado del sitio, una navegación principal, un contenido principal, una sección de cursos, un artículo para cada curso y un pie de página. El diseño visual puede ser casi el mismo, pero el documento es mucho más claro.

Landmarks: zonas importantes de la página

Elementos como header, nav, main, aside y footer ayudan a crear regiones o landmarks. Estas regiones permiten que tecnologías de asistencia y navegadores entiendan mejor cómo está organizada la página.

Una regla útil: cada página debe tener un contenido principal claro. Para eso usamos main. No lo repitas varias veces en una misma página. Dentro de main pueden vivir secciones, artículos, formularios, listados y otros bloques de contenido.

Section y article no son lo mismo

Una duda frecuente: ¿cuándo uso section y cuándo uso article? Una forma sencilla de pensarlo es esta:

• section: agrupa contenido relacionado dentro de una página.
• article: representa una unidad de contenido que podría entenderse de forma independiente.

Por ejemplo, una página de blog puede tener una sección de artículos recientes, y dentro de esa sección cada post puede ser un article.

<section aria-labelledby="recent-posts-title">
  <h2 id="recent-posts-title">Artículos recientes</h2>

  <article>
    <h3>Accesibilidad básica para interfaces web</h3>
    <p>Una introducción práctica a foco, teclado, contraste y formularios.</p>
    <a href="/blog/accesibilidad-basica-para-interfaces-web">Leer artículo</a>
  </article>

  <article>
    <h3>UX para estudiantes de desarrollo</h3>
    <p>Cómo pasar del usuario al flujo antes de programar la pantalla.</p>
    <a href="/blog/ux-para-estudiantes-de-desarrollo-del-usuario-al-flujo">Leer artículo</a>
  </article>
</section>

El orden de los títulos

Los títulos no son solo tamaños de letra. Los encabezados crean una estructura de lectura. Un h1 debe representar el tema principal de la página. Luego los h2 dividen secciones importantes, y los h3 pueden subdividirlas.

Evita saltar niveles solo porque un título se ve grande o pequeño. Eso se resuelve con CSS, no con una jerarquía rota.

<main>
  <h1>Desarrollo de Interfaces</h1>

  <section>
    <h2>Unidad 1: Fundamentos</h2>

    <article>
      <h3>HTML semántico</h3>
      <p>Estructura base para interfaces accesibles y mantenibles.</p>
    </article>
  </section>
</main>

CSS trabaja mejor sobre buena estructura

La semántica no impide diseñar. Al contrario: una estructura clara hace que el CSS sea más fácil de escribir y mantener. Puedes aplicar estilos a clases, pero esas clases se apoyan en una base significativa.

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px;
  background: #26394d;
}

.site-header a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.course-card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  background: #ffffff;
}

Observa que seguimos usando clases. HTML semántico no significa renunciar a clases. Significa que las clases complementan la estructura, no la reemplazan.

Errores comunes

• Usar div para todo, incluso para navegación, artículos y formularios.
• Usar h3 solo porque se ve bonito, aunque no exista un h2 previo.
• Crear botones con a cuando no hay navegación.
• Crear enlaces con button cuando sí hay navegación.
• Usar section sin un título que explique el bloque.
• Repetir varios main en una misma página.

Reto práctico

Conclusión

HTML semántico es una de esas bases que parecen simples, pero cambian mucho el resultado. Una interfaz con buena estructura se entiende mejor, se mantiene mejor y puede ser más accesible desde el inicio. No se trata de memorizar etiquetas, sino de aprender a leer la intención del contenido.

Si una página es como una casa, el HTML semántico es su arquitectura. CSS pinta, acomoda y embellece. JavaScript agrega comportamiento. Pero si la estructura está mal pensada, todo lo demás trabaja con más esfuerzo.

En el siguiente capítulo pasaremos a CSS para jerarquía visual y lectura: cómo usar espaciado, tamaño, contraste y composición para que la estructura que ya definimos se lea mejor.

Fuentes consultadas

• MDN Web Docs: Semantics
• MDN Web Docs: elemento main
• MDN Web Docs: elemento article
• MDN Web Docs: elemento section
• W3C WAI: Page Structure
• WHATWG HTML Living Standard: Sections