HTML
Párrafos y contenido agrupado
Uso correcto de párrafos y elementos de agrupación en HTML, incluyendo div, pre, blockquote, figure, listas y separación temática del contenido.
- Última actualización
- Actualizada
- Nivel
- Fundamentos
HTML
Uso correcto de párrafos y elementos de agrupación en HTML, incluyendo div, pre, blockquote, figure, listas y separación temática del contenido.
<p>
HTML describe la estructura y el significado del contenido.
</p>Representa un párrafo. No puede contener flow content como div, section, listas o headings.
<p>
Introducción
<ul>...</ul>
</p>El parser cerrará el párrafo antes de la lista.
No uses p solo porque necesitas margen:
<p><img src="hero.webp" alt="..."></p>Puede ser válido según el contenido, pero si la intención es layout o una figura, elige el elemento correspondiente.
<div class="project-grid">...</div>Agrupa flow content sin añadir significado propio.
Es apropiado para:
<pre><code>npm install
npm run dev</code></pre>Representa texto preformateado donde espacios y saltos forman parte del contenido.
No lo uses para evitar CSS en texto normal. El contenido puede desbordarse en pantallas pequeñas; necesita una estrategia visual.
<blockquote cite="https://example.com/source">
<p>La web es para todos.</p>
</blockquote>Representa una cita extensa tomada de otra fuente.
El atributo cite contiene una URL de origen, pero normalmente no se muestra al usuario. Incluye también una atribución visible:
<figure>
<blockquote>
<p>La web es para todos.</p>
</blockquote>
<figcaption>— Fuente o autor</figcaption>
</figure><p>Primera parte del relato.</p>
<hr>
<p>Tiempo después...</p>Representa un cambio temático a nivel de párrafo.
No es necesario cuando el documento ya cambia claramente de section con headings.
Otros elementos como ul, ol, dl, figure y fieldset también agrupan contenido con contratos específicos. Prefiérelos cuando la relación existe.
<p>
Primera línea<br>
Segunda línea
</p>br es apropiado cuando el salto forma parte del contenido, como una dirección o poema.
No insertes múltiples br para crear separación vertical.
<p>Primer párrafo.</p>
<p>Segundo párrafo.</p>Cada idea es su propio párrafo. CSS controla el espacio.
No:
<p>Primer párrafo.<br><br>Segundo párrafo.</p>Dentro de pre, las etiquetas siguen interpretándose. Para mostrar HTML:
<pre><code><main>Contenido</main></code></pre>No añadas un div por cada elemento si no se necesita para semántica, estilos o scripts.
<div>
<h2>Título</h2>
<p>Texto</p>
</div>Puede simplificarse si el contexto ya agrupa ambos.
<section aria-labelledby="origin-title">
<h2 id="origin-title">Origen del proyecto</h2>
<p>
El negocio administraba inventario en Excel y pedidos por WhatsApp.
</p>
<p>
DomiSys nació para centralizar esa operación en un solo sistema.
</p>
</section>¿Por qué dos párrafos no deberían separarse con <br><br>?
Porque son dos unidades de contenido distintas y deben representarse con dos elementos p; el espacio entre ellas pertenece a CSS.
Semántica de texto en línea distingue importancia, énfasis, voz, anotaciones y cambios visuales.