Fecha: 2026-04-19 - San Expedito   Calendario 2026  | Info

Blog Blog

Guía rápida sobre el elemento br en HTML

Autor: Andrés Cruz en Udemy   |   Comentarios: 0

El elemento br sirve para dar un salto de línea, empleando simplemente la etiqueta:

<br>

También es equivalente emplear la etiqueta de cierre.

</br>
    

O la siguiente:

<br />
    

La etiqueta que nunca cierra: br

HTML es un lenguaje de marcado bastante abierto que como te habrás dado cuenta si desarrollar o crear páginas webs, puedes colocar errores y aun así la página se ve o correctamente o con algunos tropiezos; es decir, podemos abrir una etiqueta <p> y cerrar con un <h2>:

<p>Texto<h2>
    

O inclusive no cerrar algunas etiquetas:

<h3>
        Texto
    

Aunque cabe señalar que los ejemplos anteriores son errores y por lo tanto tenemos que evitarlos; por otra parte, también tenemos etiquetas que se colocan y listo, no tienen etiqueta de cerrado; por ejemplo las de <img>, <hr> e inclusive la misma <br> que es nuestro caso de interés para esta entrada

Ahora si quieres maquetar con XHTML que es un lenguaje de marcado basado en el HTML pero menos abierto o con una sintaxis más cerrada, entonces es obligatorio que todas las etiquetas cierren:

<br />
    

En este caso este formato.

</br>
    

O este:

<br>
    

No serían válidos en XHTML; aunque es una buena práctica cerrarlas para que sea compatible con XHTML y estar más organizado pero la decisión es tuya.

DIferencias entre el uso de la etiqueta BR en HTML y XHTML

Como bien debes saber, XHTML es la formas más organizada y estricta de HTML, cosas que podemos hacer en HTML y son soportadas por nuestros navegadores no las podemos hacer en XHTML y la etiqueta br da un buen ejemplo de lo que podemos hacer y no en XHTML; en HTML la etiqueta <br> no tiene que cerrar, como mostramos anteriormente; mientras que en XHTML la etiqueta <br /> si tiene que cerrar, como la mostrada anteriormente.

Ejemplo de uso de la etiqueta br: Saltos de línea en HTML

Como indicamos, la etiqueta BR es especialmente útil para romper entre líneas; en si es su única utilidad en este lenguaje de marcado:

<p>
    Para romper líneas
    <br>
    en un texto,<br>usa el elemento br
    </p>
    

Para romper líneas
en un texto,
usa el elemento br

Otra forma de saltos de línea: Párrafos en HTML

También podemos incluir los saltos de línea con nuestros párrafos con la etiqueta correspondiente:

<p>
    Para romper líneas
    <p></p>
    en un texto,<br>usa el elemento br
    </p>
    

Para romper líneas

en un texto,
usa el elemento br

Puedes tener más información sobre el uso de la etiqueta p en una entrada anterior.

Para indicar al navegador que queremos poner un salto de línea como un párrafo; con esto no tendremos que preocuparnos si el espacio es mayor al empleado en la redacción con nuestros párrafos ya que es equivalente al ser la misma etiqueta

Eventos, CSS y atributos de la etiqueta BR

La etiqueta br no tiene ningún atributo o evento en particular, los globales para la API de HTML si es hablando de CSS, tampoco toma estilos en particular salvo los display:none para ocultar el elemento y por lo tanto dejaría de surgir efecto el salto de línea.

La w3schools recomienda utilizar el elemento <br> para salto de lineas, mas no para separar párrafos; para esto último es mejor emplear otras técnicas como la propiedad margin en CSS.


Su Comentario:

Deje aquí su comentario acerca de este artículo...


Otros artículos del blog

¿Qué precio tiene hacer el diseño de tu página Web?
¿Cómo crear una API REST con CodeIgniter?
¿Cómo redimensionar imágenes con CodeIgniter?
¿Qué documentos necesitas para solicitar la ayuda como emigrante retornado?
¿Qué es y para qué sirve un archivo robots.txt?
Adapta tu sitio web a la nueva normativa sobre cookies
Atributo download HTML5 para descargar archivos del servidor mediante enlaces
Botón redondeado con CSS
Bucle para recibir todas las variables por POST en PHP
Carga o upload de archivos con CodeIgniter
Columnas múltiples con CSS3
Como evitar la inyección SQL en PHP
Cómo optimizar la cabecera de una página web para SEO: guía avanzada y completa
Cómo optimizar la etiqueta de título para atraer más tráfico de Google
Como puedo abrir puertos en mi router para acceder remotamente a mi ordenador personal
Contador de caracteres con JQuery
Copias de seguridad avanzadas para bases de datos MySQL
Creando fácilmente imágenes de relleno para tus prototipos
Crear un sticky desplegable en la web
Detectar el sistema operativo, navegador y versión del cliente
Diseño y desarrollo web a la medida
Ejecutar script automáticamente con Cron en Linux
El elemento meter HTML5
El filtro Blur (desenfoque) en CSS y alguno de sus posibles usos
El nuevo elemento <picture> de HTML5 para crear imágenes responsive
Elementos fundamentales para trabajar con Codeingniter
Envío de correos o emails con CodeIgniter, guía rápida
Función para extraer la extensión de un archivo con PHP
Guía rápida sobre el elemento br en HTML
Guía rápida sobre el elemento p en HTML
Guía rápida sobre los bordes en CSS
La etiqueta meta viewport en html5
La relación entre el contenido extenso y el convencimiento del usuario
Las fuentes de Google Font para nuestra web y efectos sobre nuestras fuentes
Lo bueno y lo malo del SEO
Los helpers en CodeIgniter para definir nuestras funciones
Mensaje aceptar cookies para cumplir con la Ley General de Protección de Datos (LGPD)
Meta tags de HTML
Múltiples bordes en un contenedor con CSS
Script para automatizar backups de MySQL en servidores Windows
Streams en PHP
Trucos y ejemplos de configuración del archivo htaccess de Apache
Uso de las páginas de error 404 como soporte estratégico de contenidos