Elementos HTML en bloque y en línea

← Diseño Web ⌂ Home

Elementos en bloque

Un elemento de bloque siempre comienza en una nueva línea y ocupa todo el ancho disponible (se extiende hacia la izquierda y hacia la derecha todo lo que pueda).

Algunos elementos de bloque en HTML

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>

Elementos en línea

Un elemento en línea no comienza en una nueva línea y solo ocupa el ancho que sea necesario.

Algunos elementos en línea de HTML

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

El elemento <div>

El elemento <div> se usa a menudo como un contenedor para otros elementos HTML.

<div>
  <h2>Título de la sección</h2>
  <p>Texto de la sección</p>
</div>

El elemento <span>

El elemento <span> se usa a menudo como un contenedor para algún texto.

<h1>Mi <span>texto</span> importante</h1>

NOTA: más adelante, con ayuda de los atributos style, class y id, tendrá más sentido usar un div o span.