Cualquier persona involucrada en el diseño o desarrollo web se encontrará con el término "semántica" en referencia a HTML5 y la Web en general. Este término, a menudo problemático, es comprensiblemente confuso para muchos de nosotros, particularmente porque existe una clara falta de consenso sobre su definición en ciertos contextos.

En este artículo, exploraremos qué hace que HTML5 sea más semántico que sus predecesores, delineando lo que esto significa para el desarrollo web ahora y en el futuro.

La semántica tiene que ver con el significado

El concepto de semántica proviene del campo de la lingüística dedicada al estudio del significado. Con lenguajes naturales como el inglés, distinguimos entre sintaxis (o gramática) y significado. Si piensas en una oración, el significado tiene que ver con la forma en que las personas la interpretan:

"El hombre arrojó la computadora por la ventana".

La semántica se relaciona con el aspecto de la oración que permite a las personas que la leen comprender el mensaje contenido en ella. Junto con la sintaxis, la semántica es una gran parte de lo que facilita la comunicación a través del lenguaje. Cuando hablamos de semántica en relación con HTML, estamos hablando de comunicación entre programas de computadora, no humanos. El HTML semántico está esencialmente dirigido a mejorar el grado en que las aplicaciones pueden procesar o interpretar contenido web. Por ejemplo, considere el siguiente extracto de la página web que contiene algunas de las estructuras HTML más antiguas:

The man threw the computer through the window.

Los elementos (y atributos) le dan al navegador información sobre cómo presentar el contenido al usuario. Los elementos de párrafo se mostrarán por defecto con espacios en blanco encima y debajo de ellos, los elementos de imagen se mostrarán utilizando el archivo de imagen incluido en el atributo src, y así sucesivamente. Cuando el navegador encuentra cada uno de estos elementos, representa el contenido de una manera particular que en última instancia se determina mediante las etiquetas utilizadas.

Las estructuras HTML ya tienen significado

Es importante comprender que HTML5 no introduce semántica en HTML por primera vez. HTML ya tenía un nivel de semántica incorporado. Las estructuras HTML existentes son significativas en diversos grados. Si miras este elemento HTML familiar como se incluye en el extracto de arriba, verás lo que quiero decir:

Aunque está abreviado, el nombre del elemento img indica algo significativo sobre el contenido de la etiqueta, es decir, que es una imagen. De esta manera, puede pensar que el aspecto semántico de HTML es similar a los metadatos, en el sentido de que la etiqueta del elemento y los nombres de los atributos describen los datos (los datos en una página web son el elemento y el contenido del atributo).

¿Recuerdas cuando comenzamos a separar el contenido del estilo?

Algunas de las estructuras que hemos usado en HTML le dicen al navegador cómo diseñar los elementos de contenido en una página. A medida que pasa el tiempo, nos hemos sentido alentados a separar el formato de una página de su contenido.

Por ejemplo, reemplazamos la etiqueta i con em, que es más significativa y no le dice al navegador exactamente cómo mostrar el texto dentro del elemento. El propósito de usar em en lugar de i es transmitir información sobre la naturaleza del elemento de contenido, en lugar de información sobre cómo diseñarlo. El em, por supuesto, afecta el estilo, que es la razón principal por la que lo usamos, sin embargo, deja los detalles del estilo hasta el navegador y / o el código CSS idealmente separados del marcado de la página.

El HTML5 semántico es un paso más importante en este proceso. El objetivo final es crear un sistema en el que las aplicaciones tengan acceso a un mayor nivel de significado; sin embargo, esto no es una IA, solo se trata de incluir información descriptiva sobre los elementos de datos dentro de las estructuras de código que los modelan.

¿No es esto similar a XML?

Si ha utilizado XML en el pasado, tendrá cierta familiaridad con los conceptos en el marcado semántico. Por ejemplo, cuando diseña un documento XML (o esquema) para un conjunto de datos, usted elige elementos y atributos para modelar elementos dentro de los datos. Idealmente, los nombres de elementos y atributos definen los elementos de datos de una manera significativa:

Jim Smith23 November 2012

El desarrollador aquí ha elegido nombres que describen de manera intuitiva los valores de los datos que se modelan. Con HTML5 no puede elegir sus propios elementos, ya que no es libremente extensible. Las estructuras elegidas simplemente tienen un significado más inherente que las versiones anteriores.

Por cierto, hay diferentes tipos de significado

Hemos hablado sobre el significado, pero de hecho hay diferentes formas en que un elemento u otro fragmento de código puede ser significativo.

La etiqueta img es significativa porque dice algo sobre el contenido del elemento, describiendo de qué se trata.

Algunos de los nuevos elementos HTML5, como el encabezado y el pie de página, son significativos porque indican algo sobre el rol o el propósito del elemento dentro de la estructura general de una página.

Entonces, ¿cómo se relaciona todo esto con el código HTML5?

Entonces, ¿qué implica este aspecto significativo mejorado de HTML5? Básicamente, HTML5 tiene algunos elementos nuevos con los que puede incluir más información semántica en el marcado de su página. Hay una gran cantidad de elementos nuevos, solo algunos de los cuales veremos aquí. La etiqueta del encabezado indica información sobre el contenido del elemento y sobre su función dentro de la estructura de la página:

Man in Window Outburst

El elemento de encabezado puede contener otros elementos y tiende a incluir al menos un elemento de encabezado. La etiqueta del pie de página es similar, y la etiqueta expresa de nuevo algo significativo sobre el contenido del elemento y su relación con el resto de la página:

La etiqueta de navegación describe el propósito de una sección de página, es decir, que contiene enlaces de navegación:

El elemento de sección generalmente contiene un grupo de elementos sobre el mismo tema, a menudo junto con un encabezado. El elemento de sección tiene un significado bastante abstracto, pero no obstante es significativo:

What happened
Police officers apprehended the man at 3.30pm...

El elemento del artículo es similar, se usa para definir un artículo que es autónomo:

The Law
The law on throwing items through windows is very clear...

Una etiqueta a un lado indica el rol de un elemento relativo a su contexto dentro de la página, como en la siguiente versión extendida del código del artículo anterior:

The Law
The law on throwing items through windows is very clear...

Estos son solo algunos de los nuevos elementos HTML5 que ofrecen mejoras semánticas, otros incluyen elementos de entrada de los usuarios y medios, así como atributos adicionales. La inclusión de microdatos en HTML5 también proporciona un mayor margen para incluir información semántica en páginas web y aplicaciones. Como puede ver, algunos de estos nuevos elementos son significativos en términos de contenido y estructura.

Piense en algunas de las etiquetas más antiguas (muchas de las cuales aún existen), como div. El elemento div es simplemente una porción de una página: el nombre de la etiqueta no nos dice absolutamente nada sobre el contenido del elemento o su función dentro de la página. En otras palabras, la etiqueta transmite muy poco significado. Muchas de las etiquetas de larga data prácticamente no tienen ningún significado o, en algunos casos, tienen un significado genérico y vagamente definido. Cada elemento en una página web estaba dentro de uno de un conjunto de categorías de elementos muy generales. La clave para hacer algo significativo es ser específico. Las nuevas etiquetas HTML5 nos permiten definir contenido web usando términos más específicos.

¿Ya estabas agregando significado a tu marcado?

Si ha estado creando páginas web durante un período de tiempo razonable, algunos de los nuevos elementos HTML5 pueden sonarle algunas campanas. En realidad, los desarrolladores ya estaban creando un nivel de significado en sus páginas usando los atributos de los elementos, particularmente clase e ID. Por ejemplo, si alguna vez le ha dado a un elemento una clase o atributo de ID de "pie de página" o "encabezado", ciertamente no está solo. Con HTML5, este significado se transmite en el marcado en lugar de en los valores de los atributos. Si utilizó estos atributos para implementar propiedades de estilo particulares, efectivamente estaba haciendo algo manualmente integrado en HTML5, y con elementos semánticos hay beneficios adicionales ...

¿Por qué estamos haciendo todo esto?

De acuerdo, esto está muy bien, pero se te perdonará que hayas preguntado por qué estamos teniendo todos estos problemas por algo que parece esencialmente conceptual / académico. Bueno, puedes estar seguro de que hay buenas razones para moverte en una dirección más semántica. Como hemos visto, la semántica HTML5 nos permite crear código de marcado que describe los elementos de contenido. Este aspecto descriptivo del código permite que otros programas hagan un uso más efectivo del contenido, con varias aplicaciones:

• La búsqueda está configurada para ser transformada por el avance de la semántica Web. El marcado semántico hace que el contenido / los datos sean más buscables. las páginas web, por supuesto, no solo se ven en el navegador web, sino que también las procesan otros programas, como los robots de los motores de búsqueda. Dado que el marcado semántico está diseñado para que las aplicaciones interpreten las páginas web de forma más significativa, en última instancia, esto debería mejorar la calidad de las funciones de búsqueda / consulta en una cantidad significativa. En el "sueño" a menudo citado de Tim Berners-Lee para la Web, las computadoras podrían analizar todos los datos en línea, que podrían estar muy lejos, pero el impulso semántico de HTML5 está motivado por ese tipo de objetivo a largo plazo. .
• La accesibilidad es una de las principales ventajas del marcado semántico. Las herramientas de accesibilidad pueden beneficiarse enormemente de un acceso más significativo al contenido web. Dichas herramientas incluyen complementos de navegador para usuarios con problemas de visión, audición, aprendizaje, etc. El marcado semántico hace que sea más factible para una aplicación procesar el contenido web y el resultado para comunicar el mensaje original al usuario de una manera que se adapte a sus necesidades. Este concepto se extiende más allá de la accesibilidad y en el ámbito de la flexibilidad del dispositivo, a través de técnicas como el diseño receptivo. El resultado es un enfoque más inclusivo para la entrega de contenido web.
• La consistencia debe ser un verdadero benefactor de HTML5 semántica. El marcado semántico mejora la coherencia, ya que los elementos de contenido son más lógicamente asignables a tipos de elementos particulares. Esto contrasta con los modelos más antiguos, en los que los ítems a menudo podían estar lógicamente contenidos en cualquiera de una gama de diferentes tipos de elementos: elegir uno no era un indicador de la naturaleza del contenido o su rol dentro de la página, fue solo un reflejo de la elección del desarrollador. Con el marcado semántico, el nivel de significado más específico hace que estas opciones sean menos libres, pero los resultados son inherentemente más confiables cuando se trata de la interpretación, ya sea por el navegador u otras aplicaciones.

Los desarrolladores impulsan el progreso de las tecnologías web

Cuando estaba en la universidad (hace algunos años) recuerdo a un profesor diciéndonos que el campo de la investigación académica iba a ser revolucionado por los avances en la búsqueda. Estaba hablando de la Web Semántica, no hace falta decir que aún no ha sucedido. Tomar cualquier tipo de nueva dirección enfocada con algo tan diverso y errático como la World Wide Web siempre será una tarea difícil. Sin embargo, si participamos de la idea del marcado semántico, como desarrolladores, podemos actuar para influenciar el movimiento hacia una Web futura que sea más accesible, buscable y consistente para todos los usuarios.

¿Usas los elementos semánticos de HTML5? ¿Centrarse en la semántica produce un producto de mayor calidad? Háganos saber lo que piensa en los comentarios.

Imagen / miniatura destacada, usa imagen de idioma a través de Shutterstock.