Elementos a nivel de bloque

Los elementos en HTML (Lenguaje de marcada para hipertextos - Hypertext markup language) usualmente son bien elementos a "nivel de bloque" o bien elementos "en línea". Un elemento a nivel de bloque ocupa el espacio entero de su elemento padre (el contenedor), creando así un "bloque." Este artículo ayuda a explicar lo que esto significa.

Los navegadores típicamente presentan los elementos a nivel de bloque con un salto de línea antes y después del elemento .

Elementos de bloque

HTML

<p>Este párrafo es un elemento en-bloque, su fondo ha sido coloreado para mostrar el padre del párrado</p>

Este párrafo es un elemento en-bloque, su fondo ha sido coloreado para mostrar el padre del párrado

CSS

p { background-color: #8ABB55; }

Uso

Los elementos de bloque sólo deben aparecer dentro del elemento<body>.

Elmentos en bloque vs en línea

La diferencia entre elementos en-línea y en-bloque son:

Formato:: Por defecto, los elementos en-bloque comienzan en una nueva linea.
Modelo de contenido: Generalmente ,los elementos en-bloque pueden contener elementos en-línea y otros elementos en-bloque. Inherentes dentro de esta distincion de estructura es la idea de que los elementos en-bloque crean estructuras más grandes que los elementos de linea.

La distincion entre elementos en-bloque vs elementos en-línea es utilizada en las especificaciones HTML hasta la 4.01. En HTML5, esta distición binaria es reemplazada por un conjunto más completo de categorias de contenido. La categoría de "en-bloque" se corresponde aproximadamente con la categoría de contenido dinámico en HTML5, mientras que "en-línea" se corresponde con el contenido de de pharsing , pero hay categorías adicionales.

Elementos

La siguiente es una lista completa de todos los elementos en-bloque de HTML (aunque "en-bloque" no se define técnicamente para los elementos que son nuevos en HTML5).

<address>: Información de contacto.
<article> HTML5: Contenido de Articulo.
<aside> HTML5: Contenido adicional
<audio> HTML5: Reproductor de audio
<blockquote>: BLoque de "citaa"
<canvas> HTML5: Lienzo de Dibujo
<dd>: Descripción de definición.
<div>: División de documento.
<dl>: Lista de definición
<fieldset>: Etiqueta de conjunto de campos
<figcaption> HTML5: Figura.
<figure> HTML5: Grupos contenido multimedia con una leyenda (ver <figcaption>).
<footer> HTML5: Sección o pie
<form>: Formulario de entrada
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Niveles de cabecera (1-6)
<header> HTML5: Sección o cabecera de página
<hgroup> HTML5: Información de cabeceera de grupos.
<hr>: Regla Horizontal (línea divisoria)
<li>: Elemento de lista.
<main>: Engloba el único contenido central del documento.

Elementos en-línea

Los elementos en HTML (Lenguaje de marcado para hipertextos - Hypertext Markup Language) usualmente son bien elementos "en línea" o bien elementos a "nivel de bloque". Un elemento en línea ocupa sólo el espacio acotado por las etiquetas que lo definen. El siguiente ejemplo demuestra la influencia de un elemento en línea:

Ejemplo en línea

HTML

<p>This <span>span</span> is an inline element; its background has been colored to display both the beginning and end of the inline element's influence</p>

CSS

span { background-color: #8ABB55; }

Inline vs. block-level

Modelo de contenido: Generalmente, los elementos en-línea, sólo pueden contener algún dato u otros elementos en-línea.
Formato: Por defecto, los elementos en-línea no empiezan con un retorno de carro (nueva línea) .

Elementos

Los siguientes elementos son "inline":

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