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 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".
👉 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>).
