A. El elemento `div`

Es un elemento sin significado que agrupa otros elementos.
Puede usarse con los atributos class, lang y title para definir la semántica común a un grupo de elementos consecutivos.
Puede usarse en un elemento dl para envolver grupos de elementos dt y dd.
Se recomienda que el elemento div se utilice como último recurso cuando no se pueda usar ningún otro elemento.
El uso de elementos más apropiados propicia una mejor accesibilidad para lectores y un mantenimiento más fácil para los autores.

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>

<head>

content="width=device-width">

<style>

div {

color: chocolate;

}

</style>

</head>

<body>

<div>Un div simple.</div>

<div>Otro div simple.</div>

<p>Un párrafo simple.</p>

<p>Otro párrafo simple.</p>

</body>

</html>

Solo para los más rudos

La especificación técnica del elemento div está en https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element

B. El elemento `span`

Es un elemento de fraseo sin significado.
Puede usarse con los atributos globales, por ejemplo class, lang o dir.
Se recomienda que el elemento span se utilice como último recurso cuando no se pueda usar ningún otro elemento.
El uso de elementos más apropiados propicia una mejor accesibilidad para lectores y un mantenimiento más fácil para los autores.

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>

<head>

content="width=device-width">

<style>

span {

color: magenta;

}

</style>

</head>

<body>

<p>

Hola,

Más texto

</p>

<p>Otro párrafo simple.</p>

</body>

</html>

Solo para los más rudos

La especificación técnica del elemento span está en https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-span-element

D. El valor `none`

El elemento completo, incluyendo todo su contenido, el contenido de su contenido y así sucesivamente no se muestra, incluyendo texto y cajas.

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>

<head>

content="width=device-width">

<title>inline</title>

<style>

div {

display: none

}

</style>

</head>

<body>

<p>Ahora me ves.</p>

<div>Ahora no me ves.</div>

</body>

</html>

E. El valor `inline`

Solo contiene elementos de tipo inline, inline-block y texto.
De forma predeterminada, los elementos de fraseo como span, em, del, o strong tienen este tipo de despliegue, pero se puede cambiar.
El contenido se despliega de forma horizontal, uno tras otro. Si llega al final del elemento padre más próximo que sea block o inline-block, continuá al inicio del siguiente renglón.

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>

<head>

content="width=device-width">

<title>inline</title>

<style>

p {

display: inline;

color: olive

}

</style>

</head>

<body>

<div>

El texto es inline.

<span>El span es inline.</span>

<p>

Este párrafo es forzado a ser

inline.

</p>

<em>

Esto es texto con énfasis.

</em>

Esto es texto con énfasis

fuerte.

</strong>

Más texto.

</div>

</body>

</html>

F. El valor `block`

Contiene elementos de cualquir tipo de despliegue.
De forma predeterminada, los elementos de agrupamiento como p, header footer o div tienen este tipo de despliegue, pero se puede cambiar.
Si contiene solo elementos de despliegue inline, inline-block y texto, estos se despliegan de forma horizontal uno tras otro, iniciando en la parte superior del elemento. Si llega al final de un renglón, continuá al inicio del siguiente.
Si contiene solo elementos de despliegue block, estos se despliegan de forma vertical uno tras otro, utilizando todo el ancho permitido por el elemento que los contiene.
Si contiene mezclados elementos inline, inline-block, texto y block, los inline, inline-block y textos consecutivos se agrupan en una caja de tipo block imaginaria y se aplica el despliegue cuando todos los elementos son de tipo block.

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>

<head>

content="width=device-width">

<title>block</title>

<style>

div {

background-color: yellow;

}

</style>

</head>

<body>

<h1>block</h1>

<p>

En este ejemplo, body solo

tiene elementos de bloque.

</p>

<p>

Este párrafo solo tiene contenido

inline e inline-block.

<em>Un énfasis inline.</em>

Un botón inline-block,

inline-block, inline-block

</button>

<span>

Un span inline, inline, inline,

inline.

</span>

</p>

<div>

Este div tiene contenido

mezclado.

<em>

Este es un énfasis inline.

</em>

Este es un strong inline.

</strong>

Este es un botón inline-block

</button>

<p>

Este párrafo solo contiene

inline e inline-block.

<em>Un énfasis inline.</em>

Un botón inline-block

</button>

<span>Un span inline.</span>

</p>

</div>

</body>

</html>

G. El valor `inline-block`

El nombre de este tipo de despliegue está por cambiar.
De forma predeterminada, los elementos de formulario como button, o input tienen este tipo de despliegue, pero se puede cambiar.
Su contenido sigue las reglas de un display block.
Sus padres lo ven como un elemento inline, pero el elemento ocupa un solo renglón del elemento padre más próximo que sea block o inline-block.

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>

<head>

content="width=device-width">

<title>inline-block</title>

<style>

span {

display: inline-block;

background-color: yellow;

}

</style>

</head>

<body>

<p>

Texto, texto, texto

<span>

Este es un span forzado a ser

inline-block, inline-block,

inline-block, inline-block.

</span>

Este es un botón inline-block,

inline-block, inline-block.

</button>

</p>

</body>

</html>

H. Resumen

En esta lección se introdujeron los siguientes conceptos:
- El elemento div.
- El elemento span.
- La propiedad display.
- El valor none.
- El valor inline.
- El valor block.
- El valor inline-block.

6. La propiedad `display`

A. El elemento `div`

Ejemplo

Salida

Solo para los más rudos

B. El elemento `span`

Ejemplo

Salida

Solo para los más rudos

C. La propiedad `display`

D. El valor `none`

Ejemplo

Salida

E. El valor `inline`

Ejemplo

Salida

F. El valor `block`

Ejemplo

Salida

G. El valor `inline-block`

Ejemplo

Salida

H. Resumen

6. La propiedad display

A. El elemento div

Ejemplo

Salida

Solo para los más rudos

B. El elemento span

Ejemplo

Salida

Solo para los más rudos

C. La propiedad display

D. El valor none

Ejemplo

Salida

E. El valor inline

Ejemplo

Salida

F. El valor block

Ejemplo

Salida

G. El valor inline-block

Ejemplo

Salida

H. Resumen

6. La propiedad `display`

A. El elemento `div`

B. El elemento `span`

C. La propiedad `display`

D. El valor `none`

E. El valor `inline`

F. El valor `block`

G. El valor `inline-block`