HTML Semántico Usando etiquetas

🧠 HTML Semántico: Cuándo usar <div>, <section>, <article> y más (con ejemplos claros)

Cuando empiezas a crear páginas web, es muy común usar <div> para todo. Funciona… pero no es lo ideal.

A medida que avanzas, empiezas a descubrir que HTML no solo sirve para “mostrar cosas”, sino para darle significado a lo que estás construyendo.

Y ahí entra el HTML semántico.

📄 ¿Qué es HTML semántico?

Es usar etiquetas que describen qué es el contenido, no solo cómo se ve.

Por ejemplo:

  • <div> → no dice nada
  • <section> → indica una sección
  • <article> → indica contenido independiente

👉 Esto ayuda a:

  • SEO (Google entiende mejor tu sitio)
  • Accesibilidad (lectores de pantalla)
  • Orden mental cuando programas

📦 1. <div> → el comodín (pero no abuses)

🧠 ¿Cuándo usarlo?

Cuando solo necesitas:

  • agrupar elementos
  • aplicar estilos
  • organizar diseño

✅ Ejemplo correcto:

<div class="card">
  <h3>Clase de Informática</h3>
  <p>Martes y jueves de 7 a 9 pm</p>
</div>

👉 Aquí <div> solo agrupa contenido para estilos.

❌ Cuándo NO usarlo

Cuando el contenido tiene significado claro.

<div>
  <h2>Servicios</h2>
</div>

👉 Aquí debería ser <section>

🧩 2. <section> → bloques con sentido

🧠 ¿Cuándo usarlo?

Cuando tienes:

  • un bloque con tema propio
  • contenido que podría separarse
  • normalmente con título

✅ Ejemplo:

<section>
  <h2>Nuestros servicios</h2>
  <p>Ofrecemos clases de Informática...</p>
</section>

👉 Esto ya tiene estructura lógica.

🧠 Regla rápida:

Si puedes ponerle un título → probablemente es <section>

📰 3. <article> → contenido independiente

Esta es de las más importantes y menos entendidas.

🧠 ¿Cuándo usar <article>?

Cuando el contenido:

  • tiene sentido por sí solo
  • podría compartirse o reutilizarse
  • no depende del resto

✅ Ejemplo (blog):

<article>
  <h2>Cómo aprender Informática</h2>
  <p>En este artículo te explico...</p>
</article>

👉 Ese contenido puede existir solo.

✅ Ejemplo (tarjetas o resultados):

<article class="card">
  <h3>Escuela de Informática</h3>
  <p>Especialistas en Informática</p>
</article>

👉 Cada tarjeta es independiente → <article>

❌ Error común:

<section>
  <h2>Blog</h2>
  <div class="post">...</div>
</section>

👉 Mejor:

<section>
  <h2>Blog</h2>  <article>...</article>
  <article>...</article></section>

🧱 4. Estructura base profesional

Aquí es donde ya pasas de “hacer páginas” a estructurar bien.

🏗️ <header>

Encabezado del sitio o de una sección.

<header>
  <h1>Empresa de Informática</h1>
  <nav>...</nav>
</header>

👉 Puede haber varios headers (no solo uno global).

🧭 <main>

El contenido principal (solo uno por página).

<main>
  <section>...</section>
</main>

👉 Aquí va lo importante.

📎 <aside>

Contenido complementario.

<aside>
  <h3>Información adicional</h3>
  <p>Horarios, tips, anuncios...</p>
</aside>

👉 No es lo principal, pero aporta.

🦶 <footer>

Pie de página.

<footer>
  <p>© 2026 Empresa de Informática</p>
</footer>

🧩 Ejemplo completo (estructura real)

<body>  <header>
    <h1>Escuela de Informática</h1>
    <nav>Menú</nav>
  </header>  <main>    <section>
      <h2>Clases disponibles</h2>      <article>
        <h3>Excel</h3>
        <p>Martes y jueves</p>
      </article>      <article>
        <h3>Word</h3>
        <p>Lunes, miércoles y viernes</p>
      </article>    </section>  </main>  <aside>
    <h3>Promoción</h3>
    <p>Primera clase gratis</p>
  </aside>  <footer>
    <p>Contacto</p>
  </footer></body>

⚖️ Resumen rápido (para que no se te olvide)

EtiquetaCuándo usar
<div>Agrupar o diseñar
<section>Bloque con tema
<article>Contenido independiente
<header>Encabezado
<main>Contenido principal
<aside>Complemento
<footer>Pie

🧠 Consejo final (muy importante)

No te obsesiones con usar todo perfecto al inicio.

Pero sí acostúmbrate a pensar:

👉 “¿Este bloque tiene significado o solo es diseño?”

Esa sola pregunta cambia cómo estructuras tus página

Entradas relacionadas

Deja un comentario