Saltar a contenido

HTML: la estructura del contenido

Cuando el servidor responde a una petición HTTP, lo que viaja de vuelta es, casi siempre, un documento HTML. Es la primera de las tres capas que trabajan juntas en toda página web:

Capa Responsabilidad
HTML Contenido — qué información hay y cómo está organizada
CSS Presentación — cómo se ve
JavaScript Comportamiento — qué ocurre cuando el usuario interactúa

HTML (HyperText Markup Language) es un lenguaje de marcado, no un lenguaje de programación. No tiene variables, ni condicionales, ni ciclos: no calcula nada. Lo que hace es etiquetar el contenido para indicar qué es cada cosa —esto es un título, esto un párrafo, esto un enlace— y el navegador lo interpreta y lo transforma en una página visual.

Esa distinción importa más de lo que parece. Cuando escribimos <h1>, no estamos diciendo "muéstralo grande y en negrita": estamos diciendo "esto es el título principal del documento". Que además se vea grande es una decisión de estilo, y esa es responsabilidad de CSS. Marcar el significado y no la apariencia es lo que hace que una página funcione bien en un lector de pantalla, en un buscador y en un teléfono.

Primer ejercicio: crear una página web

No hace falta ningún programa especial para empezar. Basta un bloc de notas: se escribe el texto, se guarda con extensión .html y se abre con el navegador.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Página de ejemplo</title>
    <meta name="description" content="Ejemplo de estructura HTML básica">
  </head>
  <body>
    <h1>Bienvenido a mi página</h1>
    <p>Este contenido es visible para el usuario.</p>
  </body>
</html>

Ese archivo, abierto en un navegador, ya es una página web. Todo lo demás que veremos en el curso —Spring Boot, Thymeleaf, Angular— existe para generar documentos como este de forma dinámica, pero el resultado final que llega al navegador sigue siendo exactamente esto.

Estructura de un documento HTML

Un documento HTML tiene siempre la misma anatomía:

  • <!DOCTYPE html> — le indica al navegador que se trata de HTML5. Va siempre en la primera línea.
  • <html lang="es"> — el elemento raíz que envuelve todo. El atributo lang declara el idioma del contenido, lo que ayuda a los lectores de pantalla y a los buscadores.
  • <head> — la información técnica del documento: título, codificación, descripción, enlaces a hojas de estilo y scripts. No se ve en la página.
  • <body> — el contenido visible: todo lo que el usuario lee e interactúa.

La separación entre <head> y <body> es la primera aplicación de un principio que reaparecerá constantemente: separar lo que el sistema necesita saber de lo que el usuario necesita ver.

Etiquetas del encabezado

Dentro de <head> viven cinco elementos que conviene conocer:

Etiqueta Para qué sirve
<title> Título de la página. Es el texto que aparece en la pestaña del navegador y el que muestran los buscadores como enlace.
<meta> Información adicional sobre el documento: codificación de caracteres, descripción, configuración para dispositivos móviles.
<link> Enlaza un recurso externo. Su uso más común es href="" apuntando a un archivo CSS.
<style> Define estilos CSS directamente dentro del documento, sin archivo externo.
<base> Define la ruta principal a partir de la cual se resuelven las rutas relativas del documento.

<meta charset=&quot;UTF-8&quot;> no es opcional

Sin esa línea, las tildes y las eñes pueden mostrarse como símbolos ilegibles. Es la primera línea que se escribe dentro del <head> y evita una de las fallas más frecuentes al empezar.

Etiquetas para texto

HTML ofrece un repertorio amplio para marcar texto. Se organiza en tres grupos.

Títulos

Los encabezados van de <h1> a <h6> y expresan una jerarquía, no un tamaño. <h1> es el título principal; <h2> marca las secciones; <h3> las subsecciones, y así sucesivamente.

<h1>Título principal</h1>
<h2>Subtítulo de sección</h2>
<h3>Detalle dentro de la sección</h3>

La regla práctica es simple: un solo <h1> por página y ningún salto de nivel (no pasar de <h2> a <h4>). Un buscador y un lector de pantalla construyen el índice del documento a partir de esa jerarquía; si está desordenada, la página se vuelve difícil de recorrer.

Párrafos

La etiqueta <p> delimita un párrafo. El navegador ignora los saltos de línea del código fuente, de modo que separar párrafos exige marcarlos explícitamente:

<p>Este es el primer párrafo del documento.</p>
<p>Este es el segundo, claramente separado del anterior.</p>

Modificación de texto

Este grupo permite marcar palabras dentro de un párrafo:

Etiqueta Efecto Significado
<b> Negrilla Resalta visualmente, sin implicar importancia
<strong> Negrilla Importancia fuerte en el contenido
<i> Itálica, cursiva Cambia el tono, sin implicar énfasis
<em> Itálica Énfasis en el contenido
<s> Tachado Contenido que ya no es exacto o relevante
<del> Tachado Texto eliminado de una versión anterior
<ins> Subrayado Texto insertado respecto a una versión anterior
<mark> Resaltado Texto destacado por ser relevante en un contexto
<small> Texto pequeño Comentarios secundarios, notas legales
<sub> Subíndice H2O
<sup> Superíndice x2

<b> frente a <strong>, <i> frente a <em>

Visualmente hacen lo mismo, pero significan cosas distintas. <b> e <i> son puramente decorativos; <strong> y <em> comunican importancia y énfasis, y un lector de pantalla los pronuncia con otra entonación. Ante la duda, <strong> y <em> son la mejor elección: describen el contenido y no solo su apariencia.

Ejemplo de uso combinado:

<p>
  Este es un párrafo de texto. Algunas palabras son
  <strong>muy importantes</strong> y otras tienen
  <em>énfasis especial</em>.
</p>

Citas textuales

Cuando el contenido reproduce las palabras de otra persona, HTML ofrece etiquetas específicas que le dan significado, no solo estilo:

  • <blockquote> — cita larga, en bloque, separada del texto que la rodea.
  • <q> — cita corta, dentro de un párrafo. El navegador añade las comillas automáticamente.
<b>Pambelé dice:</b><br/>
<blockquote>
  Es mejor ser rico que pobre
</blockquote>

<p>
  Según la documentación oficial, <q>HTML es la base de la web</q>.
</p>

Marcar una cita con <blockquote> en lugar de simplemente ponerla en cursiva permite que un buscador la identifique como cita, que un lector de pantalla la anuncie como tal y que su estilo se cambie en toda la página con una sola regla CSS.

Tildes y caracteres especiales

HTML permite escribir caracteres acentuados mediante entidades: secuencias que empiezan con & y terminan con ;. Fueron indispensables cuando la codificación de caracteres no estaba estandarizada, y todavía aparecen en mucho código existente.

Carácter Entidad Carácter Entidad
á &aacute; Á &Aacute;
é &eacute; É &Eacute;
í &iacute; Í &Iacute;
ó &oacute; Ó &Oacute;
ú &uacute; Ú &Uacute;
ñ &ntilde; Ñ &Ntilde; 
<b>Pambel&eacute; dice:</b><br/>
<blockquote>
  Es mejor ser rico que pobre
</blockquote>

¿Sigue siendo necesario?

Con <meta charset="UTF-8"> declarado en el <head>, se pueden escribir las tildes directamente y todo funciona. Las entidades siguen siendo útiles en dos casos: cuando hay que representar un carácter que tiene significado en HTML —&lt; para <, &gt; para >, &amp; para &— y cuando se trabaja con código heredado que no declara codificación.

Listas

HTML ofrece tres tipos de lista, cada uno con un propósito distinto.

Lista no ordenada (<ul> → <li>)

Para elementos donde el orden no importa. Se muestran con viñetas.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Lista ordenada (<ol> → <li>)

Para elementos donde el orden sí importa: pasos de un procedimiento, posiciones de un ranking. Se numeran automáticamente.

<ol>
  <li>Diseñar la estructura</li>
  <li>Crear el contenido</li>
  <li>Publicar el sitio</li>
</ol>

Lista de definiciones (<dl> → <dt> + <dd>)

Para pares término–descripción, como un glosario. <dt> es el término (sin indentación) y <dd> su definición (indentada).

<dl>
  <dt>HTML</dt>
  <dd>Lenguaje de marcado que estructura el contenido.</dd>

  <dt>CSS</dt>
  <dd>Lenguaje que define la presentación visual.</dd>
</dl>

Es la etiqueta menos usada de las tres y, sin embargo, la más apropiada cada vez que se documenta un conjunto de conceptos.

Enlaces

El enlace es la pieza que convierte documentos sueltos en una web. Es la materialización de la idea de hipertexto: la posibilidad de saltar de un contenido a otro sin seguir un orden fijo.

La etiqueta principal es <a> y su atributo esencial es href, que indica a dónde va.

Enlace a otra página

<p>
  Visita la documentación de
  <a href="https://developer.mozilla.org" target="_blank">
    MDN Web Docs
  </a>
  para aprender más.
</p>

El atributo target="_blank" abre el destino en una pestaña nueva. Conviene usarlo solo para enlaces externos: dentro del propio sitio, abrir pestañas nuevas suele estorbar más que ayudar.

Enlace a una sección de la misma página

href también puede apuntar a un punto dentro del mismo documento, usando # seguido del id del elemento de destino:

<!-- El enlace -->
<a href="#requisitos">Ir a requisitos</a>

<!-- El destino, en cualquier parte de la página -->
<h2 id="requisitos">Requisitos</h2>

Es el mecanismo con el que funcionan los índices de contenido, incluida la tabla de navegación de esta misma documentación.

El texto del enlace debe describir el destino

<a href="...">clic aquí</a> no dice nada fuera de contexto. <a href="...">MDN Web Docs</a> sí. Quien navega con lector de pantalla suele recorrer la lista de enlaces de una página de forma aislada; si todos dicen "clic aquí", la página es inutilizable.

Tablas

Las tablas sirven para representar datos tabulares: información que tiene sentido organizada en filas y columnas. No deben usarse para maquetar la página —para eso están CSS, Flexbox y Grid—.

Una tabla se construye con seis etiquetas:

Etiqueta Significado
<table> La tabla completa
<thead> Cabezote de la tabla
<tbody> Cuerpo de la tabla
<tr> Fila (table row)
<th> Celda de cabezote (table header)
<td> Celda de cuerpo (table data) 
<table>
  <thead>
    <tr>
      <th>Tecnología</th>
      <th>Uso principal</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Estructura del contenido</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Presentación visual</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>Interactividad</td>
    </tr>
  </tbody>
</table>

Separar <thead> de <tbody> no es un capricho: permite que el navegador mantenga fijo el encabezado al desplazar una tabla larga, y que un lector de pantalla anuncie a qué columna pertenece cada dato.

Multimedia

Tres etiquetas permiten incorporar contenido no textual:

Etiqueta Contenido
<img> Imagen
<video> Video
<audio> Audio 
<img src="diagrama.png" alt="Diagrama de la arquitectura del sistema">

<video src="demo.mp4" controls width="600"></video>

<audio src="podcast.mp3" controls></audio>

El atributo alt de <img> merece atención especial. Describe la imagen con palabras y cumple tres funciones: es lo que lee un lector de pantalla, lo que se muestra si la imagen no carga y lo que interpreta un buscador. Toda imagen con contenido informativo debe tener un alt descriptivo —y es un criterio de evaluación en la actividad de este módulo—.

En <video> y <audio>, el atributo controls muestra los botones de reproducción; sin él, el reproductor aparece sin interfaz.

Contenedores: <div> y <span>

Cuando ninguna etiqueta describe con precisión lo que se quiere agrupar, HTML ofrece dos contenedores sin significado propio:

  • <div> — contenedor de bloque. Agrupa secciones completas: texto, imágenes, videos u otros contenedores. Ocupa todo el ancho disponible.
  • <span> — contenedor en línea. Agrupa fragmentos dentro de una línea de texto, sin romper el flujo.

Su utilidad es estructural: dividir la página en bloques lógicos, aplicar estilos de manera agrupada y construir layouts (cabeceras, menús, contenido, pie de página). Son la base para construir interfaces complejas y, junto con CSS, el mecanismo principal para organizar visualmente una página.

El síntoma del div soup

Es tentador resolverlo todo con <div>. El resultado es un documento donde ninguna etiqueta dice qué contiene, imposible de interpretar para buscadores y lectores de pantalla, y difícil de leer para cualquier persona que herede el código. La regla es: usar <div> solo cuando ninguna etiqueta semántica describa el contenido.

HTML semántico

Aquí llegamos a la idea más importante de esta página. HTML incorpora etiquetas que describen la función del contenido, y que deben preferirse a <div> siempre que apliquen:

Etiqueta Qué contiene
<header> Cabecera de la página o de una sección
<nav> Área de navegación: menús y enlaces principales
<main> Contenido principal del documento. Solo uno por página
<section> Sección temática que agrupa contenido relacionado
<article> Contenido independiente, que tendría sentido por sí solo: una entrada, un artículo, un post
<aside> Contenido complementario o lateral
<footer> Pie de página o de sección: información final, legal o de contacto

Comparemos las dos formas de escribir la misma estructura:

<!-- Sin semántica: funciona, pero no dice nada -->
<div class="cabecera">...</div>
<div class="menu">...</div>
<div class="contenido">...</div>
<div class="pie">...</div>

<!-- Con semántica: la estructura se explica sola -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

El navegador dibuja lo mismo en ambos casos. La diferencia está en todo lo demás: un lector de pantalla puede ofrecer "saltar al contenido principal" únicamente si existe un <main>; un buscador entiende qué parte de la página es navegación y cuál es contenido; y cualquier persona que abra el código seis meses después lo entiende sin necesidad de descifrar nombres de clases.

Referencia: elementos más utilizados

Elemento Descripción Uso común
<html> Elemento raíz del documento. Envuelve todo el contenido de la página.
<head> Contiene metadatos del documento. Título, codificación, enlaces a CSS y scripts.
<title> Define el título de la página. Texto mostrado en la pestaña del navegador.
<meta> Define metadatos del documento. Codificación, descripción, diseño responsivo.
<body> Contiene el contenido visible. Todo lo que el usuario ve en la página.
<h1>–<h6> Encabezados jerárquicos. Títulos y subtítulos del contenido.
<p> Define un párrafo de texto. Contenido textual.
<strong> Texto con importancia semántica. Resaltar información clave.
<em> Texto enfatizado. Dar énfasis a palabras o frases.
<blockquote> Cita en bloque. Reproducir un texto de otra fuente.
<a> Define un enlace. Navegación entre páginas o secciones.
<img> Inserta una imagen. Mostrar imágenes en la página.
<video> / <audio> Insertan contenido multimedia. Reproducir video o audio.
<ul> Lista no ordenada. Listar elementos sin orden específico.
<ol> Lista ordenada. Listar elementos con orden numérico.
<li> Elemento de una lista. Ítems dentro de listas.
<dl> / <dt> / <dd> Lista de definiciones. Glosarios y pares término–descripción.
<table> Define una tabla. Mostrar datos estructurados.
<thead> / <tbody> Cabezote y cuerpo de la tabla. Separar encabezados de datos.
<tr> Fila de una tabla. Agrupar celdas horizontalmente.
<th> Encabezado de tabla. Títulos de columnas.
<td> Celda de tabla. Datos de la tabla.
<form> Define un formulario. Envío de datos al servidor.
<input> Campo de entrada. Captura de datos del usuario.
<label> Etiqueta descriptiva. Asociar texto a campos de formulario.
<button> Botón interactivo. Enviar formularios o disparar acciones.
<div> Contenedor genérico de bloque. Agrupar y estructurar contenido.
<span> Contenedor genérico en línea. Aplicar estilos a fragmentos de texto.
<header> Encabezado semántico. Cabecera de página o sección.
<nav> Área de navegación. Menús y enlaces principales.
<main> Contenido principal. El cuerpo central del documento.
<section> Sección temática. Agrupar contenido relacionado.
<article> Contenido independiente. Entradas, artículos o posts.
<footer> Pie de página semántico. Información final o legal.

Actividad 1 · HTML semántico

Construye la estructura de una página con significado.

Objetivo

Crear una página clara, ordenada y accesible mediante elementos semánticos de HTML.

Pasos

  1. Elige un tema y crea index.html.
  2. Organiza el contenido con header, nav, main, section, article y footer.
  3. Añade títulos, párrafos, una lista, un enlace y una imagen con texto alt.
  4. Revisa la jerarquía, la indentación y el cierre de etiquetas.

Entregable

index.html funcional + una captura en el navegador.

Verificación

✓ Un solo <h1> y subtítulos en orden lógico. ✓ Los elementos semánticos reflejan la función del contenido. ✓ El enlace y la imagen funcionan; el alt es descriptivo. ✓ Código indentado y sin etiquetas abiertas.

Lo que sigue

La página de la actividad ya tiene contenido y estructura, pero se ve como un documento en blanco y negro. El siguiente paso es darle forma: continúa en CSS.