{"id":1344,"date":"2026-02-13T07:00:00","date_gmt":"2026-02-13T06:00:00","guid":{"rendered":"https:\/\/programaraciegas.net\/?p=1344"},"modified":"2026-01-19T09:12:26","modified_gmt":"2026-01-19T08:12:26","slug":"el-body-de-una-pagina-html","status":"publish","type":"post","link":"https:\/\/programaraciegas.net\/?p=1344","title":{"rendered":"El body de una p\u00e1gina HTML"},"content":{"rendered":"

En los art\u00edculos anteriores se present\u00f3 la estructura general de un documento HTML<\/a> y se profundiz\u00f3 en el prop\u00f3sito del elemento <head><\/a>.<\/p>\n

El elemento <body> representa el contenido del documento: aquello que el usuario percibe como la p\u00e1gina y con lo que interact\u00faa, incluyendo texto, navegaci\u00f3n, im\u00e1genes, formularios y componentes de aplicaci\u00f3n web.<\/p>\n

El <body> no es \u00fanicamente un contenedor visual. En t\u00e9rminos de accesibilidad y usabilidad, el cuerpo es el lugar donde se materializa la estructura sem\u00e1ntica del contenido: c\u00f3mo se organizan los t\u00edtulos, qu\u00e9 se considera navegaci\u00f3n, cu\u00e1l es el contenido principal, qu\u00e9 partes son complementarias y qu\u00e9 regiones se repiten entre p\u00e1ginas.<\/p>\n

Esta estructura, cuando se expresa con etiquetas sem\u00e1nticas adecuadas, facilita la navegaci\u00f3n para lectores de pantalla, y mejora la efectividad general del documento para las personas que utilizan herramientas de apoyo a la comprensi\u00f3n.<\/p>\n

Ejemplo completo de body<\/h2>\n

A continuaci\u00f3n se muestra un ejemplo realista de <body> en una p\u00e1gina de contenido, utilizando una estructura sem\u00e1ntica t\u00edpica con cabecera, navegaci\u00f3n, contenido principal y pie. El objetivo del ejemplo es que se vea c\u00f3mo se divide el cuerpo en regiones, no que sea un dise\u00f1o definitivo.<\/p>\n

<body>
<h1>Programar a ciegas<\/h1>
<p>Accesibilidad, usabilidad y desarrollo.<\/p>
<nav>
<a href=\"\/\">Inicio<\/a>
<a href=\"\/articulos\/\">Art\u00edculos<\/a>
<a href=\"\/contacto\/\">Contacto<\/a>
<\/nav>

<main>
<h2>El body de una p\u00e1gina HTML<\/h2>
<p>Publicado el 19\/01\/2026<\/p>
<p>
El elemento <code>&lt;body&gt;<\/code> contiene el contenido principal del documento: texto, enlaces,
im\u00e1genes 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\u00e1gina mostrando un art\u00edculo con estructura sem\u00e1ntica.\">
<\/main>

<footer>
<p>&copy; 2026 Tyflos Accessible Software<\/p>
<a href=\"\/accesibilidad\/\">Declaraci\u00f3n de accesibilidad<\/a>
<\/footer>
<\/body><\/pre>\n
En este ejemplo se puede ver que el <body> suele mezclar contenido est\u00e1tico (p\u00e1rrafos, t\u00edtulos, im\u00e1genes) con contenido interactivo (enlaces, formularios) y con regiones que permiten comprender r\u00e1pidamente la p\u00e1gina (por ejemplo, navegaci\u00f3n y contenido principal). El elemento <main><\/a> representa el contenido dominante de la p\u00e1gina y, por buenas pr\u00e1cticas, deber\u00eda ser \u00fanico.<\/p>\n
Estructura sem\u00e1ntica dentro del body<\/h2>\n
A la hora de dise\u00f1ar un sitio web hay que tener en cuenta la idea de no es qu\u00e9 se muestra, sino qu\u00e9 significa cada zona. Para expresar esa sem\u00e1ntica, HTML ofrece diversos elementos como <header<\/a>>, <nav<\/a>>, <main> y <footer>, que ayudan a identificar regiones t\u00edpicas de una p\u00e1gina, y elementos como <article<\/a>> y <section>, que ayudan a organizar el contenido en bloques con sentido propio.<\/p>\n
Desde el punto de vista de la accesibilidad, estas etiquetas sem\u00e1nticas suelen traducirse en regiones o landmarks<\/a> que muchos lectores de pantalla permiten identificar y recorrer con atajos de teclado.<\/p>\n
Es importante matizar que el contexto importa: un <header> puede ser un banner cuando est\u00e1 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\u00e1gina, sino el pie de ese bloque.<\/p>\n
Contenido habitual del body<\/h2>\n
Dentro del <body> se declaran, en primer lugar, los t\u00edtulos que organizan la informaci\u00f3n mediante <h1>\u2026<h6>, que permiten expresar jerarqu\u00eda y ofrecer navegaci\u00f3n por encabezados; a continuaci\u00f3n se encuentra el texto en s\u00ed, normalmente en p\u00e1rrafos con <p>, citas con <blockquote> o fragmentos de c\u00f3digo con <code> y <pre>; seguidamente suelen aparecer enlaces con <a>, que conectan el contenido con otras p\u00e1ginas o con secciones internas; y tambi\u00e9n se incluyen recursos no textuales como im\u00e1genes (<img>) o figuras (<figure> y <figcaption>), adem\u00e1s de componentes de interacci\u00f3n como formularios (<form>, <label>, <input>, <button>) y otros controles.<\/p>\n
Aunque visualmente todo parece contenido, para un lector de pantalla y para muchas herramientas, la diferencia entre un t\u00edtulo, un p\u00e1rrafo, un bloque de navegaci\u00f3n o un control de formulario es esencial porque define c\u00f3mo se recorre y se comprende la p\u00e1gina. Por eso conviene preferir sem\u00e1ntica nativa de HTML frente a contenedores gen\u00e9ricos (<div>, <span>) cuando exista un elemento apropiado.<\/p>\n
Accesibilidad en el body<\/h2>\n
La mayor\u00eda de barreras de accesibilidad aparecen dentro del <body> de la p\u00e1gina ya que aqu\u00ed es donde se incluye el contenido y la funcionalidad y se aplica el dise\u00f1o.<\/p>\n
Para evitar los problemas de accesibilidad m\u00e1s graves hay que prestar atenci\u00f3n a los siguientes conceptos:<\/p>\n
La estructura mediante encabezados<\/a> debe reflejar la organizaci\u00f3n real del contenido, porque los t\u00edtulos se usan para navegaci\u00f3n r\u00e1pida y orientaci\u00f3n. Una jerarqu\u00eda coherente y t\u00edtulos que describen secciones, en lugar de textos decorativos, facilita que el usuario entienda el documento sin necesidad de leerlo linealmente.<\/p>\n
Las regiones principales deber\u00edan estar identificadas de forma clara, normalmente con elementos sem\u00e1nticos (<nav>, <main>, <footer>) y, cuando sea necesario, con nombres accesibles (utilizando, por ejemplo, aria-label en una navegaci\u00f3n si hay varias). Este enfoque permite saltar directamente a Navegaci\u00f3n, Contenido principal o Pie desde el lector de pantalla.<\/p>\n
Todo contenido no textual debe tener una alternativa textual<\/a> cuando aporte informaci\u00f3n o cumpla una funci\u00f3n. En im\u00e1genes, el mecanismo principal sigue siendo el atributo alt, que puede describir la imagen o estar vac\u00edo (alt=\u00bb\u00bb) cuando sea decorativa y no deba anunciarse.<\/p>\n
En los formularios, el control debe tener un nombre accesible. La forma m\u00e1s 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.<\/p>\n
Por \u00faltimo, incluso con buena sem\u00e1ntica, la experiencia se puede degradar si el foco del teclado no sigue un orden l\u00f3gico o si hay elementos interactivos que no son realmente operables con teclado. El <body> es, por tanto, el lugar donde se debe verificar navegaci\u00f3n por tabulador, foco visible, orden de lectura y coherencia entre lo visual y lo program\u00e1tico.<\/p>\n","protected":false},"excerpt":{"rendered":"
En los art\u00edculos anteriores se present\u00f3 la estructura general de un documento HTML y se profundiz\u00f3 en el prop\u00f3sito del elemento <head>. El elemento <body> representa el contenido del documento: aquello que el usuario percibe como la p\u00e1gina y con lo que interact\u00faa, incluyendo texto, navegaci\u00f3n, im\u00e1genes, formularios y componentes de aplicaci\u00f3n web. El <body> … <\/p>\n
Continuar leyendo \u00abEl body de una p\u00e1gina HTML\u00bb<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,542],"tags":[84,333,94],"class_list":["post-1344","post","type-post","status-publish","format-standard","hentry","category-desarrollo","category-html-2","tag-curso","tag-html","tag-web"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/1344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1344"}],"version-history":[{"count":0,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/1344\/revisions"}],"wp:attachment":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}