4. Semántica y atributos

Las zonas de una página

Antes de HTML5, una página era un montón de <div> sin significado. Hoy existen etiquetas que dicen qué zona es cada cosa, y usarlas es la diferencia entre un documento que se entiende solo y uno que hay que descifrar.

Las zonas del <body>, de arriba abajo

flowchart TB
    N["#60;nav#62;<br/>menú de enlaces"]

    subgraph M["#60;main#62;"]
        direction LR
        subgraph A["#60;article#62;"]
            S["#60;section#62;<br/>bloque temático"]
        end
        A ~~~ AS["#60;aside#62;<br/>lateral"]
    end

    F["#60;footer#62;<br/>autoría, contacto, año"]

    N ~~~ M ~~~ F

Etiqueta	Qué zona marca	Cuántas por página
<nav>	El bloque de enlaces de navegación: la navbar	Una, arriba de todo
<main>	El contenido propio de esta vista	Una sola, obligatoriamente
<article>	Una pieza completa que tendría sentido sola: una noticia, una ficha de producto	Las que hagan falta
<section>	Un bloque temático dentro del contenido, con su propio título	Las que hagan falta
<aside>	Contenido lateral, relacionado pero secundario	Las que hagan falta
<footer>	El pie: autoría, contacto, año	Uno abajo

<body>
  <nav>
    <ul>
      <li><a href="index.html">Inicio</a></li>
    </ul>
  </nav>
 
  <main>
    <h1>Sobre mí</h1>
    <section>
      <h2>Aficiones</h2>
      <p>…</p>
    </section>
  </main>
 
  <footer>
    <p>Ana Soto · 2026</p>
  </footer>
</body>

main va una sola vez y no envuelve la navbar ni el pie

<main> es el contenido que cambia de una vista a otra. La navbar y el pie se repiten iguales en todas, así que van fuera: el <nav> antes de abrir el <main>, y el <footer> después de cerrarlo. Los tres son hermanos dentro del <body>.

El nombre del sitio no va en el cuerpo, va en la pestaña

Lo que identifica al sitio (su nombre) ya está en el <title> del <head>, que es lo que se lee en la pestaña del navegador y en los resultados de Google. Dentro del <body>, el <h1> es el título de esa vista, no el del sitio entero.

section y article: cuál va dentro de cuál

La prueba: si el bloque tendría sentido publicado por separado (una noticia completa, una ficha de producto) es un article. Si es una parte de algo mayor que fuera de contexto no se entiende, es una section.

Un article puede contener section (capítulos de una noticia larga) y una section puede contener varios article (la sección “Novedades” con tres fichas).

Usar div cuando existe la etiqueta con significado

<div class="navbar"> funciona, se ve igual y es peor: los lectores de pantalla pueden saltar directamente a un <nav> pero no a un div que se llame así, y los buscadores tampoco lo entienden.

El div es para cuando ninguna etiqueta semántica aplica: agrupar dos cosas solo para poder moverlas juntas.

Bloque y línea, otra vez

Las etiquetas que acabas de ver se reparten entre las dos clases que viste en Etiquetas y documento: main, section, article, aside, nav y footer son todas de bloque, igual que el div. Ocupan el ancho disponible y se apilan una debajo de otra, que es exactamente lo que el diagrama de arriba dibuja.

Por eso el diagrama se lee de arriba abajo

No hace falta ningún estilo para que nav, main y footer queden apilados: es el comportamiento por defecto de los elementos de bloque. Ponerlos lado a lado (o el aside a la derecha del article) sí requiere CSS, y eso viene en el tópico siguiente.

Los atributos class e id

Estos dos no cambian nada de cómo se ve la página por sí solos. Sirven para ponerle nombre a un elemento, y ese nombre es con el que CSS y JavaScript lo van a encontrar después.

<nav>
  <a href="index.html" class="enlace activa">Inicio</a>
  <a href="contacto.html" class="enlace">Contacto</a>
</nav>
 
<h2 id="contacto">Contacto</h2>

Atributo	Cuántos elementos pueden llevarlo	Para qué
class	Muchos, y cada elemento puede tener varias, separadas por espacios	Aplicar el mismo estilo a un grupo de elementos
id	Uno solo en toda la página: es único	Apuntar a un elemento concreto: un ancla #contacto, un label for="…"

Repetir un id en la misma página

Un id tiene que ser único. Si dos elementos comparten el mismo, los anclas dejan de funcionar bien, los label se enlazan al elemento equivocado y JavaScript encuentra solo el primero. Para estilos compartidos se usa class, que sí puede repetirse.

Nombra por lo que es, no por cómo se ve

class="destacado" sigue teniendo sentido si mañana el destacado pasa de amarillo a azul. class="amarillo" se vuelve mentira ese mismo día.

En el tópico de CSS estas dos van a ser la herramienta principal: .enlace selecciona por clase y #contacto selecciona por id.

Saltos, separadores y comentarios

<p>Primera línea<br />Segunda línea</p>
 
<hr />
 
<!-- Esto es un comentario: no se ve en la página -->

Etiqueta	Qué hace	Cierra
<br>	Salto de línea dentro de un mismo párrafo	No
<hr>	Separador temático: una línea horizontal	No
<!-- -->	Comentario: nota para quien lee el código	No aplica

Usar <br> para separar párrafos

Dos <br> seguidos no son un párrafo nuevo: son un hueco visual sin significado. Para separar ideas se usan dos <p>, y el espacio entre ellos se ajusta luego con CSS.

<br> sirve para lo que de verdad es un salto dentro de un mismo bloque: una dirección postal, un verso de un poema.

El comentario sí llega al navegador

No se ve, pero está en el archivo: cualquiera que abra el código fuente lo lee. Sirve para organizar y explicar, nunca para esconder algo.

Caracteres especiales

Algunos caracteres tienen significado propio en HTML. Para escribirlos como texto hay que usar su entidad: un código que empieza con & y termina en ;.

Quieres escribir	Escribes	Por qué
<	&lt;	Si no, el navegador cree que empieza una etiqueta
>	&gt;	Igual, cierre de etiqueta
&	&amp;	Es el inicio de toda entidad
"	&quot;	Dentro del valor de un atributo
Espacio que no se parte	&nbsp;	Une dos palabras para que no queden en líneas distintas

<p>La etiqueta &lt;p&gt; marca un párrafo.</p>
<!-- Se ve: La etiqueta <p> marca un párrafo. -->

Las tildes y la ñ no necesitan entidad

Con <meta charset="UTF-8"> en el head se escriben directamente: diseño, sesión, ¿cómo?. Las entidades solo hacen falta para los cinco caracteres de la tabla.

Ojo: esto vale para el contenido, no para los nombres de archivo, que siguen yendo sin tildes.

Checkpoint

Intenta responder antes de desplegar cada pregunta.

¿Qué zona de la página marca cada etiqueta semántica?

• nav (el bloque de enlaces de navegación: la navbar, arriba de todo).
• main (el contenido propio de esa vista). Una sola por página.
• article (una pieza completa que tendría sentido publicada sola).
• section (un bloque temático con su propio título).
• aside (contenido lateral, relacionado pero secundario).
• footer (el pie: autoría, contacto, año).

Las tres del <body> son nav, main y footer, y son hermanas: ninguna va dentro de otra. El nombre del sitio no está en el cuerpo, está en el <title>.

¿Cuándo usas section y cuándo article?

Si el bloque tendría sentido publicado por separado (una noticia completa, una ficha de producto), es un article. Si es una parte de algo mayor que fuera de contexto no se entiende, es una section.

Pueden anidarse en los dos sentidos: un article con varias section, o una section con varios article.

¿Por qué nav, main y footer quedan apilados sin escribir un solo estilo?

Porque los tres son elementos de bloque: ocupan todo el ancho disponible y empujan hacia abajo lo que viene después. Apilarse es su comportamiento por defecto.

Lo que sí necesita CSS es lo contrario: poner cosas lado a lado, como el aside a la derecha del article.

¿Qué diferencia hay entre class e id?

class puede repetirse en muchos elementos, y un mismo elemento puede llevar varias separadas por espacios. Sirve para aplicar el mismo estilo a un grupo.

id tiene que ser único en toda la página. Sirve para apuntar a un elemento concreto: un ancla #contacto, un label for="…".

Ninguno de los dos cambia nada por sí solo: le ponen nombre al elemento para que CSS y JavaScript lo encuentren.

¿Por qué no se usan dos <br> para separar párrafos?

Porque <br> es un salto de línea sin significado: deja un hueco visual pero no le dice a nadie que ahí empieza una idea nueva. Dos ideas distintas van en dos <p>, y la separación entre ellos se ajusta con CSS.

<br> sirve para saltos dentro de un mismo bloque: una dirección postal, un verso.

¿Cómo escribes el símbolo < para que se vea en la página?

Con su entidad: <. Si lo escribes tal cual, el navegador cree que empieza una etiqueta. Lo mismo con > (>) y con & (&).

Las tildes y la ñ no necesitan entidad: basta con tener <meta charset="UTF-8"> en el head.