{"id":1349,"date":"2026-03-06T07:00:00","date_gmt":"2026-03-06T06:00:00","guid":{"rendered":"https:\/\/programaraciegas.net\/?p=1349"},"modified":"2026-02-20T08:23:04","modified_gmt":"2026-02-20T07:23:04","slug":"estructurar-el-contenido-textual-en-un-documento-html","status":"publish","type":"post","link":"https:\/\/programaraciegas.net\/?p=1349","title":{"rendered":"Estructurar el contenido textual en un documento HTML"},"content":{"rendered":"

Cuando una p\u00e1gina HTML tiene una organizaci\u00f3n \u00a0por zonas(landmarks, secciones y encabezados)<\/a>, con la definici\u00f3n del mapa general para navegar, es necesario profundizar m\u00e1s en la organizaci\u00f3n de los contenidos textuales buscando c\u00f3mo escribir HTML que se entienda bien tanto visualmente como con lector de pantalla, y que adem\u00e1s sea f\u00e1cil de mantener.<\/p>\n

Sem\u00e1ntica antes que estilo<\/h2>\n

Una idea que conviene repetir siempre es que en HTML no se dibuja la p\u00e1gina, se describe qu\u00e9 es cada cosa.<\/p>\n

El CSS se encarga de c\u00f3mo se ve.<\/p>\n

El objetivo con HTML es que el contenido tenga una estructura que se pueda comprender incluso si no hay estilos visuales, se navega por teclado o con lector de pantallas o se est\u00e1 accediendo desde un dispositivo m\u00f3vil o de escritorio.\u00a0<\/p>\n

P\u00e1rrafos<\/h2>\n

El p\u00e1rrafo es la unidad m\u00ednima de texto con sentido propio. Si se est\u00e1 escribiendo frases que forman una idea, normalmente eso es un <p>.<\/p>\n

Ejemplo<\/h3>\n
<p>HTML es un lenguaje de marcado. Su objetivo es describir el contenido de una p\u00e1gina.<\/p>
<p>Cuando usamos elementos sem\u00e1nticos, hacemos que la web sea m\u00e1s navegable y accesible.<\/p><\/pre>\n
Errores habituales<\/h3>\n
Muchos desarrolladores suelen usar <br> para construir p\u00e1rrafos pero <br> se debe utilizar para un salto de l\u00ednea dentro de un mismo bloque, por ejemplo direcciones postales o poes\u00eda, no para separar ideas completas.<\/p>\n
Un mal ejemplo puede ser:<\/p>\n
HTML es un lenguaje de marcado.<br>
Su objetivo es describir el contenido de una p\u00e1gina.<br><br>
Cuando usamos elementos sem\u00e1nticos...<\/pre>\n
Otro error habitual es meter p\u00e1rrafos dentro de cualquier cosa porque funciona en el navegador. Por ejemplo, meter texto plano directamente dentro de un contenedor sin estructura. Se puede, pero se pierde sem\u00e1ntica y consistencia.<\/p>\n
Listas<\/h2>\n
Una lista no es solo un p\u00e1rrafo con vi\u00f1etas bonitas: es una relaci\u00f3n estructural entre elementos sem\u00e1nticamente relacionados de forma consecutiva.<\/p>\n
Listas no ordenadas: <ul><\/h3>\n
Se deben utilizar para elementos sin orden relevante.<\/p>\n
<ul>
<li>Texto alternativo<\/li>
<li>Encabezados jer\u00e1rquicos<\/li>
<li>Landmarks<\/li>
<\/ul><\/pre>\n
Listas ordenadas: <ol><\/h3>\n
Se deben utilizar cuando el orden importa (pasos, ranking, instrucciones).<\/p>\n
<ol>
<li>Abre el archivo HTML.<\/li>
<li>Localiza el contenido principal.<\/li>
<li>Revisa la jerarqu\u00eda de encabezados.<\/li>
<\/ol><\/pre>\n
Listas de definici\u00f3n: <dl><\/h3>\n
Se deben utilizar para pares t\u00e9rmino\u2013definici\u00f3n. Son muy \u00fatiles en glosarios o fichas.<\/p>\n
<dl>
<dt>Landmark<\/dt>
<dd>Regi\u00f3n navegable de una p\u00e1gina (main, nav, footer...).<\/dd>

<dt>Sem\u00e1ntica<\/dt>
<dd>El significado estructural de un elemento HTML.<\/dd>
<\/dl><\/pre>\n
Errores habituales<\/h3>\n
Alguno de los errores m\u00e1s comunes a la hora de agrupar contenidos en lista es, por ejemplo, simular listas con <p>\u2022 …<\/p>: visualmente se parece, pero para la accesibilidad no es una lista.
Otros de los errores es usar listas para maquetar (por ejemplo, columnas) cuando en realidad no se est\u00e1 representando un conjunto de elementos relacionados.<\/p>\n
Citas<\/h2>\n
Las citas tambi\u00e9n son marcas sem\u00e1nticas que ayudan a estructurar mejor el contenido textual. Existen los siguientes marcados de cita:<\/p>\n
Cita en l\u00ednea: <q> utilizada para una cita corta dentro de una frase.<\/p>\n
<p>Como dijo alguien una vez: <q>la accesibilidad es usabilidad para todos<\/q>.<\/p><\/pre>\n
Cita en bloque: <blockquote> utilizada para un fragmento m\u00e1s largo que merece entidad propia o que ocupa m\u00e1s de un p\u00e1rrafo.<\/p>\n
<blockquote>
<p>La accesibilidad no es una caracter\u00edstica extra. Es parte del dise\u00f1o.<\/p>
<\/blockquote><\/pre>\n
Se puede a\u00f1adir la fuente de forma clara usando <cite> (no es el enlace, es la referencia bibliogr\u00e1fica):<\/p>\n
<blockquote>
<p>La accesibilidad no es una caracter\u00edstica extra. Es parte del dise\u00f1o.<\/p>
<cite>Manual interno del equipo<\/cite>
<\/blockquote><\/pre>\n
Errores habituales<\/h3>\n
Se suele usar <blockquote> solo para poner texto sangrado. Eso es CSS.
\u2022 Poner comillas visuales y olvidarte de la estructura: el lector de pantalla no sabe que es una cita.<\/p>\n
\u2e3b<\/p>\n
C\u00f3digo: <code>, <pre>, <kbd>, <samp> (s\u00ed, hay m\u00e1s de uno)<\/p>\n
El contenido t\u00e9cnico es especialmente sensible a accesibilidad y comprensi\u00f3n.<\/p>\n
C\u00f3digo en l\u00ednea: <code><\/p>\n
Para peque\u00f1os fragmentos dentro de un p\u00e1rrafo.<\/p>\n
<p>El elemento <code>&lt;main&gt;<\/code> debe aparecer una sola vez por p\u00e1gina.<\/p><\/p>\n
Bloques de c\u00f3digo: <pre><code><\/p>\n
Cuando necesitas respetar espacios y saltos de l\u00ednea.<\/p>\n
<pre><code>function hello() {
console.log(Hola);
}<\/code><\/pre><\/p>\n
Teclas y atajos: <kbd><\/p>\n
Para representar lo que el usuario pulsa.<\/p>\n
<p>Pulsa <kbd>Control<\/kbd> + <kbd>S<\/kbd> para guardar.<\/p><\/p>\n
Salida del sistema: <samp><\/p>\n
Para texto que representa la salida de un programa, terminal, etc.<\/p>\n
<p>El sistema mostrar\u00e1: <samp>Error: file not found<\/samp><\/p><\/p>\n
Buenas pr\u00e1cticas muy recomendables:
\u2022 Escapa caracteres en c\u00f3digo (&lt;, &gt;, &amp;) si est\u00e1s escribiendo HTML dentro del bloque.
\u2022 Si publicas tutoriales, intenta que el texto explique el c\u00f3digo antes y despu\u00e9s: el bloque de c\u00f3digo sin contexto es una pared.<\/p>\n
\u2e3b<\/p>\n
Tablas: solo para datos, y con estructura real<\/p>\n
La tabla es el elemento que m\u00e1s se malusa.<\/p>\n
Regla de oro:<\/p>\n
Una tabla es para datos tabulares, no para maquetar.<\/p>\n
\u00bfCu\u00e1ndo s\u00ed usar tabla?<\/p>\n
Cuando tienes datos que se entienden por filas\/columnas: horarios, comparativas, listados con atributos, etc.<\/p>\n
Ejemplo b\u00e1sico con cabecera:<\/p>\n
<table>
<caption>Comparativa de planes<\/caption>
<thead>
<tr>
<th scope=col>Plan<\/th>
<th scope=col>Precio<\/th>
<th scope=col>Soporte<\/th>
<\/tr>
<\/thead>
<tbody>
<tr>
<td>B\u00e1sico<\/td>
<td>0 \u20ac<\/td>
<td>No<\/td>
<\/tr>
<tr>
<td>Pro<\/td>
<td>10 \u20ac<\/td>
<td>S\u00ed<\/td>
<\/tr>
<\/tbody>
<\/table><\/p>\n
Claves de accesibilidad:
\u2022 <caption>: describe la tabla. Much\u00edsima gente lo olvida.
\u2022 <th> con scope=col o scope=row: define encabezados de columna o fila.
\u2022 Usa <thead>, <tbody> cuando tenga sentido: ayuda a organizar.<\/p>\n
Errores t\u00edpicos que rompen la experiencia:
\u2022 Tablas sin encabezados: el lector de pantalla leer\u00e1 celdas sin contexto.
\u2022 Tablas para alinear cosas (como un grid de dise\u00f1o): hoy eso es CSS (flex, grid).<\/p>\n
\u2e3b<\/p>\n
\u00bfCu\u00e1ndo NO usar un <div>?<\/p>\n
El <div> es un contenedor gen\u00e9rico sin sem\u00e1ntica. No es malo, pero es la \u00faltima opci\u00f3n, no la primera.<\/p>\n
Usa <div> cuando:
\u2022 necesitas agrupar elementos para aplicar estilos o layout,
\u2022 y no hay un elemento sem\u00e1ntico que describa esa agrupaci\u00f3n.<\/p>\n
No uses <div> cuando exista un elemento que s\u00ed describe lo que es:
\u2022 \u00bfEs un p\u00e1rrafo? \u2192 <p>
\u2022 \u00bfEs una lista? \u2192 <ul>\/<ol>\/<dl>
\u2022 \u00bfEs una secci\u00f3n tem\u00e1tica? \u2192 <section>
\u2022 \u00bfEs una pieza de contenido autocontenida? \u2192 <article>
\u2022 \u00bfEs navegaci\u00f3n? \u2192 <nav>
\u2022 \u00bfEs el contenido principal? \u2192 <main>
\u2022 \u00bfEs un encabezado de p\u00e1gina o secci\u00f3n? \u2192 <header>
\u2022 \u00bfEs un pie? \u2192 <footer>
\u2022 \u00bfEs complementario? \u2192 <aside>
\u2022 \u00bfEs un bot\u00f3n? \u2192 <button> (no un <div> clicable)
\u2022 \u00bfEs un enlace? \u2192 <a><\/p>\n
Ejemplo cl\u00e1sico (y problem\u00e1tico):<\/p>\n
<div onclick=guardar()>Guardar<\/div><\/p>\n
Eso visualmente puede parecer un bot\u00f3n, pero:
\u2022 no es accesible por teclado como un bot\u00f3n real,
\u2022 no tiene rol sem\u00e1ntico correcto,
\u2022 y no hereda comportamientos est\u00e1ndar.<\/p>\n
Lo correcto:<\/p>\n
<button type=button onclick=guardar()>Guardar<\/button><\/p>\n
\u2e3b<\/p>\n
Un mini-checklist para tus art\u00edculos y p\u00e1ginas<\/p>\n
Cuando est\u00e9s escribiendo contenido textual, prueba este repaso r\u00e1pido:
1. \u00bfCada idea completa est\u00e1 en un <p> (o elemento equivalente)?
2. \u00bfSi hay un conjunto de items, est\u00e1 en una lista real?
3. \u00bfSi cito a alguien, uso <blockquote> o <q> seg\u00fan el caso?
4. \u00bfEl c\u00f3digo est\u00e1 marcado como c\u00f3digo (<code>, <pre>, <kbd>)?
5. \u00bfLas tablas tienen caption y encabezados (th, scope)?
6. \u00bfEstoy usando <div> solo cuando no hay alternativa sem\u00e1ntica?<\/p>\n
\u2e3b<\/p>\n
Si quieres, el siguiente art\u00edculo encaja muy bien si lo enfocamos en elementos de texto de detalle que suelen aparecer en contenidos reales: <strong>, <em>, <mark>, <abbr>, <time>, enlaces bien escritos, y c\u00f3mo evitar el haz clic aqu\u00ed para que la navegaci\u00f3n por enlaces tenga sentido.<\/p>\n","protected":false},"excerpt":{"rendered":"
Cuando una p\u00e1gina HTML tiene una organizaci\u00f3n \u00a0por zonas(landmarks, secciones y encabezados), con la definici\u00f3n del mapa general para navegar, es necesario profundizar m\u00e1s en la organizaci\u00f3n de los contenidos textuales buscando c\u00f3mo escribir HTML que se entienda bien tanto visualmente como con lector de pantalla, y que adem\u00e1s sea f\u00e1cil de mantener. Sem\u00e1ntica antes … <\/p>\n
Continuar leyendo \u00abEstructurar el contenido textual en un documento 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-1349","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\/1349","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=1349"}],"version-history":[{"count":0,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/1349\/revisions"}],"wp:attachment":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}