Diferencias entre atributos ID y CLASS

Si eres de los que han pensado que el atributo ID y el CLASS son iguales, este artículo tiene la intención de mostrar la diferencia que hay entre estos dos atributos HTML. Pero primero veamos qué son.

¿Qué es el ID?

El atributo ID sería como el número de nuestra indentificación personal o el número de pasaporte. En HTML el atributo ID indica el nombre único de un elemento. Este nombre no puede repetirse en un documento HTML, lo que quiere decir que no puede haber dos o más elementos con el mismo ID. Además cada elemento solo pueden tener un solo ID.

Por ejemplo, muchos web sites tienen un encabezado, un menú principal, un contenido y un pie de página, los cuales serían elementos únicos de una página. Si cada una de estas secciones están en un DIV y les asignáramos un ID tendríamos algo así:

<!-- Código HTML -->
<div id="encabezado"></div>
<div id="menu"></div>
<div id="contenido"></div>
<div id="pie-de-pagina"></div>

¿Qué es el CLASS?

Podemos comparar el atributo CLASS con una clase universitaria donde cada estudiante es un elemento que comparten la misma clase, y a su vez, pueden haber estudiantes que tengan más de una clase. De manera similar, en HTML, el atributo CLASS asigna uno o varios nombres a un elemento que pueden repetirse. Un elemento HTML puede tener varios nombres definidos con este atributo.

Un uso común es cuando hacemos menús utilizando UL donde cada LI tiene un estilo gráfico definido a través de CSS, por ejemplo:

/* Código CSS */
li.item {
    background-color: #000;
    color: #DDD;
    padding: 2px 15px;
}

<!-- Código HTML -->
<ul>
    <li class="item first">inicio</li>
    <li class="item">cursos</li>
    <li class="item">portafolio</li>
    <li class="item">acerca</li>
</ul>

En el ejemplo anterior vemos que los cuatros elementos LI son de la misma ‘clase’ (item). Sin embargo, el primer elemento LI pertenece también a una segunda ‘clase’ (first).

Diferencias en pocas palabras.

A este punto podemos decir que el atributo ID es único porque:

• Cada elemento solo puede tener un solo ID.
• Cada página solo puede un elemento con ese ID.

Y el atributo CLASS no es único porque:

• Varios elementos pueden tener la misma clase.
• Los elementos pueden tener varias clases diferentes.