Apuntes html

HTML nunca falla, solo se ve raro.

Estructura avanzada: Etiquetas semánticas y contenedores

Hasta ahora, has organizado contenido con etiquetas como <h1> (títulos), <p> (párrafos), y <ul> (listas). Pero, ¿cómo estructurar una página completa, como un blog o una tienda? En esta lección aprenderás a usar etiquetas semánticas de HTML5 (como <article>, <section>, <nav>) para dar significado a tu estructura, y contenedores genéricos (<div>, <span>) para organizar y estilizar. Las semánticas hacen tu página clara para buscadores y personas con discapacidad, mientras que <div> y <span> son comunes para diseño. Verás cómo combinarlos, por qué muchas páginas usan <div> en lugar de semánticas, y cómo lograr una web moderna.

¿Qué es la estructura avanzada?

La estructura avanzada organiza una página en bloques lógicos, como un encabezado, un menú, o un artículo. HTML5 introdujo etiquetas semánticas que describen el propósito de cada bloque (por ejemplo, <nav> para navegación). Sin embargo, muchos desarrolladores usan <div> (un contenedor genérico) para todo, lo que funciona pero pierde significado. En esta lección aprenderás:

  • Semánticas: Dan claridad, mejoran SEO (búsquedas en Google), y ayudan a accesibilidad (lectores de pantalla).
  • Contenedores: <div> (bloques) y <span> (texto inline) son flexibles para diseño con CSS.

Etiquetas semánticas

Las etiquetas semánticas de HTML5 indican el propósito de un bloque, haciendo tu código más claro y útil para buscadores y herramientas de accesibilidad. Las principales son:

<article>: Contenido independiente

Marca un bloque que puede leerse solo, como un post de blog o una noticia.

Ejemplo:

<article>
  <h2>Aprende HTML</h2>
  <p>HTML es el lenguaje de la web...</p>
</article>

<section>: Sección temática

Agrupa contenido relacionado, como capítulos o partes de un artículo. Suele incluir un encabezado (<h1>-<h6>).

Ejemplo:

<section>
  <h2>Introducción</h2>
  <p>Este es el primer capítulo...</p>
</section>

Contiene enlaces de navegación, como un menú principal.

Ejemplo:

<nav>
  <ul>
    <li><a href="inicio.html">Inicio</a></li>
    <li><a href="acerca.html">Acerca</a></li>
  </ul>
</nav>

<aside>: Contenido secundario

Marca contenido relacionado pero no esencial, como una barra lateral o notas.

Ejemplo:

<aside>
  <h3>Enlaces útiles</h3>
  <p>Visita <a href="https://example.net">example.net</a>.</p>
</aside>

<header>: Encabezado

Contiene el encabezado de una página o sección, como un logo o título. No confundir con el elemento HEAD que contiene los metadatos del documento.

Ejemplo:

<header>
  <h1>Mi blog</h1>
</header>

Incluye información al final, como contacto o copyright.

Ejemplo:

<footer>
  <p>© 2025 Ignit.net</p>
</footer>

<main>: Contenido principal

Marca el contenido principal de la página, excluyendo encabezados o menús.

Ejemplo:

<main>
  <h2>Bienvenido</h2>
  <p>Este es el contenido principal...</p>
</main>

<figure> y <figcaption>: Imágenes con descripción

<figure> agrupa una imagen (o video), y <figcaption> añade una descripción.

Ejemplo:

<figure>
  <img src="foto.jpg" alt="Paisaje">
  <figcaption>Un bello paisaje.</figcaption>
</figure>

Contenedores: <div> y <span>

Las etiquetas <div> y <span> son contenedores genéricos, sin significado semántico, usados para organizar y estilizar con CSS. Son muy comunes en la práctica porque son flexibles, pero no reemplazan a las semánticas.

<div>: Contenedor de bloques

<div> agrupa contenido en bloques (como secciones o columnas). Es ideal para maquetación con CSS.

Atributos globales:

  • id: Identificador único (por ejemplo, id="encabezado").
  • class: Clase para CSS (por ejemplo, class="columna").
  • style: Estilo inline (por ejemplo, style="background-color: #f0f0f0").

Ejemplo:

<div id="contenedor">
  <h2>Sección</h2>
  <p>Este es un bloque...</p>
</div>

<span>: Contenedor inline

<span> marca texto dentro de un párrafo o línea, para estilizar partes específicas. No conlleva saltos de línea

Ejemplo:

<p>Aprende <span style="color: blue;">HTML</span> con este manual.</p>

Resultado: Aprende HTML con este manual.

Semánticas vs. <div>: ¿Por qué tantas <div>?

En la práctica, muchas páginas usan <div> para todo (por ejemplo, <div class="header"> en lugar de <header>) porque:

  • Simplicidad: <div> es universal y no requiere decidir si algo es un <article> o <section>.
  • Frameworks: Herramientas como Bootstrap usan <div class="container"> para maquetación.
  • Hábito: Antes de HTML5, <div> era la única opción.

Problema: Usar solo <div> hace el código menos claro, dificulta el SEO, y afecta a lectores de pantalla.

Recomendación:

  • Usa semánticas (<header>, <article>) para estructura y significado.
  • Usa <div> para maquetación visual (columnas, contenedores) cuando no haya una semántica adecuada.
  • Combínalos: Por ejemplo, un <div class="columna"> dentro de un <article>.

Comparación:

Con <div> (común, pero menos claro):

<div class="header">
  <div class="titulo">Mi blog</div>
</div>
<div class="contenido">
  <div class="post">Artículo...</div>
</div>

Con semánticas (recomendado):

<header>
  <h1>Mi blog</h1>
</header>
<main>
  <article>Artículo...</article>
</main>

Ejemplo completo

Aquí tienes una página con semánticas y <div>/<span>: 

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi blog - Ignside.net</title>
</head>
<body>
  <header>
    <h1>Mi blog</h1>
    <nav>
      <ul>
        <li><a href="inicio.html">Inicio</a></li>
        <li><a href="acerca.html">Acerca</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h2>Aprende HTML</h2>
      <p>HTML es el <span style="color: blue;">lenguaje</span> de la web.</p>
    </article>
    <aside>
      <h3>Enlaces</h3>
      <p>Visita <a href="https://ignit.net">Ignit.net</a>.</p>
    </aside>
  </main>
  <footer>
    <p>© 2025 Ignit.net</p>
  </footer>
  <div class="anuncio" style="background-color: #f0f0f0;">
    <p>¡Suscríbete al boletín!</p>
  </div>
</body>
</html>

Ejemplo con CSS

El mismo ejemplo, pero con más CSS para <div>:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi blog - Ignit.net</title>
</head>
<body>
  <header style="background-color: #333; color: white;">
    <h1>Mi blog</h1>
    <nav>
      <ul>
        <li><a href="inicio.html">Inicio</a></li>
        <li><a href="acerca.html">Acerca</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h2>Aprende HTML</h2>
      <p>HTML es el <span style="color: blue;">lenguaje</span> de la web.</p>
    </article>
    <aside style="float: right; width: 30%;">
      <h3>Enlaces</h3>
      <p>Visita <a href="https://ignit.net">ignit.net</a>.</p>
    </aside>
  </main>
  <footer style="text-align: center;">
    <p>© 2025 Ignside.net</p>
  </footer>
  <div class="anuncio" style="background-color: #f0f0f0; padding: 10px;">
    <p>¡Suscríbete al boletín!</p>
  </div>
</body>
</html>

Consejos para evitar problemas

  1. Usa UTF-8: Declara <meta charset="UTF-8">
  2. Prefiere semánticas: Usa <header>, <article>, etc., para claridad y SEO, en lugar de <div> para todo.
  3. Combina con <div>: Usa <div> para diseño (columnas, contenedores) cuando no haya una semántica adecuada.
  4. Atributos globales: Aplica id, class, o style en <div> y <span> para CSS.
  5. Prueba en navegadores: Abre la página en Chrome, Firefox, o Safari para confirmar la estructura.
  6. Accesibilidad: Usa semánticas para lectores de pantalla (por ejemplo, <nav> para menús).
TOP