Tutorial HTML: Párrafo (p)

Elemento párrafo (p) y su uso correcto

El elemento <p> es uno de los bloques fundamentales para estructurar el contenido textual en HTML. Este elemento está diseñado específicamente para contener párrafos de texto, permitiendo organizar la información de manera clara y legible para los usuarios.

Un párrafo en HTML se define mediante la etiqueta de apertura <p> y la etiqueta de cierre </p>. El navegador interpreta automáticamente este elemento como un bloque independiente, añadiendo espaciado vertical antes y después del contenido. Esta característica ayuda a separar visualmente los párrafos entre sí, mejorando la legibilidad del documento.

Sintaxis básica

La estructura básica de un párrafo en HTML es muy sencilla:

<p>Este es un ejemplo de un párrafo en HTML. Todo el texto contenido entre las etiquetas de apertura y cierre forma parte del mismo párrafo.</p>

Comportamiento del elemento párrafo

El elemento <p> tiene varias características importantes que debemos conocer:

• Elemento de bloque: Ocupa todo el ancho disponible de su contenedor y comienza en una nueva línea.
• Espaciado automático: Los navegadores aplican márgenes verticales por defecto (generalmente entre 16px y 24px).
• Flujo de texto: El texto dentro de un párrafo fluye automáticamente, ajustándose al ancho del contenedor.

Uso correcto del elemento párrafo

Para utilizar correctamente el elemento <p>, es importante seguir estas prácticas recomendadas:

1. Usar un párrafo para cada idea o concepto:

<p>HTML es un lenguaje de marcado utilizado para crear páginas web.</p>
<p>CSS es un lenguaje de estilos que permite dar formato a los documentos HTML.</p>

2. Evitar párrafos vacíos para crear espaciado:

<!-- Incorrecto -->
<p></p>

<!-- Correcto (usando CSS) -->
<style>
  .espaciado {
    margin-bottom: 20px;
  }
</style>
<p class="espaciado">Este párrafo tiene espacio adicional debajo.</p>

3. No anidar elementos de bloque dentro de párrafos:

<!-- Incorrecto -->
<p>
  Este es un párrafo que contiene una lista:
  <ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
  </ul>
</p>

<!-- Correcto -->
<p>Este es un párrafo que precede a una lista:</p>
<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
</ul>

4. Evitar usar múltiples etiquetas <br> para separar párrafos:

<!-- Incorrecto -->
<p>Primer párrafo.<br><br>Segundo párrafo.</p>

<!-- Correcto -->
<p>Primer párrafo.</p>
<p>Segundo párrafo.</p>

Aplicaciones prácticas

El elemento párrafo es versátil y puede utilizarse en diferentes contextos:

• Artículos y blogs:

<article>
  <h2>Introducción a HTML</h2>
  <p>HTML (HyperText Markup Language) es el componente más básico de la web. Define el significado y la estructura del contenido web.</p>
  <p>Un documento HTML se compone de una serie de elementos que indican al navegador cómo mostrar el contenido.</p>
</article>

• Descripciones de productos:

<div class="producto">
  <h3>Auriculares inalámbricos</h3>
  <p>Disfruta de un sonido de alta calidad con estos auriculares inalámbricos con cancelación de ruido.</p>
  <p>Batería de larga duración y diseño ergonómico para máxima comodidad.</p>
</div>

• Formularios con instrucciones:

<form>
  <p>Complete todos los campos marcados con asterisco (*) antes de enviar el formulario.</p>
  <label for="nombre">Nombre completo*:</label>
  <input type="text" id="nombre" required>
  <!-- Resto del formulario -->
</form>

Estilización de párrafos

Aunque el elemento <p> tiene un estilo predeterminado en los navegadores, podemos personalizarlo mediante CSS para adaptarlo a nuestras necesidades de diseño:

<style>
  p {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin-bottom: 1.2em;
    text-align: justify;
  }
  
  .destacado {
    font-weight: bold;
    color: #3366cc;
  }
</style>

<p>Este es un párrafo normal con estilo personalizado.</p>
<p class="destacado">Este es un párrafo destacado con estilo adicional.</p>

Accesibilidad y SEO

El uso correcto del elemento <p> también contribuye a la accesibilidad y al SEO de tu página:

• Los lectores de pantalla identifican y anuncian los párrafos correctamente.
• Los motores de búsqueda comprenden mejor la estructura de tu contenido.
• El contenido bien estructurado mejora la experiencia de lectura para todos los usuarios.

Consideraciones para dispositivos móviles

En diseños responsivos, es importante considerar cómo se mostrarán los párrafos en diferentes tamaños de pantalla:

<style>
  p {
    font-size: 16px; /* Tamaño base para todos los dispositivos */
  }
  
  @media (max-width: 768px) {
    p {
      font-size: 14px; /* Tamaño reducido para dispositivos móviles */
      line-height: 1.4; /* Interlineado ajustado */
    }
  }
</style>

El elemento <p> es una herramienta esencial para estructurar el contenido textual en HTML. Utilizándolo correctamente, podemos crear documentos web bien organizados, accesibles y fáciles de leer para todos los usuarios.

Elemento span para formatear porciones de texto

El elemento <span> es una herramienta versátil que permite aplicar estilos o manipular pequeñas porciones de texto dentro de un elemento contenedor sin alterar el flujo del documento. A diferencia del elemento <p> que vimos anteriormente, <span> es un elemento inline (en línea), lo que significa que no crea saltos de línea antes ni después de su contenido.

Características principales del elemento span

El elemento <span> tiene varias características que lo hacen especialmente útil:

• Elemento inline: Se integra dentro del flujo de texto sin crear nuevos bloques.
• Sin estilo predeterminado: Por sí solo no aplica ningún formato visual.
• Contenedor genérico: Sirve como "envoltorio" para aplicar estilos o manipular fragmentos específicos.
• Altamente flexible: Puede contener texto, imágenes pequeñas u otros elementos inline.

La sintaxis básica del elemento <span> es muy sencilla:

<p>Este texto contiene un <span>fragmento destacado</span> dentro del párrafo.</p>

Sin CSS aplicado, el texto dentro del <span> se mostrará exactamente igual que el resto del contenido. Su verdadero potencial se revela cuando se combina con CSS.

Aplicando estilos con span

La principal utilidad del elemento <span> es aplicar estilos a porciones específicas de texto mediante CSS:

<style>
  .destacado {
    color: #e74c3c;
    font-weight: bold;
  }
  
  .codigo {
    font-family: monospace;
    background-color: #f1f1f1;
    padding: 2px 4px;
    border-radius: 3px;
  }
</style>

<p>HTML nos permite <span class="destacado">resaltar información importante</span> dentro de un párrafo o usar <span class="codigo">formato de código</span> para instrucciones técnicas.</p>

Este ejemplo muestra cómo podemos aplicar diferentes estilos a fragmentos específicos de texto sin interrumpir el flujo del párrafo.

Casos de uso comunes

El elemento <span> resulta especialmente útil en varios escenarios:

• Resaltar palabras clave:

<p>Aprende a usar <span class="keyword">HTML</span>, <span class="keyword">CSS</span> y <span class="keyword">JavaScript</span> para crear sitios web modernos.</p>

• Aplicar efectos tipográficos:

<h2>Nuestro <span class="thin">nuevo</span> <span class="bold">producto</span></h2>

• Crear interfaces interactivas (combinado con JavaScript):

<p>Haz clic <span class="clickable" onclick="mostrarInfo()">aquí</span> para más información.</p>

• Aplicar transformaciones de texto:

<p>Nuestra empresa fue fundada en <span style="text-transform: uppercase;">madrid</span> en 2010.</p>

• Cambiar el tamaño de partes específicas del texto:

<p>Oferta especial: <span style="font-size: 1.2em;">¡50% de descuento!</span></p>

Diferencias entre span y otros elementos de texto

Es importante entender cuándo usar <span> y cuándo es más apropiado utilizar otros elementos:

• <span> vs <div>: Mientras que <span> es un elemento inline, <div> es un elemento de bloque que crea nuevas líneas. Usa <span> para porciones de texto y <div> para secciones completas.

• <span> vs elementos semánticos: Elementos como <em>, <strong> o <mark> tienen significado semántico específico. Usa <span> cuando necesites aplicar estilos sin implicar un significado semántico particular.

<!-- Con significado semántico -->
<p>Este punto es <strong>extremadamente importante</strong> para el examen.</p>

<!-- Solo para estilo visual sin significado semántico -->
<p>Este texto tiene <span style="color: blue;">color azul</span> por razones estéticas.</p>

Combinando span con atributos de datos

El elemento <span> también puede utilizarse con atributos de datos personalizados para almacenar información adicional que puede ser manipulada con JavaScript:

<p>
  Nuestro producto cuesta 
  <span class="precio" data-moneda="EUR" data-valor="29.99">29,99 €</span>
</p>

<script>
  // Acceder a los datos almacenados en el span
  const precioSpan = document.querySelector('.precio');
  const moneda = precioSpan.dataset.moneda;
  const valor = precioSpan.dataset.valor;
  
  console.log(`Precio: ${valor} ${moneda}`);
</script>

Consideraciones de accesibilidad

Al utilizar <span> para aplicar estilos visuales, debemos tener en cuenta la accesibilidad:

• Contraste de color: Asegúrate de que el texto dentro de un <span> con color personalizado mantenga suficiente contraste con el fondo.

<!-- Buen contraste -->
<p>Este texto incluye <span style="color: #d00; font-weight: bold;">advertencias importantes</span> que debes leer.</p>

<!-- Contraste insuficiente (evitar) -->
<p>Este texto incluye <span style="color: #faa;">advertencias difíciles de leer</span> por el bajo contraste.</p>

• No confiar solo en el color: No uses solo el color para transmitir información importante.

<!-- Mejor práctica -->
<p>Estado: <span class="estado-error"><i class="icon-error"></i> Error</span></p>

<!-- En lugar de solo color -->
<p>Estado: <span style="color: red;">Error</span></p>

Rendimiento y buenas prácticas

Aunque <span> es muy útil, su uso excesivo puede afectar la legibilidad del código y potencialmente el rendimiento:

• Evita el anidamiento excesivo de elementos <span>.
• Considera usar clases CSS en lugar de estilos inline para mantener la separación de contenido y presentación.
• No abuses de <span> para estructurar el documento; usa elementos semánticos cuando sea posible.

<!-- Mejor práctica -->
<style>
  .destacado { color: blue; font-weight: bold; }
</style>
<p>Este es un <span class="destacado">texto destacado</span> con buenas prácticas.</p>

<!-- Evitar -->
<p>Este es un <span style="color: blue; font-weight: bold;">texto destacado</span> con estilos inline.</p>

El elemento <span> es una herramienta fundamental para el formateo preciso de texto en HTML. Su flexibilidad lo convierte en un recurso valioso para diseñadores y desarrolladores web que necesitan un control detallado sobre la presentación del texto sin comprometer la estructura semántica del documento.

Elementos de formato: strong, em, mark, sub, sup

HTML ofrece varios elementos específicos para dar formato semántico a fragmentos de texto dentro de nuestro contenido. A diferencia del elemento <span> que vimos anteriormente (que no tiene significado semántico por sí mismo), los elementos <strong>, <em>, <mark>, <sub> y <sup> comunican un propósito específico además de aplicar un estilo visual.

Estos elementos de formato son inline (en línea), lo que significa que se pueden utilizar dentro de párrafos y otros elementos de texto sin interrumpir el flujo del documento.

Elemento strong

El elemento <strong> se utiliza para indicar que un texto tiene gran importancia, seriedad o urgencia. Los navegadores generalmente muestran este texto en negrita, pero su propósito principal es semántico, no estético.

<p>Es <strong>extremadamente importante</strong> seguir las instrucciones de seguridad.</p>

El uso adecuado de <strong> mejora la accesibilidad, ya que los lectores de pantalla pueden enfatizar este contenido mediante cambios en el tono o volumen de la voz.

Diferencia entre strong y b

Aunque visualmente similares, <strong> y <b> tienen propósitos diferentes:

• <strong> indica importancia semántica
• <b> simplemente aplica negrita sin añadir significado semántico

<!-- Uso correcto de strong (importancia semántica) -->
<p><strong>Advertencia:</strong> Este procedimiento no puede deshacerse.</p>

<!-- Uso correcto de b (estilo visual sin importancia especial) -->
<p>El concierto comienza a las <b>20:30</b> en el auditorio principal.</p>

Elemento em

El elemento <em> se utiliza para marcar texto que debe recibir énfasis. Los navegadores suelen mostrar este texto en cursiva, pero nuevamente, su propósito principal es semántico.

<p>Debemos <em>actuar ahora</em> antes de que sea demasiado tarde.</p>

Los lectores de pantalla suelen cambiar el tono de voz al encontrar texto dentro de elementos <em>, mejorando así la experiencia para usuarios con discapacidad visual.

Diferencia entre em e i

Similar al caso anterior, <em> e <i> tienen propósitos diferentes:

• <em> indica énfasis semántico
• <i> aplica cursiva sin añadir significado semántico especial

<!-- Uso correcto de em (énfasis) -->
<p>No estoy <em>sugiriendo</em> que lo hagas, estoy <em>insistiendo</em>.</p>

<!-- Uso correcto de i (términos técnicos, extranjerismos, pensamientos) -->
<p>El <i>Homo sapiens</i> apareció hace aproximadamente 300.000 años.</p>

Elemento mark

El elemento <mark> se utiliza para resaltar o marcar texto que tiene relevancia especial en el contexto actual, similar a como usaríamos un marcador fluorescente en un libro. Los navegadores suelen mostrar este texto con un fondo amarillo.

<p>En el examen, presta especial atención a la <mark>segunda ley de Newton</mark>.</p>

Este elemento es particularmente útil para:

• Destacar resultados de búsqueda
• Resaltar partes importantes de un texto
• Marcar código que ha sido modificado o añadido

<p>Buscar resultados para "HTML":</p>
<p><mark>HTML</mark> es un lenguaje de marcado utilizado para crear páginas web.</p>
<p>Aprende <mark>HTML</mark>, CSS y JavaScript para desarrollo web.</p>

Elemento sub

El elemento <sub> se utiliza para representar texto que debe aparecer como subíndice (ligeramente por debajo de la línea de texto normal). Es especialmente útil para fórmulas químicas y expresiones matemáticas.

<p>La fórmula química del agua es H<sub>2</sub>O.</p>

Otros ejemplos de uso:

<!-- Notación científica -->
<p>El número de Avogadro es aproximadamente 6,022 × 10<sub>23</sub> mol<sub>-1</sub>.</p>

<!-- Pie de página con referencias -->
<p>Según varios estudios<sub>1</sub>, este método es efectivo.</p>

Elemento sup

El elemento <sup> se utiliza para representar texto que debe aparecer como superíndice (ligeramente por encima de la línea de texto normal). Es útil para exponentes, notas al pie y símbolos especiales.

<p>La fórmula para calcular el área de un círculo es πr<sup>2</sup>.</p>

Otros ejemplos de uso:

<!-- Fechas y ordinales -->
<p>El 3<sup>er</sup> piso está cerrado por mantenimiento.</p>

<!-- Notación matemática -->
<p>La ecuación cuadrática tiene la forma ax<sup>2</sup> + bx + c = 0.</p>

<!-- Referencias bibliográficas -->
<p>Este concepto fue desarrollado por Einstein<sup>[3]</sup> en 1905.</p>

Combinando elementos de formato

Estos elementos pueden combinarse entre sí o con otros elementos HTML para lograr formatos más complejos:

<p>La ecuación <strong>E = mc<sup>2</sup></strong> revolucionó la física moderna.</p>

<p>El <em>punto de ebullición</em> del H<sub>2</sub>O es 100<sup>°</sup>C a nivel del mar.</p>

<p>Recuerda que <mark><strong>este contenido</strong></mark> será evaluado en el examen final.</p>

Aplicando estilos personalizados

Aunque estos elementos tienen estilos predeterminados en los navegadores, podemos personalizarlos con CSS:

<style>
  strong {
    color: #d00;
    font-weight: 700;
  }
  
  em {
    font-style: italic;
    border-bottom: 1px dotted #999;
  }
  
  mark {
    background-color: #ffffa0;
    padding: 0 3px;
    border-radius: 2px;
  }
  
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  sup {
    top: -0.5em;
  }
</style>

<p>Este texto contiene <strong>contenido importante</strong>, <em>texto enfatizado</em>, 
<mark>texto resaltado</mark>, subíndices como H<sub>2</sub>O y superíndices como x<sup>2</sup>.</p>

Consideraciones de accesibilidad

Al utilizar estos elementos de formato, es importante considerar:

• Uso semántico correcto: Utiliza cada elemento según su propósito semántico, no solo por su apariencia visual.
• No abusar del marcado: El uso excesivo de elementos como <strong> o <mark> puede disminuir su efectividad.
• Contraste adecuado: Asegúrate de que el texto formateado mantenga suficiente contraste con el fondo.

<!-- Buen uso (semántico) -->
<p><strong>Advertencia:</strong> Este proceso eliminará permanentemente todos los datos.</p>

<!-- Mal uso (solo por estética) -->
<p><strong>Bienvenidos a nuestra página web</strong></p>

Ejemplos prácticos

Veamos algunos ejemplos prácticos de cómo estos elementos pueden utilizarse en situaciones reales:

• Glosario técnico:

<dl>
  <dt><strong>HTML</strong></dt>
  <dd><em>HyperText Markup Language</em>: Lenguaje estándar para crear páginas web.</dd>
  
  <dt><strong>CSS</strong></dt>
  <dd><em>Cascading Style Sheets</em>: Lenguaje utilizado para describir la presentación de documentos HTML.</dd>
</dl>

• Artículo científico:

<p>
  La reacción 2H<sub>2</sub> + O<sub>2</sub> → 2H<sub>2</sub>O libera 572 kJ/mol.
  Esta energía (E) puede calcularse usando la ecuación E = mc<sup>2</sup>, donde
  <em>m</em> representa la masa y <em>c</em> la velocidad de la luz.
</p>

• Texto instructivo:

<p>
  <mark>Paso 1:</mark> Mezclar 200g de harina con 5g de levadura.
  <mark>Paso 2:</mark> Añadir 100ml de agua y amasar <strong>durante al menos 10 minutos</strong>.
  <mark>Paso 3:</mark> Dejar reposar la masa a 20<sup>°</sup>C.
</p>

• Cita con énfasis:

<blockquote>
  <p>
    "No es que <em>no podamos</em> resolver el problema, 
    es que <strong>no queremos</strong> resolverlo."
  </p>
  <footer>— Ana García, <cite>Discurso sobre cambio climático</cite></footer>
</blockquote>

Estos elementos de formato proporcionan herramientas valiosas para mejorar tanto la presentación visual como la estructura semántica de nuestro contenido HTML, lo que resulta en documentos más accesibles, comprensibles y profesionales.

Saltos de línea (br) y líneas horizontales (hr)

En el diseño de páginas web, a veces necesitamos controlar específicamente cómo se presenta el texto y cómo se separan visualmente las secciones de contenido. HTML nos proporciona dos elementos simples pero potentes para estas tareas: el salto de línea <br> y la línea horizontal <hr>. Ambos son elementos vacíos, lo que significa que no requieren una etiqueta de cierre ni contienen contenido.

Elemento de salto de línea (br)

El elemento <br> crea un salto de línea dentro del texto, forzando que el contenido que le sigue comience en una nueva línea. A diferencia del elemento <p>, que crea párrafos completos con espaciado vertical, <br> simplemente rompe la línea actual sin añadir espacio adicional.

La sintaxis del elemento <br> es muy sencilla:

<p>Esta es la primera línea.<br>Esta es la segunda línea.</p>

En HTML5, la forma recomendada de escribir elementos vacíos es sin la barra diagonal de cierre:

<br>

Aunque también es válido usar la notación de cierre automático (compatible con XHTML):

<br />

Casos de uso apropiados para br

El elemento <br> debe utilizarse con moderación y solo en situaciones específicas:

• Direcciones postales:

<address>
  OpenAI<br>
  3180 18th Street<br>
  San Francisco, CA 94110<br>
  Estados Unidos
</address>

• Poesía o letras de canciones:

<p>
  Caminante, son tus huellas<br>
  el camino y nada más;<br>
  Caminante, no hay camino,<br>
  se hace camino al andar.
</p>

• Cuando el significado del contenido depende de los saltos de línea:

<p>
  Instrucciones para el microondas:<br>
  1. Abrir el envase por la esquina<br>
  2. Calentar durante 3 minutos<br>
  3. Dejar reposar 1 minuto antes de servir
</p>

Prácticas incorrectas con br

Es importante evitar ciertos usos del elemento <br>:

• No usar para separar párrafos (usar <p> en su lugar):

<!-- Incorrecto -->
<p>Este es el primer párrafo.<br><br>Este es el segundo párrafo.</p>

<!-- Correcto -->
<p>Este es el primer párrafo.</p>
<p>Este es el segundo párrafo.</p>

• No usar para crear espaciado (usar CSS en su lugar):

<!-- Incorrecto -->
<div>
  Título<br><br><br>
  Contenido
</div>

<!-- Correcto -->
<style>
  h2 {
    margin-bottom: 30px;
  }
</style>
<div>
  <h2>Título</h2>
  <p>Contenido</p>
</div>

• No usar para crear listas (usar elementos de lista en su lugar):

<!-- Incorrecto -->
<p>
  Ingredientes:<br>
  - Harina<br>
  - Huevos<br>
  - Azúcar
</p>

<!-- Correcto -->
<p>Ingredientes:</p>
<ul>
  <li>Harina</li>
  <li>Huevos</li>
  <li>Azúcar</li>
</ul>

Elemento de línea horizontal (hr)

El elemento <hr> crea una línea horizontal que sirve como separador temático entre secciones de contenido. Visualmente se muestra como una línea gris que atraviesa el ancho del contenedor, pero su propósito principal es semántico: indicar un cambio de tema dentro de una sección.

La sintaxis básica del elemento <hr> es:

<p>Primera sección de contenido.</p>
<hr>
<p>Segunda sección con un tema diferente.</p>

Al igual que con <br>, en HTML5 se recomienda usar la forma simple:

<hr>

Aunque también es válida la notación de cierre automático:

<hr />

Uso semántico de hr

El elemento <hr> debe utilizarse para indicar una transición temática en el contenido:

<section>
  <h2>Preparación de la receta</h2>
  <p>Mezclar todos los ingredientes en un recipiente grande...</p>
  
  <hr>
  
  <h2>Proceso de horneado</h2>
  <p>Precalentar el horno a 180°C y colocar la mezcla...</p>
</section>

Personalización con CSS

Aunque <hr> tiene un estilo predeterminado en los navegadores, podemos personalizarlo completamente con CSS:

<style>
  /* Línea horizontal básica personalizada */
  .separador-simple {
    border: none;
    height: 1px;
    background-color: #ddd;
    margin: 20px 0;
  }
  
  /* Línea horizontal con efecto degradado */
  .separador-degradado {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    margin: 25px 0;
  }
  
  /* Línea horizontal decorativa */
  .separador-decorativo {
    border: 0;
    height: 3px;
    background-image: repeating-linear-gradient(90deg, #f87c56, #f87c56 15px, transparent 15px, transparent 30px);
    margin: 30px 0;
  }
</style>

<p>Sección uno con contenido.</p>
<hr class="separador-simple">
<p>Sección dos con contenido.</p>
<hr class="separador-degradado">
<p>Sección tres con contenido.</p>
<hr class="separador-decorativo">
<p>Sección cuatro con contenido.</p>

Ejemplos prácticos de hr

• Separación de secciones en un artículo:

<article>
  <h1>Guía completa de HTML</h1>
  
  <section>
    <h2>Introducción a HTML</h2>
    <p>HTML es el lenguaje estándar para crear páginas web...</p>
  </section>
  
  <hr>
  
  <section>
    <h2>Estructura básica de un documento</h2>
    <p>Todo documento HTML comienza con la declaración DOCTYPE...</p>
  </section>
  
  <hr>
  
  <section>
    <h2>Elementos y etiquetas</h2>
    <p>Los elementos HTML se definen mediante etiquetas...</p>
  </section>
</article>

• Separación en formularios:

<form>
  <fieldset>
    <legend>Información personal</legend>
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre">
    <label for="email">Email:</label>
    <input type="email" id="email">
  </fieldset>
  
  <hr>
  
  <fieldset>
    <legend>Información de envío</legend>
    <label for="direccion">Dirección:</label>
    <input type="text" id="direccion">
    <label for="ciudad">Ciudad:</label>
    <input type="text" id="ciudad">
  </fieldset>
</form>

• Separación en tarjetas de producto:

<div class="producto">
  <h3>Auriculares inalámbricos</h3>
  <p>Auriculares con cancelación de ruido y 20 horas de batería.</p>
  <p class="precio">89,99 €</p>
  
  <hr>
  
  <div class="acciones">
    <button>Añadir al carrito</button>
    <button>Añadir a favoritos</button>
  </div>
</div>

Consideraciones de accesibilidad

Al utilizar estos elementos, debemos tener en cuenta algunas consideraciones de accesibilidad:

• Para <br>: Los lectores de pantalla anunciarán "salto de línea" al encontrar este elemento. Úsalo solo cuando el salto de línea sea parte del significado del contenido.

• Para <hr>: Los lectores de pantalla suelen anunciar este elemento como "separador" o "línea horizontal", indicando al usuario un cambio temático. Si el cambio de tema es importante, considera usar encabezados (<h2>, <h3>, etc.) para una mejor estructura semántica.

Alternativas modernas

En el desarrollo web moderno, a menudo podemos encontrar alternativas más semánticas o flexibles:

• En lugar de múltiples <br>: Considera usar CSS para controlar el espaciado:

<style>
  .espaciado-grande {
    margin-bottom: 2em;
  }
</style>
<p class="espaciado-grande">Este párrafo tiene más espacio debajo.</p>

• En lugar de <hr> para efectos visuales: Puedes usar pseudo-elementos CSS:

<style>
  .seccion {
    position: relative;
    margin-bottom: 30px;
  }
  
  .seccion:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ddd;
  }
</style>
<div class="seccion">
  <h2>Primera sección</h2>
  <p>Contenido de la primera sección...</p>
</div>
<div class="seccion">
  <h2>Segunda sección</h2>
  <p>Contenido de la segunda sección...</p>
</div>

Los elementos <br> y <hr> son herramientas sencillas pero útiles en HTML cuando se utilizan correctamente. El primero nos permite controlar los saltos de línea dentro del texto, mientras que el segundo proporciona una separación visual y semántica entre secciones de contenido. Usados con moderación y en los contextos adecuados, pueden mejorar tanto la presentación como la estructura de nuestros documentos web.