20. Etiquetas complementarias en HTML5

Curso HTML5 desde cero — Freimel Jerez

En esta lección aprenderás las etiquetas complementarias de HTML5. Son etiquetas que no estructuran toda la página, pero son esenciales para dar formato, separar contenido y mejorar la experiencia del usuario.

🔹 La etiqueta <span>

<span> es una etiqueta en línea que se usa para aplicar estilos o lógica a una parte específica del texto.

<p>Este texto tiene un <span>detalle importante</span>.</p>

🔹 La etiqueta <div>

<div> es una etiqueta de bloque usada para agrupar contenido. Es muy común en layouts y contenedores.

<div class="card">
  <h3>Título</h3>
  <p>Contenido</p>
</div>

🔹 <br> y <hr>

• <br> → salto de línea
• <hr> → separación temática

<p>Línea uno<br>Línea dos</p>
<hr>

🔹 <details> y <summary>

Permiten mostrar y ocultar contenido sin JavaScript.

<details>
  <summary>Ver más información</summary>
  <p>Este contenido se puede ocultar.</p>
</details>

📌 Buenas prácticas

• Usa span solo para texto en línea
• No abuses de div si existe una etiqueta semántica
• Usa hr para separar secciones, no solo por diseño
• Aprovecha details para FAQs

🎥 Video de la lección

Debes ver el video completo para desbloquear la siguiente lección.

📌 Resumen

• span y div agrupan contenido
• br y hr separan visualmente
• details y summary mejoran la UX

En la siguiente lección aprenderás sobre SVG en línea.