Elementos Inline y Block en HTML

En HTML existen los elementos inline (enlinea) y los elementos block (de bloque), en esta lección conoceremos cuáles son y las diferencias que existen entre ellos

Elementos en linea INLINE HTML

Como su nombre mismo indica, los elementos inline son aquellos cuyo contenido se encuentra en una misma linea, de tal manera que que si colocamos dos o más elementos en linea sin expresar un salto de linea, estos elementos se presentarán uno seguido de otro en una misma linea.

Lista de elementos tipo inline en HTML

• <a>.- etiqueta de enlace.
• <code>.- para fragmentos de código.
• <em>.- Texto importante (se ve en cursiva, por defecto, texto con énfasis).
• <i>.- etiqueta para texto en cursiva (texto en cursiva sin énfasis).
• <img>.- para imagenes.
• <input>.- campos de formulario.
• <span>.- fragmentes de contenido.
• <strong>.- texto fuerte.
• <sub>.- para texto subíndice.
• <sup>.- texto superíndice.
• <u>.- para subrayar texto.

Ejemplos de elementos en linea HTML

A continuación veamos un claro ejemplo en el que podemos observar como los elementos inline se visualizan un seguido de otro en la misma linea sin hacer salto de linea; los elementos que tomaremos como ejemplos serán

<a href="https://desarrolladoresweb.org">ENLACE DE TEXTO</a>
<img src="gatito.jpg" width="150px" height="100px"/>
<input/>
<code> Pedazo de código</code>

Resultado:

Como podemos observar, los elementos se encuentran en la misma linea, esto ocurre por que son elementos inline, espero que haya quedado claro.

Elementos en bloque BLOCK en HTML

Los elementos de tipo bloque BLOCK son aquellos que se comportan como bloques, cada vez que se presenta un elemento de este tipo se hace un salto de linea de manera predeterminada sin la necesidad de colocar una etiqueta de salto de linea.

Lista de elementos tipo BLOCK en HTML

• <div>.- elemento contenedor.
• <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.- párrafos y textos encabezados.
• <ul>, <ol>, <li>.- los elementos de lista.
• <table>, <tr>, <td>.- elementos de tabla.
• <dl>, <dd>, <dt>.- los elementos de definiciones.
• etc.

Ejemplos de elementos HTML tipo bloque

Un ejemplo nos vendrá muy bien para ver el comportamiento de los elementos html tipo block, en el ejemplo crearemos una serie de elementos como: un titulo principal <h1>, seguido de un párrafo, un subtitulo <h2> y finalmente una lista ordenada de colores:

<h1>Título principal</h1>
<p>Párrafo extenso en el que se explica todo sobre los elementos en línea y en bloque de HTML, además de sus diferencias y cuáles son, es fantástico aprender cosas nuevas todos los días.</p>
<h2>Subtítulo del artículo</h2>
<ol>
  <li>Blanco</li>
  <li>Negro</li>
  <li>Rojo</li>
</ol>

Resultado:

Como se puede observar, los elementos de tipo block se comportan como bloques, sin necesidad de un salto de linea estas empiezan en una nueva linea, note que cada vez que se presenta un elemento HTML de tipo bloque, existe un salto de linea por defecto.

Diferencias entre elementos en linea y bloque en html

Claramente notable, la diferencia es que los elementos html de linea no hacen salto de linea sino continúan en una misma linea si no se especifica un salto de linea, en cambio un elemento de tipo bloque empieza y termina en una linea.

Cabe señalar que dentro de elementos tipo bloque pueden ir otros elementos del mismo tipo y obviamente, también pueden ir elementos de linea dentro de los elementos tipo bloque.

[popup_anything id=»4350″]