Semántica en programación: por qué el "significado" del código importa tanto como su funcionamiento
Cuando programamos, no solo escribimos instrucciones que una máquina ejecuta: también comunicamos intenciones a otras personas (y a nuestro yo futuro). Ahí es donde entra la semántica: el significado o propósito de una pieza de código, más allá de lo que hace técnicamente o de cómo se ve.
En este artículo repasamos qué significa "escribir con semántica" en tres contextos distintos —JavaScript, CSS y HTML— con ejemplos concretos en cada uno.
¿Qué es la semántica, exactamente?
La semántica responde a preguntas como:
¿Qué efecto tiene ejecutar esta línea de código?
¿Qué rol o función cumple este elemento dentro de la página?
Es distinto de preguntar "¿qué aspecto tiene esto?", que es una cuestión de presentación, no de significado.
Semántica en JavaScript
En JavaScript, los nombres que elegimos para funciones y variables son la principal herramienta semántica de la que disponemos, porque el lenguaje no impone una estructura de "significado" como sí lo hace HTML.
Imaginemos una función que recibe un string y devuelve un elemento <li> con ese texto como contenido:
function createLiWithContent(text) {
const li = document.createElement('li');
li.textContent = text;
return li;
}
Comparemos esa llamada con esta otra, que hace exactamente lo mismo:
function build(text) {
const item = document.createElement('li');
item.textContent = text;
return item;
}
Ambas funciones son idénticas en comportamiento. Pero al leer createLiWithContent('Melocotón') sabemos de inmediato qué hace, sin necesidad de abrir la definición de la función. build('Melocotón'), en cambio, no nos dice nada por sí sola: podría estar construyendo cualquier cosa. Ese es el valor de nombrar con semántica: reduce la carga cognitiva de quien lee el código.
Ejemplo adicional en JavaScript: variables booleanas
Otro caso común ocurre al nombrar banderas (flags) o estados. Un nombre poco semántico como let v = true; nos deja a ciegas. En su lugar, un nombre semántico como let isUserAuthenticated = true; comunica instantáneamente la regla de negocio que representa.
Semántica en CSS
En CSS ocurre algo parecido con los selectores. Supongamos que queremos aplicar estilos a una lista de frutas:
div > ul > li {
background-color: #f9f9f9;
padding: 10px;
}
Frente a:
.fruits__item {
background-color: #f9f9f9;
padding: 10px;
}
El primer selector describe una ruta estructural en el DOM (un div que contiene un ul que contiene un li), pero no dice nada sobre el contenido: ese li podría representar frutas, tareas pendientes o comentarios de un foro. El segundo selector, .fruits__item, comunica de inmediato qué representa ese elemento en el dominio del problema. Además, es más resistente a cambios: si mañana envolvemos la lista en un elemento adicional, el selector estructural se rompe; la clase semántica, no.
Ejemplo adicional en CSS: modificadores y estados
Siguiendo la metodología BEM (Block, Element, Modifier), usar clases semánticas para estados como .btn--loading o .card--highlighted deja muy claro qué condición visual o de interacción está aplicando el estilo, evitando nombres basados en colores (como .bg-red).
Semántica en HTML
HTML es, de los tres, el lenguaje donde la semántica tiene el impacto más directo y medible.
Un elemento como <h1> no es solo "texto grande": es semánticamente un encabezado de primer nivel de la página.
<h1>Noticias de tecnología</h1>
Por defecto, la hoja de estilos del navegador (user agent stylesheet) hace que un <h1> se vea grande y en negrita, pero eso es solo una consecuencia visual, no la razón de ser del elemento.
Ahora comparemos con esto:
<span style="font-size: 32px; font-weight: bold;">Noticias de tecnología</span>
Visualmente, ambos ejemplos pueden lucir casi idénticos. Pero el segundo no tiene ningún valor semántico: para un lector de pantalla, un motor de búsqueda o cualquier herramienta que analice la estructura de la página, ese <span> es solo texto genérico, no un encabezado.
La regla general es: el HTML debe describir qué son los datos, no cómo deben verse. La apariencia es responsabilidad exclusiva de CSS.
Beneficios concretos de escribir HTML semántico
SEO: los buscadores usan el contenido de elementos semánticos como señal relevante para el posicionamiento de la página.
Accesibilidad: los lectores de pantalla usan estos elementos como puntos de referencia para que las personas con discapacidad visual naveguen la página con más facilidad.
Mantenibilidad: localizar bloques de código con significado es mucho más rápido que rastrear una sopa de <div> sin distinción, con o sin clases.
Claridad para el equipo de desarrollo: el nombre del elemento sugiere qué tipo de dato va a contener.
Coherencia con componentes personalizados: nombrar con semántica en HTML es el mismo hábito que nombrar bien un componente o elemento personalizado en un framework.
Cómo elegir el elemento correcto
Antes de escribir una etiqueta, conviene preguntarse: ¿qué elemento describe mejor los datos que voy a mostrar?
¿Es una lista? ¿Ordenada o no ordenada?
¿Es un artículo con secciones y un contenido relacionado aparte (aside)?
¿Es una lista de definiciones?
¿Es una imagen o figura que necesita una leyenda?
¿Necesita un encabezado y un pie propios, además de los globales del sitio?
Algunos de los elementos semánticos disponibles
HTML ofrece cerca de un centenar de elementos semánticos. Algunos de los más usados:
En resumen
Escribir con semántica —en JavaScript, en CSS o en HTML— significa priorizar el significado sobre la apariencia o la estructura superficial. Un buen nombre de función, un buen selector o el elemento HTML correcto no cambian lo que el usuario final ve en pantalla, pero sí cambian radicalmente lo fácil (o difícil) que resulta entender, mantener y hacer accesible ese código.
Artículo basado en el glosario de MDN sobre semántica.
Comentarios
Publicar un comentario