Hay elementos de HTML, que independientemente de su contenido, siempre ocupan una línea completa. Estos elementos se llaman elementos de bloque.
Hagamos una prueba con dos párrafos:
<p>hola.</p>
<p>adiós.</p>
El resultado será:
miarchivo.html
hola.
adiós.
Como ves, aunque hay espacio suficiente para que ambos párrafos se muestren en la misma línea,
cada uno de ellos ocupa una línea completa. Esto es porque los elementos <p> son elementos de bloque.
Si le añadimos un borde a estos elementos (algo que aprenderemos a hacer más adelante) podrás ver claramente que cada uno de ellos ocupa una línea completa.
miarchivo.html
hola.
adiós.
Por otro lado, hay elementos de HTML que no ocupan una línea completa,
sino que se adaptan al contenido que contienen. ¿Recuerdas la etiqueta strong?
Vamos a repetir el ejemplo con estas etiquetas:
<strong>hola.</strong> <strong>adiós.</strong>
El resultado será:
miarchivo.html
Como puedes ver, ambos elementos <strong> se muestran en la misma línea.
Esto es porque los elementos <strong> son elementos en línea.
Si añadimos un borde a estos elementos (algo que aún no es momento para que aprendas a hacerlo, pero viene bien para el ejemplo), verás que no ocupan una línea completa.
miarchivo.html
Gracias a esto, podemos utilizar la etiqueta <strong> dentro de un párrafo sin que se rompa la línea,
como hicimos en el capítulo anterior
<p>Este es un <strong>texto</strong> de ejemplo.</p>
miarchivo.html
Este es un texto de ejemplo.
<span>La etiqueta <span> es un elemento en línea que no tiene ningún significado semántico.
Es decir, no tiene un significado específico como los elementos <strong>, <em>, <p>, etc.
pero nos permite aplicar estilos a un fragmento de texto sin romper la línea.
<p>Este es un <span>texto</span> de ejemplo.</p>
El resultado será:
miarchivo.html
Este es un texto de ejemplo.
como puedes ver, el texto "texto" se muestra en la misma línea que el resto del párrafo.
En el futuro, utilizaremos la etiqueta <span> para aplicar estilos a fragmentos de texto.
En el siguiente capítulo aprenderemos a crear listas en HTML.