Elementos Inline y Block en HTML

Anterior
Avanzar

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 negrita.
  • <i>.- etiqueta para cursiva.
  • <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:

Elementos en linea INLINE HTML
Imagen de elementos HTML en linea

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

Te recomendamos leer:  Listas en HTML - Cómo crear y poner viñetas

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:

Elementos de tipo boque HTML block
Imagen de elementos tipo BLOCk en Html

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.

Te recomendamos leer:  Atributos en HTML - qué son, para qué sirven y cuáles son

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.

lecciones HTML
Anterior
Avanzar
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Aquí dispones del temario completo del curso para aprender HTML desde cero.

Temario HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML

Aquí dispones del temario completo del curso para aprender HTML desde cero.

Temario HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML