1
00:00:00,750 --> 00:00:06,370
Bueno, ahora vamos a ver el elemento div, ¿vale? D-I-V.

2
00:00:07,469 --> 00:00:14,029
Este elemento antiguamente se utilizaba mucho en HTML porque servía para organizar las páginas web, ¿vale?

3
00:00:14,349 --> 00:00:22,769
Actualmente ya no se utiliza porque se utilizan elementos propios de HTML5 para organizar la página, pero es importante que lo veamos, ¿vale?

4
00:00:23,609 --> 00:00:28,429
Antiguamente, como veis por ejemplo en esta imagen que os pongo en el navegador, ¿vale?

5
00:00:28,429 --> 00:00:48,929
No sé si se estará viendo, un segundito. Ahora, ¿vale? Como veis aquí, para hacer una estructura como la que veis en el navegador, ¿vale? Con una cabecera, una barra de navegación, contenido principal, barra lateral y pie de página, esto se hacía con elementos TIP, con diferentes elementos TIP, ¿vale?

6
00:00:48,929 --> 00:00:59,229
¿Qué pasa? Que cuando evoluciona HTML y llega a HTML5, se crean elementos estructurales, lo que se llaman elementos semánticos propios para esa zona.

7
00:00:59,429 --> 00:01:05,170
Hay un elemento propio para la cabecera, un elemento propio para la barra de navegación, para el contenido principal, etcétera, etcétera, ¿vale?

8
00:01:05,370 --> 00:01:07,989
Que veremos en la siguiente lección.

9
00:01:08,730 --> 00:01:12,129
Pero, aún así, todavía se sigue utilizando DIP.

10
00:01:12,129 --> 00:01:17,810
Principalmente cuando queremos hacer alguna modificación de CSS, ¿vale?

11
00:01:18,090 --> 00:01:22,349
Alguna modificación de estilo para alguna zona concreta, ¿vale?

12
00:01:23,109 --> 00:01:28,010
Por eso es importante que lo veamos y que sepamos que ese elemento div está ahí, ¿vale?

13
00:01:30,060 --> 00:01:33,700
¿Cómo se hace eso? ¿Cómo se genera?

14
00:01:33,700 --> 00:01:36,859
Pues lo mismo, nos vamos a ir a nuestra brackets, ¿vale?

15
00:01:36,980 --> 00:01:42,359
Vamos a guardar un archivo, yo lo he llamado elementos-div.html, ¿vale?

16
00:01:42,359 --> 00:01:55,659
Y simplemente nos creamos una página web, como siempre, html 2.5, y vamos a llamarlo a esto, bloque genérico de contenido, ¿vale?

17
00:01:56,180 --> 00:02:06,719
Y vamos a poner, y aquí dentro simplemente lo que vamos a poner es una etiqueta div, ¿vale?

18
00:02:06,719 --> 00:02:10,939
Y dentro de esa etiqueta div vamos a poner una etiqueta pen, ¿vale?

19
00:02:11,580 --> 00:02:14,360
Y ponemos un texto lorem, un texto aleatorio, ¿vale?

20
00:02:14,719 --> 00:02:21,120
Para que emet nos genere automáticamente texto aleatorio ponemos lorem y le damos al tabulador, ¿vale?

21
00:02:21,120 --> 00:02:25,659
Y veis que nos ha generado un párrafo completamente automático.

22
00:02:26,120 --> 00:02:29,719
Y ahora aquí ponemos otra etiqueta p de la misma forma, ¿vale?

23
00:02:30,900 --> 00:02:31,840
Uy, me he equivocado.

24
00:02:31,840 --> 00:02:47,319
Entonces, si nosotros nos fijamos, estéticamente no hay mucha diferencia a lo que hacíamos antes,

25
00:02:47,319 --> 00:02:49,780
porque realmente no la hay, estéticamente no la hay.

26
00:02:50,300 --> 00:02:54,919
Pero sí es importante, o sí la hay, de cara a los navegadores, ¿vale?

27
00:02:54,919 --> 00:03:06,080
Los navegadores sí que procesan mucho mejor la información HTML5 cuando se utilizan los elementos estructurales que vamos a ver en la siguiente lección, en el siguiente vídeo, ¿vale?

28
00:03:06,500 --> 00:03:09,780
Entonces, quiero hacer especial hincapié a eso, ¿vale?

29
00:03:09,960 --> 00:03:15,300
Que el div, aunque no es imprescindible, se utiliza, ¿vale?

30
00:03:15,699 --> 00:03:19,860
Pero que tenemos que utilizar los elementos propios de HTML5, ¿vale?

31
00:03:19,860 --> 00:03:26,539
Cuando nosotros hagamos modificaciones en el estilo sobre un determinado div, ¿vale?

32
00:03:27,280 --> 00:03:30,879
Aquí dentro añadiremos los atributos class, ¿vale?

33
00:03:31,259 --> 00:03:33,060
O los atributos id, ¿vale?

34
00:03:33,479 --> 00:03:38,280
Pero esto vamos a hacer más hincapié sobre ello cuando veamos hojas de texto, ¿vale?

35
00:03:40,969 --> 00:03:46,870
Bueno, pues espero que haya quedado claro lo que es el elemento div y ahora empezaremos con los elementos semánticos estructurales.