Etiquetas de Texto HTML
Introducción
Las etiquetas de texto en el diseño web son fundamentales por varias razones clave:
- Accesibilidad: Las etiquetas de texto adecuadas mejoran la accesibilidad de un sitio web, permitiendo que las tecnologías de asistencia, como los lectores de pantalla, interpreten y comuniquen el contenido de manera efectiva a los usuarios con discapacidades visuales.
- SEO (Optimización para Motores de Búsqueda): Los motores de búsqueda utilizan las etiquetas de texto para entender el contenido y la estructura de una página web. Etiquetas como <h1>, <h2>, <p>, y <alt> en las imágenes ayudan a mejorar el posicionamiento en los resultados de búsqueda.
- Experiencia del Usuario (UX): Las etiquetas de texto bien estructuradas facilitan la navegación y la comprensión del contenido por parte de los usuarios. Una jerarquía clara de títulos y subtítulos, por ejemplo, ayuda a los visitantes a escanear rápidamente la página y encontrar la información que necesitan.
- Mantenimiento y Escalabilidad: El uso adecuado de etiquetas de texto facilita el mantenimiento y la actualización del sitio web. Un código bien estructurado y semánticamente correcto es más fácil de entender y modificar, lo que es crucial para el desarrollo continuo y la escalabilidad del proyecto.
- Consistencia y Profesionalismo: Las etiquetas de texto contribuyen a la consistencia visual y funcional del sitio web, lo que transmite una imagen profesional y confiable a los usuarios.
Las etiquetas de texto no solo afectan la apariencia visual por defecto (aunque esto se puede y se debe modificar con CSS), sino que, más importante aún, aportan significado semántico al contenido. Esto significa que le dicen al navegador, y a otras herramientas como los motores de búsqueda o lectores de pantalla para personas con discapacidad visual, qué tipo de texto es y cuál es su importancia o función.
Entre las etiquetas HTML se encuentran disponibles encabezados, párrafos, saltos de línea, reglas horizontales y citas.
Los Encabezados <hx>
Definición Encabezados <hx>
Los encabezados <hx> en HTML son etiquetas utilizadas para definir los títulos y subtítulos de una página web. Van desde <h1> hasta <h6>, donde <h1> es el encabezado de mayor importancia y <h6> el de menor importancia.
El encabezado <h1> tiene el texto más grande y grueso mientras que el encabezado <h6> es el más pequeño y delgado, llegando al nivel de párrafo.
Características Clave Encabezados <hx>
- Jerarquía: Los encabezados proporcionan una estructura jerárquica al contenido, facilitando la navegación y comprensión.
- Semántica: Ayudan a los motores de búsqueda a entender la estructura y el contenido de la página.
- Accesibilidad: Mejoran la accesibilidad al permitir a los lectores de pantalla navegar por la página de manera más eficiente.
Sintaxis Correcta Encabezados <hx>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Uso Encabezados <hx>
- Estructuración de Contenido: Utilizados para organizar el contenido en secciones y subsecciones.
- SEO: Mejoran el posicionamiento en motores de búsqueda al destacar las partes importantes del contenido.
- Legibilidad: Facilitan la lectura al dividir el texto en partes manejables.
- Estructura de los encabezados hx:
<h1>Título principal de la página</h1> <!-- Título principal de la página (solo uno por página) --> <h2>Sección importante dentro del contenido</h2> <!-- Títulos de secciones principales --> <h3>Subsección más específica</h3> <!-- Subtítulos dentro de una sección <h2> --> <h4>Detalles dentro de una subsección</h4> <!-- Subtítulos dentro de un <h3> --> <h5>Información secundaria</h5> <!-- Aún más específicos --> <h6>Notas o aclaraciones finales</h6> <!-- El nivel más bajo de jerarquía -->
Relación con Otras Etiquetas Encabezados <hx>
- Párrafos
<p>: Los encabezados suelen ir seguidos de párrafos que desarrollan el tema introducido. - Listas
<ul>,<ol>: Pueden preceder a listas para introducir una serie de elementos relacionados. - Enlaces
<a>: A menudo se utilizan dentro de encabezados para enlazar a otras secciones o páginas.
Buenas Prácticas y Errores Comunes Encabezados <hx>
- Buenas Prácticas al usar encabezados
<hx>:- Usar solo un
<h1>por página, representando el título principal. - Mantener la jerarquía lógica (no saltar de
<h1>a<h3>). - Utilizar encabezados para mejorar la accesibilidad y el SEO.
- No usar los encabezados
<hx>solo para cambiar el tamaño o apariencia del texto. Deben emplearse para organizar el contenido, no como herramienta de diseño. Para dar estilo, se debe usar CSS.h2 { font-size: 24px; color: navy; } - Incluir palabras clave relevantes.
- Usar encabezados informativos, los títulos deben reflejar claramente el contenido que sigue.
- Usar solo un
- Errores Comunes al usar encabezados
<hx>:- Usar encabezados para estilar texto sin considerar su significado semántico.
- Saltarse niveles de encabezado, lo que puede confundir a los usuarios y motores de búsqueda.
- Solo debe existir un
<h1>principal. Múltiples<h1>pueden confundir a buscadores y usuarios. - Es un error omitir los encabezados y usar solo texto plano o
<div>para estructurar contenido. - Repetir los mismos encabezados en múltiples lugares sin diferenciarlos. Por ejemplo, tener varios
<h2>Contenido</h2>en distintas secciones sin contexto adicional puede resultar confuso. - No es recomendable usar solo
<h1>o solo<h2>para todos los títulos, ya que no se refleja la jerarquía del contenido.
Configuración CSS por Defecto Encabezados <hx>
h1,h2,h3,h4,h5,h6{
display: block;
font-weight: bold;
}
h1 {
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
}
h2 {
font-size: 1.5em;
margin-block-start: 0.75em;
margin-block-end: 0.75em;
}
h3 {
font-size: 1.17em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
}
h4 {
font-size: 1em;
margin-block-start: 1.12em;
margin-block-end: 1.12em;
}
h5 {
font-size: 0.83em;
margin-block-start: 1.5em;
margin-block-end: 1.5em;
}
h6 {
font-size: 0.67em;
margin-block-start: 1.67em;
margin-block-end: 1.67em;
}
Personalización recomendada con CSS encabezados hx
Para tener un diseño más uniforme y controlado, se recomienda definir los estilos personalizados para los encabezados:
h1, h2, h3, h4, h5, h6 {
font-family: 'Arial', sans-serif;
font-weight: bold;
margin: 0 0 1rem 0;
line-height: 1.2;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
Ejemplo Aplicado en un Proyecto Real Encabezados <hx>
Una empresa de tecnología está desarrollando una página web para promocionar un nuevo producto llamado TechNova SmartHub. Se necesita estructurar la página con encabezados jerárquicos bien organizados, siguiendo buenas prácticas semánticas.
TechNova SmartHub
La solución integral para el hogar inteligente del futuro.
Características Principales
- Control centralizado de dispositivos IoT
- Compatibilidad con Alexa, Google Assistant y Siri
- Panel de gestión desde app móvil
Beneficios del Producto
Seguridad
El sistema integra sensores de movimiento, cámaras y alertas en tiempo real.
Conectividad
Permite la integración de múltiples dispositivos sin pérdida de rendimiento.
Eficiencia Energética
Monitorea el consumo eléctrico y sugiere mejoras automáticas.
Preguntas Frecuentes
¿Requiere Instalación Profesional?
No, el SmartHub viene preconfigurado para instalación en minutos.
¿Qué Sistemas Operativos Soporta?
Compatible con Android, iOS, Windows y macOS.
Contacto
Para más información, escríbanos a: contacto@technova.com
<div class="container">
<p class="h1">TechNova SmartHub</p>
<p>La solución integral para el hogar inteligente del futuro.</p>
<p class="h2">Características Principales</p>
<ul>
<li>Control centralizado de dispositivos IoT</li>
<li>Compatibilidad con Alexa, Google Assistant y Siri</li>
<li>Panel de gestión desde app móvil</li>
</ul>
<p class="h2">Beneficios del Producto</p>
<p class="h3">Seguridad</p>
<p>El sistema integra sensores de movimiento, cámaras y alertas en tiempo real.</p>
<p class="h3">Conectividad</p>
<p>Permite la integración de múltiples dispositivos sin pérdida de rendimiento.</p>
<p class="h3">Eficiencia Energética</p>
<p>Monitorea el consumo eléctrico y sugiere mejoras automáticas.</p>
<p class="h2">Preguntas Frecuentes</p>
<p class="h3">¿Requiere Instalación Profesional?</p>
<p>No, el SmartHub viene preconfigurado para instalación en minutos.</p>
<p class="h3">¿Qué Sistemas Operativos Soporta?</p>
<p>Compatible con Android, iOS, Windows y macOS.</p>
<p class="h2">Contacto</p>
<p>Para más información, escríbanos a: contacto@technova.com</p>
</div>
.container {
font-family: Arial, sans-serif;
padding: 2rem;
line-height: 1.6;
}
.h1 {
font-size: 2.5rem;
font-weight: bold;
margin: 0;
}
.h2 {
font-size: 2rem;
margin-top: 2rem;
font-weight: bold;
}
.h3 {
font-size: 1.5rem;
margin-top: 1.5rem;
font-weight: bold;
}
Uso con Tecnologías de Asistencia (ARIA) Encabezados <hx>
Los encabezados son compatibles con ARIA para mejorar la accesibilidad. Por ejemplo, se pueden utilizar atributos ARIA como aria-level para especificar el nivel de un encabezado cuando no se puede usar la etiqueta HTML estándar.
<div role="heading" aria-level="1">Título Principal</div>
Los Párrafos <p>
Definición Párrafos <p>
La etiqueta <p> en HTML se utiliza para definir párrafos de texto. Es una de las etiquetas más básicas y comunes del lenguaje HTML, y permite estructurar el contenido en bloques separados y legibles.
Características Clave Párrafos <p>
- Inician en una nueva línea automáticamente.
- Se puede aplicar formato con CSS.
- Aceptan contenido textual y algunas etiquetas en línea.
- Generan espacio (margen) antes y después del contenido por defecto.
- No se puede estar seguro de cómo se mostrará el HTML.
- Pantallas grandes o pequeñas, y ventanas redimensionadas crearán resultados diferentes.
- Con HTML, no se puede cambiar la salida añadiendo espacios extra o líneas extra en tu código HTML.
- El navegador eliminará cualquier espacio extra y línea extra cuando se muestre la página:
<p>Este es otro parágrafo, los espacios extra serán eliminados por el navegador</p> <!-- Lo que muestra el navegador: Este es otro parágrafo, los espacios extra serán eliminados por el navegador-->
Sintaxis Correcta Párrafos <p>
<p>Este es un párrafo de ejemplo.</p>
Uso Párrafos <p>
La etiqueta <p> se usa para dividir el texto en bloques legibles. Se puede usar dentro del cuerpo del documento HTML (<body>), y su uso correcto mejora la accesibilidad y el orden del contenido.
Relación con Otras Etiquetas Párrafos <p>
- Encabezado <hx>: Los párrafos suelen seguir a los encabezados, desarrollando las ideas presentadas en ellos.
- Contenedores <div>, <article>, <section> o <main>: Los párrafos pueden estar dentro de elementos contenedores.
- Elementos en línea <b>, <em>, <span>, <a>, etc.: Dentro de un párrafo se pueden usar elementos en línea para formatear o enlazar partes específicas del texto.
- Comportamiento con elementos de bloque: Los párrafos no pueden contener otros elementos de bloque como listas (
<ol>,<ul>,<dl>), tablas<table>o divisiones<div>.
Buenas Prácticas y Errores Comunes Párrafos <p>
- Buenas Prácticas al usar párrafos
<p>:- Cada párrafo debe enfocarse en un solo tema para facilitar la comprensión.
- Los párrafos deben ser claros y breves, evitando repeticiones y frases largas.
- Las oraciones dentro del párrafo deben conectarse lógicamente con conectores.
- La longitud de los párrafos debe ser apropiada al contenido.
- Los párrafos estructuran la información comenzando con la idea principal.
- La etiqueta
<p>es solo para bloques de texto en párrafos. - El contenido de los párrafos debe ser accesible para todos los usuarios.
- Los estilos deben aplicarse con CSS, no directamente en HTML.
- Errores Comunes al usar párrafos
<p>:- Incluir varios temas distintos en un solo párrafo confunde al lector y dificulta entender la información.
- Textos extensos sin dividir en párrafos pueden abrumar visualmente y hacer perder el interés.
- Muchos párrafos de una sola frase dan sensación de falta de desarrollo y dificultan entender el contexto.
- Usar
<p>para espaciar o separar elementos que no son texto es un error que afecta la interpretación del contenido. - Oraciones mal conectadas o transiciones poco claras dificultan la comprensión y la fluidez.
- Repetir información innecesariamente en el mismo párrafo o en párrafos seguidos hace el texto pesado.
- Olvidar cerrar la etiqueta
</p>es un error de sintaxis.
Configuración CSS por Defecto Párrafos <p>
Los navegadores aplican estilos predeterminados como:
p {
margin-top: 1em;
margin-bottom: 1em;
}
Esto significa que hay espacio entre un párrafo y otro automáticamente.
Ejemplo Aplicado en un Proyecto Real Párrafos <p>
En una página web básica:
🎨 Párrafos con Estilo
Este párrafo tiene un efecto neón que brilla en la oscuridad. Perfecto para darle un toque futurista a tu contenido.
Simulando una máquina de escribir...
Un párrafo con texto degradado que cambia de colores constantemente. ¡Muy llamativo!
Este párrafo flota suavemente arriba y abajo, creando un efecto hipnotizante que capta la atención del lector.
Aparezco gradualmente con un efecto de desvanecimiento elegante. Ideal para revelar contenido importante.
¡Pasa el mouse sobre mí! Soy un párrafo interactivo que responde a tus acciones con animaciones suaves.
Estilo retro de los años 80 con colores vibrantes y sombras marcadas.
<div class="body-wrapper">
<div class="container">
<h1 class="titulo">
🎨 Párrafos con Estilo
</h1>
<p class="neon">
Este párrafo tiene un efecto neón que brilla en
la oscuridad. Perfecto para darle un toque
futurista a tu contenido.
</p>
<p class="typewriter">
Simulando una máquina de escribir...
</p>
<p class="gradient-text">
Un párrafo con texto degradado que cambia de
colores constantemente. ¡Muy llamativo!
</p>
<p class="floating">
Este párrafo flota suavemente arriba y abajo,
creando un efecto hipnotizante que capta la
atención del lector.
</p>
<p class="fade-in">
Aparezco gradualmente con un efecto de
desvanecimiento elegante. Ideal para revelar
contenido importante.
</p>
<p class="interactive">
¡Pasa el mouse sobre mí! Soy un párrafo
interactivo que responde a tus acciones con
animaciones suaves.
</p>
<p class="retro">
Estilo retro de los años 80 con colores
vibrantes y sombras marcadas.
</p>
</div>
</div>
.body-wrapper {
font-family: 'Arial', sans-serif;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.container {
max-width: 800px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 30px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.titulo {
text-align: center;
color: #333;
margin-bottom: 40px;
font-size: 2.5em;
}
/* Párrafo con efecto neón */
.neon {
background: #000;
color: #00ff88;
padding: 20px;
border-radius: 10px;
text-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88, 0 0 40px #00ff88;
border: 2px solid #00ff88;
margin: 20px 0;
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from {
text-shadow: 0 0 5px #00ff88, 0 0 10px #00ff88, 0 0 15px #00ff88;
}
to {
text-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88, 0 0 40px #00ff88;
}
}
/* Párrafo con efecto máquina de escribir */
.typewriter {
font-family: 'Courier New', monospace;
background: #1e1e1e;
color: #00ff00;
padding: 20px;
border-radius: 10px;
border-left: 5px solid #00ff00;
overflow: hidden;
white-space: nowrap;
animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
margin: 20px 0;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: #00ff00;
}
}
/* Párrafo con gradiente y sombra */
.gradient-text {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
background-size: 400% 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 1.5em;
font-weight: bold;
text-align: center;
padding: 20px;
animation: gradient-shift 3s ease infinite;
margin: 20px 0;
}
@keyframes gradient-shift {
0% {
backgroundosition: 0% 50%;
}
50% {
backgroundosition: 100% 50%;
}
100% {
backgroundosition: 0% 50%;
}
}
/* Párrafo con efecto flotante */
.floating {
background: rgba(255, 255, 255, 0.9);
color: var(--color-fondo);
padding: 20px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transform: translateY(0);
animation: float 3s ease-in-out infinite;
margin: 20px 0;
border: 3px solid #ff6b6b;
}
@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
/* Párrafo con efecto de desvanecimiento */
.fade-in {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 20px;
border-radius: 10px;
opacity: 0;
animation: fadeIn 2s ease-in forwards;
margin: 20px 0;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
/* Párrafo con hover interactivo */
.interactive {
background: #f8f9fa;
color: var(--color-fondo);
padding: 20px;
border-radius: 10px;
border: 2px solid #dee2e6;
transition: all 0.3s ease;
cursor: pointer;
margin: 20px 0;
}
.interactive:hover {
background: #343a40;
color: white;
transform: scale(1.05);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}
/* Párrafo con estilo retro */
.retro {
background: #ff6b35;
color: #fff;
padding: 20px;
font-family: 'Courier New', monospace;
text-transform: uppercase;
letter-spacing: 2px;
border: 5px solid #fff;
box-shadow: 10px 10px 0 #333;
margin: 20px 0;
}
Uso con Tecnologías de Asistencia (ARIA) Párrafos <p>
Es fundamental comprender que la etiqueta <p> en sí misma ya proporciona información semántica importante a las Tecnologías de Asistencia. Indica que el contenido encerrado es un párrafo de texto, una unidad lógica de información. Los lectores de pantalla, por ejemplo, anuncian los elementos <p> como "párrafo", lo que ayuda a los usuarios con discapacidad visual a comprender la estructura y el flujo del contenido.
En general, para el uso de párrafos de texto simples, no es necesario añadir atributos ARIA directamente a la etiqueta <p>. La semántica inherente de la etiqueta es suficiente para comunicar su propósito.
Saltos de Línea <br>
Definición Saltos de Línea <br>
La ruptura de la línea en HTML se logra con la etiqueta <br> Esta etiqueta inserta una ruptura de línea en el contenido, permitiendo que el texto o los elementos posteriores se muestren en una línea separada No significa un nuevo párrafo; Es simplemente un cambio de línea.
Características Clave Saltos de Línea <br>
- Es un elemento vacío (no tiene etiqueta de cierre).
- Crea un salto visual sin semántica de párrafo.
- Comúnmente utilizado en poesía, direcciones o necesidades de formato de texto manual.
- No agrega espacio vertical adicional en comparación con
<br>. - Compatible en todos los navegadores.
- No se requiere contenido entre las etiquetas.
- Recibe atributos HTML globales como
dirylang, pero algunos pueden no funcionar desde HTML 4 01. - Es un elemento en línea.
- Pertenece al contenido de fraseo y al contenido de flujo, lo que permite el uso dentro de elementos que aceptan este tipo de datos.
- Escrito como
<br/>para un mejor cumplimiento XHTML.
Sintaxis Correcta Saltos de Línea <br>
- HTML5 recomienda usar la siguiente sintaxis:
<br> - Para XHTML o estilos más estrictos:
<br />
Uso Saltos de Línea <br>
- Separar líneas en direcciones postales.
- Crear espacios en poemas o letras de canciones.
- Separar líneas en un diálogo o cita.
- Cuando se necesita un salto visual sin cambiar el contexto semántico.
Relación con Otras Etiquetas Saltos de Línea <br>
-
<p>vs<br>:<p>crea un párrafo con espacio arriba y abajo.<br>solo cambia de línea sin espacio adicional. -
<div>: aunque se usa para agrupar contenido, no realiza quiebres de línea automáticos sin CSS. -
<pre>: mantiene los saltos de línea del código fuente, sin necesidad de<br>. -
<hr>: inserta una línea horizontal, no relacionada con cambio de línea pero también es una etiqueta vacía. -
<li>(List Item): Se usa dentro de listas (<ul>o<ol>). Cada elemento de la lista se muestra en una línea separada.
La principal diferencia con <br> es que las etiquetas como <p>, <div>, y <li> son elementos de bloque (por defecto), lo que significa que ocupan todo el ancho disponible y fuerzan un salto de línea antes y después de sí mismos. <br> es un elemento en línea, lo que significa que solo ocupa el espacio necesario para su propio contenido y simplemente inserta una nueva línea en el flujo del texto.
Buenas Prácticas y Errores Comunes Saltos de Línea <br>
- Buenas Prácticas:
- Usar
<br>solo cuando el salto de línea sea parte del contenido, no para maquetar o espaciar visualmente. - Reservar el uso de
<br>para casos donde realmente se necesite un salto de línea dentro de un bloque de texto, como en direcciones postales, poemas o versos de una canción. - Validar el código HTML para asegurar que los saltos de línea estén dentro de elementos válidos como
<p>o<div>. - Es preferible usar CSS para el control de espaciados y saltos de línea visuales.
- Usar
- Errores Comunes:
- Usar
<br>para Separar Párrafos es un error común que dificulta la semántica del documento. - Usar Múltiples
<br>para Crear Espacio Vertical es una mala práctica de diseño que debe evitarse en favor de CSS (marginopadding). - Ignorar la Semántica No considerar el significado de las etiquetas HTML al usar saltos de línea puede afectar negativamente la accesibilidad y el SEO.
- Cerrar la etiqueta con
</br>(no es correcto en HTML5). - Reemplazar
<p>con<br>para estructura de párrafos. - Para dar formato a la estructura visual de una página, es preferible emplear CSS Grid, Flexbox o contenedores en lugar de la etiqueta
<br>. - Usar
<br>para separar párrafos o bloques de contenido independientes. - Colocar
<br>fuera de elementos de texto válidos, lo que puede causar problemas de renderizado.
- Usar
Configuración CSS por Defecto Saltos de Línea <br>
Por defecto, la etiqueta <br> no tiene mucho estilo CSS asociado. Su comportamiento principal es simplemente forzar un salto de línea en el flujo del texto. No añade márgenes ni rellenos por defecto, pero puede decir que el formato por defecto puede ser el siguiente:
br {
display: inline;
unicode-bidi: isolate;
}
Esta configuración CSS representa el comportamiento predeterminado del elemento <br>
Ejemplo Aplicado en un Proyecto Real Saltos de Línea <br>
Calle 90 7-23
28001 Bogotá, Colombia
+57-123-4567
Caminante, son tus huellas
el camino y nada más;
Caminante, no hay camino,
se hace camino al andar.
<div class="container">
<address class="address">
Empresa Ejemplo S.A.<br>
Calle 90 7-23<br>
28001 Bogotá, Colombia<br>
<a href="tel:+571234567">+57-123-4567</a>
</address>
<p class="poem">
Caminante, son tus huellas<br>
el camino y nada más;<br>
Caminante, no hay camino,<br>
se hace camino al andar.
</p>
</div>
.container {
font-family: 'Segoe UI', sans-serif;
color: #333;
padding: 2rem;
max-width: 800px;
margin: 0 auto;
max-width: 400px;
margin: 0 auto;
}
.address {
background-color: #ffffff;
border-left: 5px solid #3e8ed0;
padding: 1rem 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
border-radius: 8px;
line-height: 1.6;
}
.address a {
color: #3e8ed0;
text-decoration: none;
font-weight: bold;
}
.address a:hover {
text-decoration: underline;
}
.poem {
background-color: #fffdf7;
border-left: 4px dashed #e0a96d;
padding: 1.5rem;
font-style: italic;
font-family: 'Georgia', serif;
white-space: pre-line;
border-radius: 8px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}
Uso con Tecnologías de Asistencia (ARIA) Saltos de Línea <br>
- El
<br>es reconocido por lectores de pantalla, generando una breve pausa, pero no se anuncia como "salto de línea". - Su efecto es visual, y no semántico.
- Si se necesita marcar una pausa o cambio significativo en contenido accesible, es mejor utilizar etiquetas como
<p>, listas o usar atributos ARIA más específicos. - Para mejor accesibilidad, es preferible estructurar el contenido semánticamente y evitar usar
<br>como reemplazo de organización de bloques.