El slash o barra inclinada al final de las etiquetas HTML es algo que genera bastante confusión, sobre todo entre quienes han trabajado con distintas versiones de HTML o vienen del mundo XHTML. Es habitual ver metaetiquetas cerradas con `/>` y otras sin él, y la pregunta que surge es lógica: ¿cuál es la forma correcta?
La respuesta corta es que da igual. Pero como siempre, hay un porqué detrás, y entenderlo te ayudará a tomar mejores decisiones cuando audites o implementes código HTML.
El slash al final de un tag HTML es el equivalente a cerrar una etiqueta. De forma que si pones:
Sería teóricamente el equivalente corto a poner:
Esta sintaxis se estandarizó porque hay muchas etiquetas que se abren y se cierran, pero nunca contienen nada dentro. Las metaetiquetas son el ejemplo perfecto: solo llevan atributos y valores, nunca contenido textual ni otras etiquetas anidadas.
En HTML5 existe un concepto llamado void elements o elementos vacíos. Son etiquetas que por definición no pueden contener contenido ni etiquetas hijas, por lo que no necesitan una etiqueta de cierre.
Las metaetiquetas son uno de estos void elements. La lista completa según la especificación de HTML5 es:
Si te fijas, incluye etiquetas muy habituales como `img`, `input`, `link` o `br`. Todas funcionan igual que las metaetiquetas en este aspecto: el slash es totalmente opcional.
Por tanto, estas tres formas son igualmente válidas en HTML5:
Fíjate que incluso el espacio antes del slash es indiferente. En algunas webs están y en otras no. Realmente esto no va a interferir en la funcionalidad, es más costumbre o gusto ya que los tres ejemplos de arriba son totalmente válidos.
La confusión viene de la época de XHTML (aproximadamente 2000-2009), donde se aplicaban las reglas estrictas de XML. En XML, toda etiqueta debe cerrarse obligatoriamente. Si una etiqueta no tiene contenido, se cierra con el slash al final: `<etiqueta />`.
En aquella época, si no cerrabas un `<meta>` o un `<br>` con el slash, el validador te devolvía errores. Muchos desarrolladores (yo incluido) nos acostumbramos a cerrar siempre con slash por defecto. Ya que al ser un lenguaje mucho más exigente que el HTML tradicional pues te tenías que acostumbrar.
Cuando HTML5 se convirtió en el estándar (2014), se relajaron estas reglas. Los navegadores ya interpretaban correctamente el HTML sin el slash desde hacía años, así que el estándar simplemente oficializó lo que ya funcionaba en la práctica.
Por eso los proyectos que tuvieron una transición del XHTML al HTML5 tienen el slash por todos lados. Realmente los estándares de los navegadores han cambiado mucho (a mejor) y afortunadamente el HTML es mucho menos estricto a día de hoy, haciendo mucho menos crítico el error humano (o de IA).
El validador oficial del W3C (validator.w3.org) ya no marca como error ninguna de las dos formas en HTML5.
Banner promocionado:
Absolutamente no. Googlebot y el resto de User Agents de motores de búsqueda interpretan perfectamente ambas sintaxis. No hay ninguna diferencia en el rastreo, la indexación o el posicionamiento.
De hecho, si miras el código fuente de las propias SERPs de Google o de herramientas como Search Console, verás que ellos mismos usan ambas formas indistintamente según el contexto.
Si te das cuenta en el ejemplo de la imagen de arriba, las metaetiquetas se cierran con el slash, y son metaetiquetas que pasan los propios motores de búsqueda más exitosos. No hay ninguna preferencia ni beneficio en hacer el cambio, ni siquiera debes tener una consistencia mientras el etiquetado esté correcto.
Te falta mi máster. Accede a una formación avanzada que te permitirá aplicar e implementar SEO en cualquier tipo de WEB
¡Accede al Máster de SEO Técnico!