HTML
Categorías de contenido y anidamiento
Reglas de contenido y anidamiento en HTML: flow, phrasing, sectioning, heading, interactive, embedded, transparent y form-associated content.
- Última actualización
- Actualizada
- Nivel
- Aplicación
HTML
Reglas de contenido y anidamiento en HTML: flow, phrasing, sectioning, heading, interactive, embedded, transparent y form-associated content.
Un elemento puede pertenecer a varias.
La mayoría del contenido dentro de body es flow content:
<div>
<p>Texto</p>
<section>...</section>
<form>...</form>
</div>Eso no significa que cualquier anidamiento sea válido; cada elemento añade restricciones.
Es el contenido típico de un párrafo:
<p>
Conoce <strong>nuestros proyectos</strong>
en <a href="/portfolio">el portfolio</a>.
</p>section no es phrasing:
<p>
Introducción
<section>...</section>
</p>El parser cerrará el p antes.
h1 h2 h3 h4 h5 h6 hgroupLos niveles comunican jerarquía, no tamaño visual.
article aside nav sectionCrean secciones semánticas. header y footer no son sectioning content por sí mismos; describen el encabezado o pie de su sección ancestral.
No dependas de un outline automático para reiniciar headings. Usa niveles coherentes.
Incluye enlaces con href, botones, inputs, select, textarea, details y medios con controls.
No anides controles:
<a href="/product">
<button>Comprar</button>
</a>Crea objetivos y comportamientos conflictivos.
img video audio iframe embed object picture canvas svg mathIntegra recursos o lenguajes externos.
Un contenedor semántico normalmente debe contener algo que el usuario pueda percibir o utilizar.
<section></section>Una sección vacía rara vez aporta.
Algunos elementos permiten contenido según el contexto del padre.
<a href="/portfolio">
<article>
<h2>DomiSys</h2>
<p>Ver proyecto</p>
</article>
</a>El contenido de a debe ser válido donde aparece y no contener otros descendientes interactivos.
Transparent no significa “sin restricciones”.
Controles como input, button, select, textarea, fieldset y output pueden asociarse con formularios.
Las subcategorías listed, labelable, submittable y resettable determinan su participación en labels, form data y reset.
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>ul y ol esperan li. Un párrafo directo no representa un item.
<dl>
<dt>HTML</dt>
<dd>Lenguaje de marcado para documentos web.</dd>
</dl>Modela grupos de términos y descripciones, no pares visuales arbitrarios.
<figure>
<img src="architecture.svg" alt="Diagrama de componentes">
<figcaption>Arquitectura general del sistema.</figcaption>
</figure>figcaption debe aparecer como primer o último hijo del figure.
section { display: inline; }No vuelve válido un section dentro de p. CSS cambia presentación, no semántica ni contenido permitido.
<div role="button">Guardar</div>El role no convierte el elemento en un button HTML ni le añade todos sus comportamientos.
<nav aria-label="Principal">
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/portfolio">Proyectos</a></li>
<li><a href="/services">Servicios</a></li>
</ul>
</nav>Cada capa cumple su contrato.
¿Por qué un section no se vuelve válido dentro de p aunque CSS lo haga inline?
Porque el modelo de contenido pertenece a HTML y section no es phrasing content. CSS solo cambia presentación.
Atributos globales reúne capacidades compartidas por los elementos.