soy Kseso y esto EsCSS

¿Te vendieron “Css semántico”? Te tongaron*

¿Es correcto hablar de semántica en el ámbito de Css? ¿Tiene sentido el pretendido "Css semántico" o sólo es una expresión sin mayor base?

¿Te vendieron “Css semántico”? Te tongaron*

·Por Kseso ✎ 6
*/

Hay dos espadas de Damocles… bueno, menos clásico, hay dos escarapelas que todos buscan y desean colocar a sus webs: accesible y semántica. Y por conseguirlas estmos dispuestos a todo. Que es lo que se lleva ahora. Hasta comulgar con ruedas de molino o echarnos en brazos del primer buhonero que las oferte.

Si con la primera (accesibilidad) hay formas de verificar que funcionan o no los elixires y remedios, con la segunda (semántica) entramos en un terreno propicio para que surjan las setas web y sus setólogos que nos lleven al huerto. Que no necesariamente tiene por qué ser el más conveniente ni fértil... para nosotros.

La semántica

¿Te vendieron “Css semántico”? Te tongaron*
Crédito imagen

Para explicar de forma simple y comprensible qué es la semántica en el desarrollo web déjame traer las palabras de Nicolas Gallagher en su artículo About HTML semantics and front-end architecture [Marzo 2012]:

Acerca de la semántica

La semántica es el estudio de las relaciones entre los signos y símbolos y lo que representan. En lingüística, esto es principalmente el estudio del significado de los signos (tales como palabras, frases o sonidos) en el lenguaje. En el contexto del desarrollo web “front-end”, la semántica tienen que ver principalmente con el significado acordado de elementos HTML, sus atributos y los valores de los atributos (incluyendo extensiones como microdatos).
Estas semánticas convenidas, que suelen estar formalizadas en las especificaciones, se pueden utilizar para ayudar a los programas (y consecuentemente a los humanos) a entender mejor los aspectos de la información en un sitio web. Sin embargo, incluso después de su formalización, la semántica de los elementos, sus atributos y valores de los atributos están sujetos a la adaptación y la cooptación por los desarrolladores. Esto puede conducir a modificaciones posteriores de la semántica convenida formalmente (y es un principio de diseño HTML).

Un ejemplo de esto último, cambios en la semántica de un elemento por su uso, puede ser la naturaleza del elemento cite[1] y el uso extendido que se hace de él, a menudo equiparado a q[2].

Semántica web: continentes y contenidos

Normalmente cuando se habla de web semántica es referido al documento Html por ser el tipo de documento utilizado más usual o común. Pero no único. Hay otros tipos: como Xml.

Resumiento de entrada: la semántica web es la concordancia y correspondencia entre el tipo de elemento (continente), para qué se usa (función) y los datos que contiene (contenido). Recuerda que cada elemento suele portar dos tipos de datos:

  1. los metadatos: información colocada en la etiqueta de apertura y destinados a las máquinas que procesan el documento para su correcto manejo. Como el nombre del elemento, los distintos atributos y sus valores.
  2. La información alojada dentro del elemento (entre la etiqueta de apertura y cierre) destinada al receptor final (razón de su presencia en el documento, repito, as usual). Información dirigida al destinatario final del documento: un humano por lo general. Sería el texto de un párrafo, los datos de una tabla...

Si necesitas ampliar este aspecto te vendrá bien este artículo "No es lo mismo, no da igual, elemento que tag"

Unos casos antisemánticos típicos y paradigmáticos serían:

  • Etiquetar una serie de datos relacionados (estructurados en grupos tabulados) en otro elemento que no fuese table.
  • Crear listas con elementos que no sean ul / ol /dl
  • Convertir con cualquier lenguaje cualquier elemento en un enlace en vez de usar el definido a tal fin con su atributo abligado <a href='

Por otra parte, dentro de esta información trasmitida por los documentos Html podemos clasificarla en dos tipos.

  1. Aquella que está reglada (regulada) y cuya escritura o nomenclatura no admite cambios:
    • El nombre o tipo de elemento: iframe link abbr (curiosidad: los elementos de autor son posibles y funcionales)
    • El nombre o tipo de atributo (casi todos): async style='' onclick=''
    • El valor estandarizado de ciertos atributos: style='declaraciones css válidas' type='text'...
  2. Aquella que es creada o dado un valor a voluntad por quien hace el documento Html.
    • Los contenidos de la web (razón de su existencia) dirigidos al usuario final: contenidos textuales, multimedia...
    • El nombre de ciertos atributos o atributo de autor: data-algo=''
    • El valor de algunos atributos: alt='mi descripción' class='mi-clase'

Lo anterior con independencia de que dicho html exista como tal o sea generado a demanda por algún tipo de programación.

Semántica en el Html

Después de todo lo anterior, podemos decir que la semántica en un documento html se basa en la relación entre los distintos elementos que lo conforman y sus contenidos y entre el valor de ellos y la función que realizan.

Hay distintos aspectos en los que un documento Html debe ser semántico. O dicho de otra manera: para que un documento sea plénamente semántico lo tiene que ser en varios niveles:

  1. El tipo de elemento (marcado html) y la información que contiene para el usuario final.
  2. El nombre asignado al atributo "de autor" y el contenido del elemento
  3. El texto "de autor" de/en los atributos que los admiten y su función.

Para ampliar el punto 1º tienes esta lista de elementos Html5 de MDN. A pesar de la ambigüedad (creo que calculada y a propósito) de HTML5 en la definición de la naturaleza y uso de algunos elementos introducidos por él. Como los article, section o figure.

El 2º y 3º punto los retomamos más adelante.

Css semántico = mística de la piedra filosofal

Antes de ahondar en temas de semántica relacionada con el lenguaje Css no estará de más recordar algunos conceptos y características de este lenguaje.

Css es un lenguaje destinado a las máquinas (aunque legible y comprensible por humanos) y por lo tanto específico e inequívoco, no sujeto a interpretaciones para asegurar su efectividad y correcta interpretación y aplicación por su destinatario (máquina). Esta es la razón de que esté reglado en todos y cada uno de sus aspectos. Esto es, están definidos, estandarizados, todos y cada uno de los componentes que conforman una hoja de estilos. Tanto su sintaxis, términos o expresiones empleados y valores admitidos. Y el no hacerlo así supone un error con unos efectos en función de en qué erremos.

Recuerda, la unidad mínima funcional de una hoja de estilos (documento Css) es la Regla. Que a la vez está compuesta como mínimo por un selector y una declaración, ésta última compuesta a su vez por el nombre de una propiedad y un valor (o múltiples) válido. Se les suele referenciar como bloque de selectores y bloque de declaraciones.

Complementado por aquellos caracteres o grafos obligados (como los corchetes) u opcionales allí donde deben usarse. [Sobre la sintaxis y la terminología propias de Css.]

Semántica en Css

Para ver si es de aplicación el concepto de "semántica" a las hojas de estilo veámoslo por partes.

Bloque de declaraciones

En lo referente al bloque de declaraciones (propiedades y valores) tengo meridianamente claro que no hay nada que hacer por lo expuesto antes. Están regulados todos sus aspectos y definidos todos sus aspectos. Nota: pese a la existencia de user named como las "variables css" y el nombre de las animaciones. Más que otra cosa es la excepción.

Bloque de selectores

En lo relativo a los selectores hay que tener presente que el último documento que los desarrolla Selectors level 4 indexa nada menos que 64 tipos de selectores de acuerdo a su sintaxis.

De todos ellos los únicos no reglados en su valor (cadena textual que lo identifica) son los relacionados con los que usan algún valor de atributos de Html. Como los selectores llamados coloquialmente "selector de clase o de id".

Es en la existencia y el valor de estos dos selectores, principalmente en el de clase, en lo que algunos autores se basan para hablar de la supuesta semántica de Css.

Estos dos selectores podríamos decir que son de autor. Pero no "de autor del css" sino del html. En el ámbito de Css se está obligado a usar el valor del atributo 'class' existente y nominado (dado nombre) en el Html. Sin posibilidad de alteración.

Relación entre el atributo 'class' de Html y el selector de clase de Css

El propósito del atributo class es servir de nexo de unión o gancho que posibilite el acceso al documento html por parte de otros lenguajes. Como Css o Javascript.

Y es en el ámbito de Html donde se crea, existe el atributo y se le asigna un valor. Y es en este momento y ámbito (Html) donde se han de aplicar las recomendaciones y buenas prácticas, entre ellas lo necesario para que sea un valor semántico.

Repito, todo esto sucede en el ámbito del lenguaje Html.

En el campo de Css lo único que se hace es recoger este valor del atributo class, ya existente y más o menos semántico, y utilizar dicho valor "tal cual" para asignar los estilos deseados a los elementos que lo portan.

Esto es más notorio si en vez de usar el selector de clase .miclase {} usamos el selector de atributo [attr] con alguno de sus combinadores:

<!-- tag apertura elemento html --> <nav class='secundario blanco' data-js='toggle'> /* selectores Css para apuntar a este elemento */ nav {} .secundatio {} .blanco {} .secundario.blanco {} [class='secundario blanco'] {} [class~='secundario'] {} [class*='cunda'] {} ... [data-js] {} ...

A la vista de este código está claro que en la parte de html vemos que hay un valor de atributo que sí sería semántico, 'secundario', y otro que no, 'blanco', de acuerdo con el último documento sobre Html5 y semántica del atributo class:

No hay restricciones adicionales sobre los tokens (cadenas textuales) que los autores pueden utilizar en el atributo de la clase, pero se anima a los autores a utilizar los valores que describen la naturaleza del contenido, en lugar de los valores que describen la presentación deseada del contenido.

Así como un atributo 'de autor' con su valor, semánticos en cuanto es fácil intuir la razón de su presencia y finalidad.

En la segunda parte del código, Css, no caben análisis sobre su semántica. Símplemente se hace uso en los selectores de unos componentes creados en el html para afectar al elemento 'nav'.

Este hecho, de usar algo aunque no le pertenezca ni le incumba es más notorio si se ve lo mismo en otros ámbitos o lenguajes.

Como ejemplo, Js usa partes del Html para acceder y actuar en el Html. Para ello tiene reglado el cómo. Equivalente a los selectores de id o clase, javascript hace uso de .getElementById o .getElementsByClassName. Y por ello a nadie he oído disertar sobre js semántico.

Ahondando un poco más. PHP y otros lenguajes tienen la capacidad de generar documentos HTML. Y no por eso hay PHP o Java semánticos y no.

*Disclaimer y aclaración

Con mis disculpas por el uso de un título para el artículo en el que me he tomado tantas libertades. Todo él es una licencia un tanto exagerada. Nadie de quienes conozco que usan la expresión Css semántico o hablan sobre la semántica en el Css van vendiendo nada y mucho menos con ánimo de engañar o tangar (ahora sí bien escrito).

El verbo tongar no existe en español. Sí el sustantivo tongo que lo empleo con el sentido de "apaño" o "arreglo" y que me tomo la libertad de verbalizarlo para que suene similar a tangar (que sí existe). De esta forma, aunque lo aparente, no llamo nada a nadie aunque tú lo hayas pensado ;-)

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso