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


1	<!DOCTYPE html>
2	<html lang="es">
3	<head>
4	<meta charset="UTF-8">
5	<meta name="viewport"
6	content="width=device-width">
7	<title>div</title>
8	<style>
9	div {
10	color: chocolate;
11	}
12	</style>
13	</head>
14	<body>
15	<div>Un div simple.</div>
16	<div>Otro div simple.</div>
17	<p>Un párrafo simple.</p>
18	<p>Otro párrafo simple.</p>
19	</body>
20	</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.


1	<!DOCTYPE html>
2	<html lang="es">
3	<head>
4	<meta charset="UTF-8">
5	<meta name="viewport"
6	content="width=device-width">
7	<title>span</title>
8	<style>
9	span {
10	color: magenta;
11	}
12	</style>
13	</head>
14	<body>
15	<p>
16	Hola,
17	<span>este es un span.</span>
18	Más texto
19	<span>otro span.</span>
20	</p>
21	<p>Otro párrafo simple.</p>
22	</body>
23	</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

C. La propiedad `display`

Indica la forma en que un elemento se depliega.
La definición oficial de esta propiedad está en proceso de cambio. Aqupi se muestran los valores que funcioan mejor al momento de escribir estas notas.
El contenido de texto no tiene la propiedad display.
Esta propiedad no afecta la semántica de los elementos, pero si puede cambiar como se despliegan.
En las diapositivas siguientes se explican algunos de los valores posibles.

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.


1	<!DOCTYPE html>
2	<html lang="es">
3	<head>
4	<meta charset="UTF-8">
5	<meta name="viewport"
6	content="width=device-width">
7	<title>inline</title>
8	<style>
9	div {
10	display: none
11	}
12	</style>
13	</head>
14	<body>
15	<p>Ahora me ves.</p>
16	<div>Ahora no me ves.</div>
17	</body>
18	</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.


1	<!DOCTYPE html>
2	<html lang="es">
3	<head>
4	<meta charset="UTF-8">
5	<meta name="viewport"
6	content="width=device-width">
7	<title>inline</title>
8	<style>
9	p {
10	display: inline;
11	color: olive
12	}
13	</style>
14	</head>
15	<body>
16	<div>
17	El texto es inline.
18	El texto es inline.
19	El texto es inline.
20	El texto es inline.
21	El texto es inline.
22	<span>El span es inline.</span>
23	<p>
24	Este párrafo es forzado a ser
25	inline.
26	</p>
27	<em>
28	Esto es texto con énfasis.
29	</em>
30	<strong>
31	Esto es texto con énfasis
32	fuerte.
33	</strong>
34	Más texto.
35	Más texto.
36	Más texto.
37	Más texto.
38	</div>
39	</body>
40	</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.


1	<!DOCTYPE html>
2	<html lang="es">
3	<head>
4	<meta charset="UTF-8">
5	<meta name="viewport"
6	content="width=device-width">
7	<title>block</title>
8	<style>
9	div {
10	background-color: yellow;
11	}
12	</style>
13	</head>
14	<body>
15	<h1>block</h1>
16	<p>
17	En este ejemplo, body solo
18	tiene elementos de bloque.
19	</p>
20	<p>
21	Este párrafo solo tiene contenido
22	inline e inline-block.
23	<em>Un énfasis inline.</em>
24	<button>
25	Un botón inline-block,
26	inline-block, inline-block
27	</button>
28	<span>
29	Un span inline, inline, inline,
30	inline.
31	</span>
32	</p>
33	<div>
34	Este div tiene contenido
35	mezclado.
36	<em>
37	Este es un énfasis inline.
38	</em>
39	<strong>
40	Este es un strong inline.
41	</strong>
42	<button>
43	Este es un botón inline-block
44	</button>
45	<p>
46	Este párrafo solo contiene
47	inline e inline-block.
48	<em>Un énfasis inline.</em>
49	<button>
50	Un botón inline-block
51	</button>
52	<span>Un span inline.</span>
53	</p>
54	</div>
55	</body>
56	</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.


1	<!DOCTYPE html>
2	<html lang="es">
3	<head>
4	<meta charset="UTF-8">
5	<meta name="viewport"
6	content="width=device-width">
7	<title>inline-block</title>
8	<style>
9	span {
10	display: inline-block;
11	background-color: yellow;
12	}
13	</style>
14	</head>
15	<body>
16	<p>
17	Texto, texto, texto
18	<span>
19	Este es un span forzado a ser
20	inline-block, inline-block,
21	inline-block, inline-block.
22	</span>
23	<button>
24	Este es un botón inline-block,
25	inline-block, inline-block.
26	</button>
27	</p>
28	</body>
29	</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.

7. 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

7. 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`