¿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-topymargin-bottompor defecto (≈1 em), que se pueden sobrescribir con CSS o con utilidades de Bootstrap.
Comparativa rápida: <p> vs. <div> vs. <br>
| Característica | Descripción |
|---|---|
| Semántica | <p> indica un bloque de texto; <div> es neutro; <br> solo salto de línea. |
| Accesibilidad | Los lectores de pantalla anuncian <p> como "párrafo"; <div> no tiene anuncio; <br> se interpreta como pausa breve. |
| SEO | El contenido dentro de <p> recibe peso semántico; <div> no aporta significado; <br> no afecta. |
| Estilo por defecto | Margen vertical automático; <div> sin margen; <br> sin margen. |
| Uso recomendado | Texto estructurado; <div> para contenedores genéricos; <br> para saltos de línea dentro de un párrafo. |
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-0elimina 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-centerotext-lg-startpara controlar la alineación en diferentes breakpoints.
Solución de problemas comunes
- Los márgenes aparecen demasiado grandes
- Utiliza
mb-0(Bootstrap) omargin-bottom:0;en CSS para anular el margen. - El texto no se muestra como bloque
- Asegúrate de que no haya estilos
display:inlineaplicados al<p>. Restablece condisplay:block;. - Problemas de accesibilidad en lectores de pantalla
- Verifica que el atributo
langsea correcto y que no haya etiquetas HTML mal cerradas dentro del párrafo.