¿Qué es un párrafo en HTML?

En HTML, la etiqueta <p> representa un bloque de texto que constituye un párrafo lógico. Es una etiqueta semántica que indica al navegador y a los agentes de usuario (buscadores, lectores de pantalla, etc.) que el contenido dentro de ella es una unidad de texto coherente.

Su uso correcto mejora la accesibilidad, el SEO y la mantenibilidad del código.

Características principales de <p>

• Es un elemento de bloque: ocupa todo el ancho disponible y crea un salto de línea antes y después.
• Acepta texto en línea (<span>, <strong>, <em>, etc.) pero no puede contener elementos de bloque como <div> o <h1>.
• Hereda atributos globales (class, id, style, data-*, etc.) y atributos de accesibilidad (lang, dir).
• Los navegadores aplican un margin-top y margin-bottom por defecto (≈1 em), que se pueden sobrescribir con CSS o con utilidades de Bootstrap.

Comparativa rápida: <p> vs. <div> vs. <br>

Ejemplos prácticos

A continuación se presentan varios casos de uso comunes, con código listo para copiar.

Ejemplo 1: Párrafo básico

<p>Este es un párrafo simple que muestra cómo se renderiza el texto con los márgenes por defecto del navegador.</p>

Ejemplo 2: Párrafo con formato en línea

<p>Puedes usar <strong>negrita</strong>, <em>cursiva</em> o <code>texto monoespaciado</code> dentro de un párrafo.</p>

Ejemplo 3: Párrafo con clase Bootstrap para espaciado

<p class="lead text-muted mb-4">Este párrafo utiliza la clase lead para un tamaño de fuente mayor y text-muted para un color gris claro.</p>

Ejemplo 4: Párrafo dentro de una tarjeta (Bootstrap Card)

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Título de la tarjeta</h5>
    <p class="card-text">Este es el texto del cuerpo de la tarjeta. Utiliza <p> para mantener la semántica y el espaciado propio.</p>
    <a href="#" class="btn btn-primary">Acción</a>
  </div>
</div>

Ejemplo 5: Párrafo con atributo lang para idioma diferente

<p lang="es">Este párrafo está en español.</p>
<p lang="en">This paragraph is in English.</p>

Buenas prácticas y consejos de optimización

• Usar siempre <p> para bloques de texto. Evita sustituirlo por <div> o <br> a menos que sea estrictamente necesario.
• Evita anidar bloques. No coloques <div>, <section> u otros elementos de bloque dentro de un <p>. Si necesitas dividir el contenido, cierra el párrafo y abre uno nuevo.
• Controla el margen con CSS o utilidades Bootstrap. Por ejemplo, mb-0 elimina el margen inferior cuando el párrafo está dentro de una lista.
• Incluye atributos de idioma (lang) cuando el texto cambia de idioma; mejora la accesibilidad y la indexación.
• Escapa contenido dinámico. Si el texto proviene de usuarios, sanitízalo para evitar XSS, ya que <p> permite HTML en línea.
• Responsive design. Los párrafos se adaptan automáticamente al ancho del contenedor; sin embargo, puedes usar clases como text-center o text-lg-start para controlar la alineación en diferentes breakpoints.

Solución de problemas comunes

Los márgenes aparecen demasiado grandes

Utiliza mb-0 (Bootstrap) o margin-bottom:0; en CSS para anular el margen.

El texto no se muestra como bloque

Asegúrate de que no haya estilos display:inline aplicados al <p>. Restablece con display:block;.

Problemas de accesibilidad en lectores de pantalla

Verifica que el atributo lang sea correcto y que no haya etiquetas HTML mal cerradas dentro del párrafo.