Alguna vez te has preguntado ¿Porque escribes HTML usando la etiqueta h1 y la etiqueta p? ¿Porque no solo usar la etiqueta div y span para todo? ¿Porque usar las etiquetas HTML específicas en absoluto?
La razón es que las etiquetas p y h1 transmiten información extra acerca del contenido. Estas dicen “esto es un párrafo” y “esto es un título en el primer nivel”, respectivamente. Esto es semántica HTML, o HTML para el cual el autor hace todo el esfuerzo para asegurar que el etiquetado organiza y estructura el contenido. Hasta cierto punto, todos los desarrolladores web lo practican. Este artículo explicará semántica HTML, y explicara por qué deberías profundizar más en el.
¿Que es la semántica HTML?
Sencillamente, la semántica HTML es HTML que usa el elemento o etiqueta correcto para el trabajo. Tomemos el elemento h1 como un ejemplo. ¿Para qué es? La semántica responde es “para el título de nivel superior de la página”. Usando un elemento h1 solo para hacer el texto más grande es el ejemplo clásico de HTML no semántico. Además para las etiquetas de encabezados (de h1 hasta h6) hay muchos elementos de HTML desde el elemento común p a los elementos raramente encontrados cite y dfn. Cada uno tiene un significado específico, y cada uno puede ser usado para darle a tu HTML una mejor estructura de estilo con CSS y manipularlo con JavaScript.
La semántica HTML es también acerca de etiquetar el contenido por lo que es en lugar de lo que parece. Por ejemplo, considera la presencia del panel de archivo de un blog. Este es el listado de enlaces a otras páginas en el blog que a menudo se encuentran en el lado derecho de la página. Cuando se le da al archivo un ID o una clase para el estilo CSS, se puede usar un nombre que refleja donde esta en la página; por ejemplo, rightpanel. Alternativamente, puedes usar un nombre que indique el rol que juega en el contenido; por ejemplo sidebar o mejor aún archive.
La semántica HTML es HTML en el que:
El texto es envuelto en elementos que reflejan el contenido. Por ejemplo:
- Un párrafo es contenido en un elemento p.
- Una lista secuencial es contenida en un elemento ol
- Un gran bloque de texto citado desde otro recurso es contenido en un elemento blockquote
Los elementos HTML no son usados para otro propósito que no sea el de la semántica. Por ejemplo:
- h1 contiene encabezados; no es para hacer el texto más grande.
- blockquote contiene una cita larga; no es para aplicar sangría al texto.
- Un elemento de párrafo vacío (p) no se usa para saltar líneas.
El texto no contiene directamente información de estilos. Por ejemplo:
- No se usan etiquetas de formato como font o center.
- No se hace referencia a colores o ubicación en clases o IDs.
El propósito de todo esto es que los consumidores de tu código, sean personas, exploradores, o lectores de pantalla puedan consumir el contenido y analizarlo fácilmente, ambos objetivamente para máquinas y subjetivamente para personas.
¿Porque debería importarme la semántica HTML?
Tradicionalmente, hay cinco argumentos principales a favor de la semántica HTML.
Código más ligero
La semántica HTML estilizada por CSS típicamente requiere menos código que con formato de tablas. Sin embargo, vale la pena señalar que se puede escribir HTML sin tablas que no es semántico. Todavía se puede reducir el tamaño de tu codigo, pero no podrás hacerlo fácil de entender.
Accesibilidad
La accesibilidad le permite a personas con discapacidades utilizar tu sitio. El código semántico tiende a ser más accesible. Cuando etiquetas aspectos de tu página apropiadamente como títulos, encabezados, párrafos, y listas, lo haces mas facil por lectores de pantalla y otras tecnologías de apoyo para analizar y presentar el contenido de forma que una persona discapacitada pueda entender. Sin embargo, nota el énfasis en la palabra tiende. La semántica HTML no es una solucion magica para hacer tu sitio compatible con las normas de accesibilidad; estas solo hacen accesible el construir sitios un poco más fácil.
Optimización del motor de búsqueda
Al igual que con la accesibilidad, la semántica de HTML tiende a mejorar la optimización del motor de búsqueda (SEO) al hacer que el contenido del sitio sea más fácil de analizar por software. Los motores de búsqueda escanean el texto HTML contenido en tus archivos HTML. Ellos no procesan CSS; y no ejecutan JavaScript. Si el contenido importante no esta en el HTML, los motores de buscadores de búsqueda nunca podran verlo, y en consecuencia será clasificado. También, removiendo el código HTML redundante de tu página , y teniendo solo el etiquetado que describe el contenido, será más fácil para los motores de búsqueda saber de qué trata realmente tu sitio. Esta técnica es considerada SEO “white hat”. Es perfectamente aceptable, y ningún motor de búsqueda te penalizará debido a que se optimizo semánticamente la página. (En contraste, el uso de texto oculto para incrementar su relevancia en un tema en particular es considerado SEO “black hat”.)
Debe señalarse que no hay garantía de que la semántica HTML es mejor para el SEO. Los desarrolladores web piensan que los motores de búsqueda favorecen a la semántica HTML, y la entrada de Google en HTML5 sugiere que lo hagan. Sin embargo, los motores de búsqueda protegen de cerca sus algoritmos, y tienen que admitir el hecho de que contenido extremadamente relevante puede estar localizado en HTML no semántico.
Reutilización
La semántica HTML toma ventaja del hecho de que nuevos elementos siempre serán nuevos elementos, y un archivo siempre sera un archivo, sin importar donde esten posicionados en la página. Sin embargo, una rightbar no siempre estará en el lado derecho. Además si se está difundiendo el contenido vía feed RSS e incluyendo HTML en el mismo, mientras sea menor el etiquetado será mejor. Sin embargo, muchos sitios y blogs no difunden su contenido desde el HTML preparado. Usualmente lo construyen aparte, y el formato de difusión se maneja para asegurarse de que otros consumidores puedan entender el contenido.
Comprensión del desarrollador
Debes haber notado un tema en los argumentos de la semántica HTML cubiertos hasta ahora. Todo esto suena como buenas razones para usar HTML semántico, pero ninguna de estas individualmente sella el trato para mi. Tal vez, todas estas sean suficientes para ti. Si es asi, me alegro. Pero yo sostengo en que hay una buena razón para escribir HTML semántico hoy en dia. Codificar es comunicar, tanto a una computadora (la cual es la parte fácil) y la otra son los desarrolladores. La semántica HTML es más fácil para el entendimiento de los humanos que el HTML no semántico. un elemento div con una clase de r1c4 no es tan fácil de comprender como una llamada pullquote. Usando semántica HTML ayudaras a otros desarrolladores y autores de HTML a entender lo que tu código esta haciendo.
Es importante señalar que existe una gran subjetividad en este espacio. En su artículo acerca de Semántica HTML y Arquitectura Front-End, Nicolas Gallagher hace el caso en que las clases e IDs no pueden ser no semánticos debido a que la semántica es acerca del significado, y todo lo que pones en una clase o ID tiene un significado. Su lógica es sólida, pero en mi opinión no es la mejor manera de ver las cosas.
Las semánticas no son binarias. No se puede ser enteramente semántico, ni tampoco se puede ser completamente no semántico. La semántica es una calidad continua. El contenido web existe en una continuidad entre completamente semántico y completamente no semántico, debido a que estos polos son inalcanzables. Con eso en mente, asi como se incrementa la facilidad con la cual los consumidores web pueden entender cual es el significado de todas las piezas de tu contenido web, se mueve continuamente el contenido desde no semántico a semántico.
¿Cuales elementos nuevos están disponibles para HTML semántico?
Uno de las partes más polémicas de la semántica de HTML es el nombramiento de IDs y clases. Parte del problema siempre ha sido la brecha entre lo que está definido en las especificaciones de HTML y lo que se muestra en las paginas del mundo real. Por ejemplo, considerando la navegación del sitio. Desde mediados de los 90s el menú de navegación ha sido un poco ubicuo, y sin embargo todo ese tiempo, no ha habido una sola forma estandarizada de etiquetar la navegación. Lo mismo sucede con las cabeceras de las páginas, los pies de página, y el contenido en forma de artículos o publicaciones. Debido a que no hay una forma estándar de hacerlo, y muchas formas posibles de hacerlo, ha habido un desacuerdo considerable sobre como hacerlo apropiadamente.
Algunas de estas han sido aliviados por HTML5. Durante el desarrollo de la especificación de HTML5, compañías líderes en contenido web compartieron el análisis de los nombres de IDs y clases comúnmente más utilizados, y lo utilizaron para guiar en la creación de nuevos elementos HTML5 que serían útiles en el etiquetado de muchas de las piezas más comunes del contenido de la web. El resultado es una lista de nuevos elementos que incluyen:
- header
- footer
- nav
- article
Hay muchos más elementos, los cuales están detallados en la lista de la W3C de diferencias entre HTML4 y HTML5.
El punto de esto es crear una forma más estándar de etiquetar el contenido. El etiquetado más consistente, hace más fácil su consumo tanto para humanos como dispositivos.
Las semánticas son para ti, no al revés
Creo que uno de los problemas más grandes con las semánticas en HTML es la tendencia de las personas a tomar las características de la semántica HTML como reglas objetivas en vez de normas. Escribir HTML con buenas semánticas es algo que se debería hacer, no algo que se deba hacer. Si se va a usar semántica HTML, haciéndolo se asegura que el contenido obtenga mejores resultados haciéndolo a seguir un conjunto de mejores prácticas sin entender la teoría de estas.
Las semánticas hace a HTML más fácil de entender. Esto significa que deberías cuidar que tus etiquetas h1, h2 y h3 estén correctamente anidadas. Eso significa que deberías tener un momento de pensamiento para asegurarte que section es la etiqueta correcta para envolver algún contenido. Eso no significa que deberías obtener un email semanal con cuarenta mensajes discutiendo si ese div en la pagina deberia tener o no un ID news o breaking. Elige uno, después de considerarlo poco, y entonces seguir con tu vida. Mientras que se ha esmerado en comunicar cuáles fueron sus intenciones para el contenido, debería estar bien. Otro desarrollador vendrá, mirara el contenido, lo comprenderá, y será capaz de escalarlo. Supón que eliges news. Hay una buena oportunidad de que que la semántica en la mente del desarrollador se preguntará porque lo llamaste news cuando esta claro que debería ser breaking. No hay casi nada que puedas hacer para evitar ese tipo de preguntas en un campo tan subjetivo. Sin embargo, no se confundirá por un encabezado, pie de página, barra de navegación, y eso es un logro más importante.
A continuación hay algunos recursos para ayudarte a mejorar tu uso del HTML semántico.
Para aprender más acerca de la semántica en HTML5:
La W3C (World Wide Web Consortium) es el organismo para los estándares de la web. Como tal son responsables de la definición de todos los elementos. Ellos tienen fuertes ideas (o absolutas, dependiendo de a quién le preguntes) en el uso de los elementos de HTML. Cada uno de los elementos en HTML tienen documentación detallada, la cual incluye el uso semántico del elemento.
WhichElement.com es un sitio que yo inicie para discutir la semantica apropiada del contenido. Por ejemplo si estas buscando una forma de marcar un calendario semanticamente, whichElement.com tiene la respuesta para ti.
HTML5 Doctor es un recurso para ayudar a los desarrolladores a usar HTML5 así como es apasionante en el presente. El sitio tiene mucha información del uso de la semántica en los elementos de HTML5.
La versión original de este artículo esta publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Margarita García y Pablo Macedo.