Flujo y elementos en línea

En esta lección cubrís tres grupos de elementos: el salto de línea <br>, el separador temático <hr>, y un conjunto de elementos en línea que marcan tipos específicos de contenido.

---

<br> — salto de línea

<br> es un void element que inserta un salto de línea en el flujo del texto. No tiene etiqueta de cierre.

<!-- Cuándo SÍ: poesía — los saltos de línea son parte del contenido -->
<p>
  Dos y dos son cuatro,<br />
  cuatro y dos son seis,<br />
  seis y dos son ocho.
</p>

Cuándo NO usarlo: <br> no separa párrafos. Si querés dos bloques de texto distintos, usás dos <p>:

<!-- MAL -->
<p>Primer bloque.<br /><br />Segundo bloque.</p>

<!-- BIEN -->
<p>Primer bloque.</p>
<p>Segundo bloque.</p>

La diferencia es semántica: <p> declara que hay dos párrafos distintos. Dos <br> son solo espacio visual sin estructura.

---

<hr> — separador temático

<hr> es un void element que marca una transición temática en el contenido: un cambio de tema, un giro narrativo, una separación entre secciones.

<p>La primera parte habla sobre el origen del mate.</p>

<hr />

<p>A continuación, la preparación paso a paso.</p>

En HTML5, <hr> tiene significado semántico: “el tema cambia acá”. No es una línea decorativa — si querés una línea sin significado, eso es CSS (Bloque II).

---

Elementos en línea de texto

HTML tiene varios elementos en línea para marcar tipos específicos de contenido. Todos van dentro de párrafos o headings, no crean bloques propios.

<abbr> — abreviatura o acrónimo:

<p>La <abbr title="Organización de las Naciones Unidas">ONU</abbr> fue fundada en 1945.</p>

El atributo title provee la expansión completa. Los lectores de pantalla y los tooltips del navegador lo usan. Sin title, el elemento pierde su utilidad.

<time> — fecha u hora:

<p>El evento es el <time datetime="2026-07-15">15 de julio</time>.</p>

<time> marca una fecha legible para máquinas. El atributo datetime usa el formato estándar ISO 8601. El contenido visible puede ser texto libre; datetime es lo que los motores de búsqueda y calendarios leen.

Otros elementos en línea:

<p>Precio: $1.500 <small>IVA incluido</small></p>
<p>La función <mark>querySelector</mark> devuelve el primer elemento.</p>
<p>E = mc<sup>2</sup></p>
<p>El agua es H<sub>2</sub>O</p>

¿Que son estos elementos?

• <small> marca texto secundario o aclaratorio — el tipo “letra chica” de los disclaimers y notas. El navegador lo renderiza más pequeño por defecto, pero su significado es “esto es menos importante que el texto principal”.

• <mark> resalta texto relevante en un contexto específico: resultados de una búsqueda, el término que se está definiendo o la parte que el lector debe notar en ese momento. No es énfasis de entonación (<em>) ni importancia crítica (<strong>) — es “esto es lo que buscabas” o “esto es lo que importa aquí”.

• <sup> y <sub> marcan superíndice y subíndice respectivamente. Tienen semántica tipográfica concreta: <sup> para exponentes, referencias a notas al pie y ordinales; <sub> para fórmulas químicas y subíndices matemáticos. No son para subir o bajar texto decorativamente.

---

Tu turno: trabajás sobre el starter que tiene el poema y la ficha de la autora. Agregá los <br> entre los versos, el <hr> entre las secciones, y marcá la abreviatura y la fecha con <abbr> y <time>. Luego hacé clic en “Comprobar”.