Fundamentos de HTML y CSS

Teoría: Elementos de bloque y en línea

Cuando creas una página web, notarás que algunos elementos ocupan toda la línea disponible y otros solo el espacio necesario para su contenido. Para entender cómo se organizan los elementos en HTML, es importante conocer dos tipos principales: elementos de bloque y elementos en línea.

Elementos de bloque

Los elementos de bloque ocupan todo el ancho disponible y siempre comienzan en una nueva línea. Son la base de la estructura de una página, porque definen la disposición del contenido.

Algunos ejemplos de elementos de bloque son:

  • Párrafos (<p>)
  • Encabezados (<h1>, <h2>, etc.)
  • Divisiones (<div>)
  • Listas (<ul>, <ol> y <li>)

Ejemplo de elementos de bloque

<div>
  <h1>Este es un título</h1>
  <p>Este es un párrafo que ocupa toda la línea.</p>
</div>

En este caso, el <h1> y el <p> ocupan todo el ancho disponible porque son elementos de bloque.

Elementos de bloque

Elementos en línea

Los elementos en línea solo ocupan el espacio necesario para su contenido y no fuerzan un salto de línea. Son útiles para dar formato al contenido dentro de un texto.

Ejemplos de elementos en línea incluyen:

  • Enlaces (<a>)
  • Texto en negrita (<b>) y enfatizado (<strong>)
  • Texto en cursiva (<i> y <em>)
  • Imágenes (<img>)
  • Span (<span>) para aplicar estilos dentro de un texto

Ejemplo de elementos en línea

<p>Visita nuestra <a href="#">página</a> para más información</p>

Aquí, el enlace (<a>) se encuentra dentro del párrafo y solo ocupa el espacio de la palabra "página".

Elementos en línea

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen


Resumen

  • Elementos de bloque ocupan todo el ancho disponible y comienzan en una nueva línea (ej. <div>, <h1>, <p>).
  • Elementos en línea solo ocupan el espacio necesario y no fuerzan un salto de línea (ej. <a>, <span>, <img>).
NavegaciónTeoría

Completado

0 / 18