Agrupando Elementos

Ahora que conoces las principales etiquetas Html que vas a poder necesitar para hacer una página web y tras haberte comentado unas cien veces que en el Html no deberíamos colocar nada de código que tenga que ver con la estética de sus elementos (anchuras, colores, fondos, márgenes, etc, etc) toca el turno de presentaros estas dos maravillosas etiquetas, <div> y <span>.

Y por qué te digo esto? Por que esas dos etiquetas son las encargadas de agrupar uno o varios elementos de una web y de darles un identificador, que usaremos luego en la hoja de estilos CSS para relaccionarlos. Me explico mejor con un ejemplo, oki? je je je.

Imagina que quiero crear una lista de elementos como vimos páginas atrás. Pero queremos que tenga una imagen de fondo que tenemos por ahí guardada, y queremos darle cierta anchura, y un borde de color marrón que sea un poquito ancho, y ya puestos que el tamaño de sus textos sea pequeñito y... y muchas cosas más. Como ves, todo esto son detalles estéticos y según mis recomendaciones no deben definirse dentro del código Html. Correcto?

Todos esos detalles los vamos a definir en un archivo aparte, no en el archivo .html de la página web sino en lo que llamaremos hoja de estilos, un pequeño archivo con extensión .css que ya veremos en el curso de estilos más adelante.

Pero cómo podría saber el navegador que nuestra querida lista ha de tomar todos esos estilos o detalles? Ahí es donde aparecen nuestras nuevas amigas, las etiquetas <div> y <span>. Con ellas podremos, en el código Html, darle un nombre a esa lista. Así, cuando el navegador la vea en nuestra web, verá que tiene un nombre y buscará qué estilos han de tener las listas con ese nombre en la hoja de estilo. El navegador leerá esos estilos o detalles y se los aplicará a la lista, quedando tal y como la queríamos. Genial, no?

Ahora estamos en el curso de Html, de modo que no profundizaremos mucho en los estilos. Te sobra con saber que para asignarle nombres a elementos o grupos de elementos del Html y poder darle estilos, usaremos las etiquetas <div> y <span>. Veamos cómo se hace en las páginas siguientes.