En este post os voy a hablar de los atributos globales id y class, estos atributos son comunes en todas las etiquetas HTML y a ellos podemos hacer referencia desde CSS y JavaScript.
A pesar que las etiquetas estructuras de HTML5 ya fueron creadas para un propósito específico dentro de nuestra página, no quiere decir que sólo se deban utilizar una sola vez en cada uno de nuestros documentos.
Un ejemplo podría ser las etiquetas <section> o <aside>, que podrían utilizarse más de una vez en la página. Como diversas secciones de noticias que tengamos. O una barra lateral que a su vez tenga otra barra lateral.
Como todo esto podría llegar a ser un poco caótico, el lenguaje nos provee de dos atributos globales llamados id y class, se llaman así porque estos atributos están compartidos por todas las etiquetas del HTML, es decir, todas pueden tener estos atributos.
DNI único de los elementos o id
El atributo id es un identificador único que no se puede repetir en ningún otro lugar de la página. Es decir, si tenemos un site con 5 páginas, podemos tener un mismo id en cada una de las páginas, pero no repetirse en la misma, ya que supondría muy ambiguo a la hora de asignar dinamismo a través de JavaScript. Imaginad que hubiera más de una persona con el mismo DNI, sería un follón, ¿verdad?
Como es un identificador único, podemos hacer referencia desde nuestros documentos CSS y JavaScript externos sin ninguna ambigüedad. Aunque en un archivo CSS se puede utilizar una referencia al identificador id, lo más utilizado es hacer referencia desde los documentos JavaScript.
<p id ='parrafo-central'>Esto es un párrafo en medio de la página</p>
Este elemento <p> tiene el atributo id = 'parrafo-central', para dar algún estilo, dígase tipo de letra, color, tamaño, etc… O cambiar su contenido de forma dinámica mediante JavaScript, debemos hacer referencia mediante su identificador, o dicho de otra forma, por su DNI.
Clase de estilos o class
El atributo class representa una clase concreta con un tipo de estilos. Es decir, por poner un ejemplo, tenemos un grupo de personas que estudian en una academia. En esa academia se estudian tres áreas; matemáticas, economía y inglés. Por lo que para diferenciarlas se decide que los de la clase de mates, vayan vestidos de color rojo, los de economía de verde y los de inglés de azul. Además, en cada una de las clases hay tanto hombre como mujeres, y se decide que los hombres lleven gorra y las mujeres pamela. ¡Bastante hortera las pintas!
Crearíamos en CSS 5 clases diferentes, matematicas, economia, ingles, hombre y mujeres para darles los estilos concretos a cada uno de los subgrupos. La idea del atributo class es reunir una serie de atributos visuales para asignárselos a ese grupo. En nuestro caso concreto de la gorra de los hombres, se puede asignar la gorra a todos los hombres, ya sean de la asignatura que sea.
<p class = 'matematicas hombres'>Somos los chicos que estudiamos mates</p>
<p class = 'matematicas mujeres'>Somos las chicas que estudiamos mates</p>
<p class = 'economia hombres'>Somos los chicos que estudiamos economía</p>
<p class = 'economia mujeres'>Somas las chicas que estudiamos economía</p>
<p class = 'ingles hombres'>Somos los chicos que estudiamos inglés</p>
<p class = 'ingles mujeres'>Somos las chicas que estudiamos inglés</p>
Cada uno de los parágrafos tiene asignada una clase que diferencia la asignatura y a la vez si son hombre o mujeres. En este caso sólo tendremos que definir 5 clases diferentes, una por cada asignatura, otra para hombre y otra para mujeres.
Conclusión de uso
Por lo que, normalmente y como regla general, utilizaremos las clases, es decir, el atributo class, para atacar a los elementos HTLM para dar estilos con los archivos CSS y el identificador id, para atacar a los elementos HTML desde los archivos de JavaScript para ofrecer interactividad.
Deja una respuesta