H. HTML correcto y accesible

5.3. Identificadores y clases

Identificadores

Veremos claramente cómo se definen y para qué sirven con ejemplos:

<div id="cabecera">
    Contenido de la cabecera de mi web.
</div>
<div id="contenido">
    Contenido central de mi página.
</div>
<div id="pie">
    Pie de página.
</div>

Como vemos, hemos dado un identificador (id) a cada capa (ojo: un identificador debe ser SIEMPRE único; no puede haber dos iguales en una misma página). Luego, con CSS, podremos hacer que cada capa tenga una apariencia diferente. Ya veremos cómo.

Clases

Además de identificadores, podríamos usar clases.

Ejemplo: imaginemos que nuestro contenido tiene tres noticias que compartirán apariencia. Podríamos hacer:

<div id="contenido">
    <div class="noticia">
        Contenido de la noticia.
    </div>
    <div class="noticia">
        Contenido de la noticia.
    </div>
    <div class="noticia">
        Contenido de la noticia.
    </div>
</div>

Las clases sirven para identificar elementos con características comunes.

Si queremos distinguir una noticia de otra, podemos dar un identificador a cada una.

Ejemplo:

<div id="contenido">
    <div class="noticia" id="noticia-1">
        Contenido de la noticia.
    </div>
    <div class="noticia" id="noticia-2">
        Contenido de la noticia.
    </div>
    <div class="noticia" id="noticia-3">
        Contenido de la noticia.
    </div>
</div>

Cuando veamos cómo utilizar CSS, veremos lo práctico que es esto. Podríamos decir, por ejemplo: “que todas las noticias tengan fondo negro y texto blanco, excepto la noticia 3, que debe tener fondo amarillo y letras negras”.

• La clase “noticia” nos permitirá lo primero (que todas compartan colores de fondo y de texto).
• El identificador nos permitirá hacer una definición especial que se salte la regla general.

Incluso podríamos hacerlo de otra forma:

<div id="contenido">
    <div class="noticia impar">
        Contenido de la noticia.
    </div>
    <div class="noticia par">
        Contenido de la noticia.
    </div>
    <div class="noticia impar">
        Contenido de la noticia.
    </div>
</div>

Como vemos, un elemento puede tener más de una clase. En este caso, hay varias noticias, pero unas son pares y otras son impares. En nuestro CSS podríamos decir, por ejemplo: “que las noticias tengan fondo negro y texto blanco, y que las noticias pares tengan fondo amarillo y letras negras”. De esta forma, todas las noticias pares compartirían apariencia.

Todas esas definiciones de apariencia las haremos con CSS. Aprenderemos a hacerlo muy pronto.

• No solo las capas pueden tener identificadores y clases, por supuesto; también las imágenes, los párrafos, los listados...
• Es importante que los identificadores y clases hagan referencia a su contenido, no a su apariencia. Esto se comprende mejor con un ejemplo: hemos quedado en que podemos decir "que la capa A tenga fondo rojo" utilizando CSS. Si luego quiero que sea azul, y he llamado a mi capa "capa-roja", no tendría mucho sentido. Además, lo importante es el contenido: debemos estructurarlo correctamente y llamar a las cosas por su nombre ("menu" al menú, "contenido" al contenido, etc.). Estaremos aportando información adicional sobre la estructura de nuestro documento.
• Debemos recordar que los identificadores deben ser únicos, y que no pueden combinarse. Este identificador no sería válido: "noticia par". Este sí: "noticia-1". Las clases sí pueden combinarse, y varios elementos pueden tener la misma clase.
• Ni los identificadores ni las clases pueden empezar por guión o por un número.