En los artículos anteriores se presentó la estructura general de un documento HTML y se profundizó en el propósito del elemento <head>.
El elemento <body> representa el contenido del documento: aquello que el usuario percibe como la página y con lo que interactúa, incluyendo texto, navegación, imágenes, formularios y componentes de aplicación web.
El <body> no es únicamente un contenedor visual. En términos de accesibilidad y usabilidad, el cuerpo es el lugar donde se materializa la estructura semántica del contenido: cómo se organizan los títulos, qué se considera navegación, cuál es el contenido principal, qué partes son complementarias y qué regiones se repiten entre páginas.
Esta estructura, cuando se expresa con etiquetas semánticas adecuadas, facilita la navegación para lectores de pantalla, y mejora la efectividad general del documento para las personas que utilizan herramientas de apoyo a la comprensión.
Ejemplo completo de body
A continuación se muestra un ejemplo realista de <body> en una página de contenido, utilizando una estructura semántica típica con cabecera, navegación, contenido principal y pie. El objetivo del ejemplo es que se vea cómo se divide el cuerpo en regiones, no que sea un diseño definitivo.
<body>
<h1>Programar a ciegas</h1>
<p>Accesibilidad, usabilidad y desarrollo.</p>
<nav>
<a href="/">Inicio</a>
<a href="/articulos/">Artículos</a>
<a href="/contacto/">Contacto</a>
</nav>
<main>
<h2>El body de una página HTML</h2>
<p>Publicado el 19/01/2026</p>
<p>
El elemento <code><body></code> contiene el contenido principal del documento: texto, enlaces,
imágenes y controles interactivos.
</p>
<h3>Un enlace dentro del contenido</h3>
<p>
Un ejemplo de enlace descriptivo puede ser:
<a href="https://programaraciegas.net">Visitar Programar a ciegas</a>.
</p>
<h3>Una imagen con texto alternativo</h3>
<img src="/img/ejemplo.png" alt="Captura de una página mostrando un artículo con estructura semántica.">
</main>
<footer>
<p>© 2026 Tyflos Accessible Software</p>
<a href="/accesibilidad/">Declaración de accesibilidad</a>
</footer>
</body>
En este ejemplo se puede ver que el <body> suele mezclar contenido estático (párrafos, títulos, imágenes) con contenido interactivo (enlaces, formularios) y con regiones que permiten comprender rápidamente la página (por ejemplo, navegación y contenido principal). El elemento <main> representa el contenido dominante de la página y, por buenas prácticas, debería ser único.
Estructura semántica dentro del body
A la hora de diseñar un sitio web hay que tener en cuenta la idea de no es qué se muestra, sino qué significa cada zona. Para expresar esa semántica, HTML ofrece diversos elementos como <header>, <nav>, <main> y <footer>, que ayudan a identificar regiones típicas de una página, y elementos como <article> y <section>, que ayudan a organizar el contenido en bloques con sentido propio.
Desde el punto de vista de la accesibilidad, estas etiquetas semánticas suelen traducirse en regiones o landmarks que muchos lectores de pantalla permiten identificar y recorrer con atajos de teclado.
Es importante matizar que el contexto importa: un <header> puede ser un banner cuando está directamente asociado al documento, pero no necesariamente cuando aparece dentro de un <article> o <section>. De forma equivalente, un <footer> dentro de un <article> no representa el pie global de la página, sino el pie de ese bloque.
Contenido habitual del body
Dentro del <body> se declaran, en primer lugar, los títulos que organizan la información mediante <h1>…<h6>, que permiten expresar jerarquía y ofrecer navegación por encabezados; a continuación se encuentra el texto en sí, normalmente en párrafos con <p>, citas con <blockquote> o fragmentos de código con <code> y <pre>; seguidamente suelen aparecer enlaces con <a>, que conectan el contenido con otras páginas o con secciones internas; y también se incluyen recursos no textuales como imágenes (<img>) o figuras (<figure> y <figcaption>), además de componentes de interacción como formularios (<form>, <label>, <input>, <button>) y otros controles.
Aunque visualmente todo parece contenido, para un lector de pantalla y para muchas herramientas, la diferencia entre un título, un párrafo, un bloque de navegación o un control de formulario es esencial porque define cómo se recorre y se comprende la página. Por eso conviene preferir semántica nativa de HTML frente a contenedores genéricos (<div>, <span>) cuando exista un elemento apropiado.
Accesibilidad en el body
La mayoría de barreras de accesibilidad aparecen dentro del <body> de la página ya que aquí es donde se incluye el contenido y la funcionalidad y se aplica el diseño.
Para evitar los problemas de accesibilidad más graves hay que prestar atención a los siguientes conceptos:
La estructura mediante encabezados debe reflejar la organización real del contenido, porque los títulos se usan para navegación rápida y orientación. Una jerarquía coherente y títulos que describen secciones, en lugar de textos decorativos, facilita que el usuario entienda el documento sin necesidad de leerlo linealmente.
Las regiones principales deberían estar identificadas de forma clara, normalmente con elementos semánticos (<nav>, <main>, <footer>) y, cuando sea necesario, con nombres accesibles (utilizando, por ejemplo, aria-label en una navegación si hay varias). Este enfoque permite saltar directamente a Navegación, Contenido principal o Pie desde el lector de pantalla.
Todo contenido no textual debe tener una alternativa textual cuando aporte información o cumpla una función. En imágenes, el mecanismo principal sigue siendo el atributo alt, que puede describir la imagen o estar vacío (alt=»») cuando sea decorativa y no deba anunciarse.
En los formularios, el control debe tener un nombre accesible. La forma más robusta suele ser asociar un <label> con el control mediante for/id, y solo cuando no sea viable se recurre a mecanismos como aria-label o aria-labelledby.
Por último, incluso con buena semántica, la experiencia se puede degradar si el foco del teclado no sigue un orden lógico o si hay elementos interactivos que no son realmente operables con teclado. El <body> es, por tanto, el lugar donde se debe verificar navegación por tabulador, foco visible, orden de lectura y coherencia entre lo visual y lo programático.