Contenido y Presentación, Clases e Identificadores

Hace un par de días me escribió un lector de EFH para preguntarme la diferencia entre id y class. Según mi experiencia en capacitaciones a equipos de diseño y clases en la universidad puedo decir que éste es uno de los conceptos que más cuesta asimilar cuando comienzas a trabajar en el esquema de HTML/CSS. Por lo tanto, aquí va mi aporte para aclarar las dudas.

Presentación y Contenido

Lo primero que tenemos que entender es que la idea tras el uso de CSS, es separar el diseño o presentación, del contenido. Esto suena simple pero es un concepto que toma tiempo dimensionar. Partamos por hacer algunas definiciones.

¿Qué es presentación? Todo aquello que sea una característica visual es presentación. Colores, espaciado, alineamiento, fuentes, tamaños, disposición, etc., son todos factores de diseño, que nada tienen que ver con el contenido.

Por otro lado, ¿qué es el contenido? Es el motivo para crear una página. Es el texto, imágenes y otros medios de los que trata un documento. Sí, dije imágenes y no fue un error. Hay que hacer una distinción importante, sin embargo: algunas imágenes son contenido, otras son presentación. Son fáciles de diferenciar, por ejemplo, la fotografía que acompaña a una noticia es contenido, porque aporta información y lo complementa. Una imagen usada como bullet en una lista es presentación, porque no aporta información al contenido, aunque haga la lectura más fácil o permita diferenciar los elementos que destaca.

Pero en el contenido hay un elemento subyacente que es clave para la separación real de contenido y presentación. Se trata de la estructura.

Estructura del Contenido

El contenido no sólo es el texto y los medios que constituyen la información. También es parte del contenido la estructura interna de éste. Esta estructura está dada por los tipos de datos, las relaciones internas y la jerarquía. Aquí es donde entra HTML.

HTML es un lenguaje de marcado, o para ser más claros, de descripción de contenidos. Cada elemento dentro de HTML está compuesto de dos partes: su contenido y la semántica. Veamos el siguiente ejemplo:

<h3>Estructura del Contenido</h3>

En este caso, el contenido es Estructura del Contenido, pero eso no es todo. Por sí sola, esa frase no tiene contexto ni otro tipo de información adicional, es sólo texto. Pero el hecho de estar encerrada en el elemento H3 de HTML entrega la información restante: este elemento es un título de tercer nivel, por lo tanto es un texto importante, es más importante que un párrafo, y probablemente define el contenido que sigue después de él. Pero es menos importante que un H2 o un H1, que definen contenido de mayor alcance dentro del documento.

Del mismo modo, cada elemento en HTML, y en mayor medida en XHTML, que busca depurar el vocabulario para eliminar los elementos de presentación, tiene un significado preciso. Sólo por nombrar algunos, A define el contenido como un vínculo y sus atributos hablan del destino (href), descripciones (title), idioma (lang), etc., STRONG y EMindican peso y énfasis, y así con los demás elementos.

Class y ID

En HTML y XHTML los atributos son información adicional que se aplica a los elementos. Por ejemplo, en el elemento IMG el atributo src indica la fuente o source para la imagen, su ubicación. Este atributo es específico para el elemento IMG, del mismo modo muchos elementos tienen atributos exclusivos. Pero hay otros que son globales y pueden ser aplicados a prácticamente cualquier elemento.

Dos de estos atributos comunes son id y class.

El atributo id permite identificar de modo único a un elemento dentro de un documento. De hecho id es la abreviación de identificador. Por lo tanto, sólo puede haber un único elemento con un identificar determinado. Por ejemplo, si un elemento tiene un id con valor post-225 (id="post-225"), no podrá existir otro elemento en el documento que se llame igual.

El atributo class, en cambio, define la clase o tipo de un elemento. Por ejemplo, si observamos que frecuentemente utilizamos notas al pie en nuestros documentos, podemos crear una clase que se llame nota. Y la asociaremos a párrafos (P) que utilicemos para las notas:

<p class=”nota”>Esta es una nota al pie de página.</p>

Por definición, podemos asociar una clase a muchos elementos dentro de un documento, en cada caso estaremos diciendo: este elemento es de la clase o tipo X.

Como verás, la diferencia ahora es evidente. ¿Pero cómo uso esto para aplicar presentar el contenido con CSS? Eso lo explicaré en el próximo post con más detalle.