Elementos de línea y de bloque

Escrito por Laura Chuburu

Todas las etiquetas del lenguaje HTML se pueden clasificar en etiquetas de línea o de bloque. 

Una etiqueta de línea es aquella que ocupa el espacio mínimo necesario en horizontal, y permite que otro elemento se coloque a su lado. En cambio una etiqueta de bloque, ocupa todo el ancho disponible y no permite que otro elemento se coloque a su lado (aunque aparentemente tenga lugar suficiente).

Etiquetas de línea (las más usadas):

 <a>, <span>, <strong>, <img>, <input>, <code>

Etiquetas de bloque (las más usadas):

<h1>, <h2>, <h3>, <p>, <ul>, <li>, <div>, <header>, <nav>, <section>, <article>, <footer>, <form>, <table>

Ejemplo:

En el ejemplo de arriba los tres enlaces están escritos en etiquetas <a></a>, como son de línea se colocan uno al lado del otro, porque tienen lugar.

En cambio los párrafos, escritos en etiquetas <p></p> aunque sean cortos y tengan lugar al costado, se colocan uno debajo del otro.

Es imprescindible reconocer esta clasificación para poder modificar su apariencia utilizando la propiedad display del lenguaje CSS.