LLAMANOS: 994548099 / RPM #994548099 / RPC 976205506

Diferencias entre los DIVs y las Clases

Las diferencias entre DIVs y Clases son bastante notorias. Este artículo explicará cuando deben usarse unas en lugar de las otras.

IDs y Clases

Muchos nuevos diseñadores web no estan al tanto de las diferencias entre DIVs y Clases. Por esta razón les mostraremos en este artículo el uso apropiado así como los inapropiados de ambos.

IDs, que son y  and What Theyre Used For

ID, abreviatura de identificador, es un excelente atributo que puede ser fácilmente usado de manera equivocada. Primero que nada debemos señalar que solo puede usarse una vez un identificador en un documento XHTML o HTML. Duplicar un ID puede causar problemas de validación y puede ocasionar errores cuando use javascript en el documento. De manera más sencilla, un ID es un identificador que dice AQUI ESTOY y debe ser único para cada elemento

Los navegadores usan también lo que se conoce como identificadores fragmentados. Es decir, si deseas colocar un enlace a una porción determinada dentro de una página de manera tal que al hacer click al enlace la página se desplace hasta ese fragmento lo que debe hacer es colocarle un ID a ese fragmento y luego hacer el enlace de esta manera:

  1. <a href="#contenido">Ir al fragmento deseado</a>

Naturalmente, mediante CSS puede aplicar estilos a estos IDs usando el caracter #, pero JavaScript relies on IDs quite a bit as well. The getElementById() function is very important in most scripts.

Classes

Classes, like IDs, can also be used to in JavaScript scripts, but unlike IDs, they can be used multiple times in the same HTML document. This separation of content from presentation is what makes sites powered by CSS more robust, but some dont know the full extent to which they can use classes. Classes can not only be used more than once, but more than one can be used on an element:

  1. .left {
  2.     float: left;
  3. }
  4. .larger p {
  5.     font-size: 125%;
  6. }
  1. <div class="left larger">
  2.     <p>A tiny bit of content.</p>
  3. </div>

The second piece of code is perfectly valid HTML, it demonstrates a div using two separate classes. This technique can reduce your CSS style sheet considerably when used effectively. Its also worth noting that you can use both IDs and classes on the same HTML element.

When to Use One or the Other

I take a different stance than most web designers when it comes to using IDs and classes. The vast majority of CSS coders use IDs for any elements that are simply used once on a page. However, I only use classes to style my websites, but, when I want to use an element in JavaScript, I use an identifier. From a presentational standpoint, styling elements with classes looks exactly the same as styling them with IDs, but the flexibility of classes offers a certain appeal even if I dont plan on using a class more than once on a page. Also, when I see an ID in my XHTML, it reminds me that there is some JavaScript that refers to that element.

Its up to you, but so long as you implement classes and IDs properly, it is more or less a matter of personal choice when to utilize one or the other.