Con la finalidad de crear páginas web sin ambigüedades, identificaremos el enfoque de semántica en el desarrollo de HTML5. Algunos códigos con lenguaje HTML son difíciles de optimizar, debido a la carencia de significado cuando se utiliza una u otra etiqueta, además resulta complicado entenderlos, por el uso de una misma etiqueta en diferentes situaciones.

Es importante tener claro el significado de la palabra semántica. Según la Real Academia Española, se define como “el sentido que puede dar un conjunto de palabras”, por lo tanto, la semántica en HTML, es el significado otorgado al conjunto de etiquetas empleadas en un documento.

061-01_0305_ilu01. Definición de semántica

En los inicios de HTML estaban desinteresados en la interpretación de las etiquetas, pues su enfoque era dar forma al documento, con el propósito de obtener una interpretación correcta del navegador web. En el desarrollo de HTML5 se hace hincapié en la semántica, para facilitar a todo creador de páginas web, el entendimiento de un documento redactado con este lenguaje.

061-01_0305_ilu02. Ilustración de objetivo de semántica en HTML

Para comprender su importancia, accedamos al inicio del navegador web Google Chrome, hacemos clic derecho y mostramos el código fuente, observamos un conjunto de etiquetas y elementos, los cuales a simple vista son difíciles de comprender. Esa dificultad se le presentaba al programador cuando tomaba un documento HTML y comenzaba a descifrarlo, para luego continuar con su desarrollo.

061-01_0305_cap01. Ejemplo de código fuente de Google Chrome

Por este motivo, fueron creadas las etiquetas semánticas. Con ellas es posible dar sentido al documento creado con HTML, de esta forma, es fácil entender cómo está estructurado cualquier documento web, para continuar con la creación. Además, en un futuro, cuando sea necesario optimizar algún proyecto del pasado, lograremos seguir la idea principal.

061-01_0305_ilu03. Ilustración de beneficio de semántica en HTML

Como se muestra en la ilustración, la semántica de HTML se divide en dos tipos:

• Los elementos a nivel de estructura se aplican a bloques de texto, como por ejemplo main, para delimitar el contenido principal de la página web, o nav, para envolver los principales enlaces de navegación.
• Mientras, los elementos a nivel de texto son las etiquetas empleadas en líneas del documento, por ejemplo b, para marcar en negrita, o la etiqueta em, utilizada cuando es necesario dar énfasis.

Hay más etiquetas semánticas, las cuales encontramos en la página de recomendaciones oficiales de HTML, a fin de estudiarlas de forma disciplinada, para tener la certeza de crear proyectos pulcros y claramente entendibles por otro programador, los navegadores web o cualquier herramienta de Internet.

061-01_0305_ilu04. Ejemplo de etiquetas semánticas

Keynotes

• La semántica en HTML, es el significado otorgado al conjunto de etiquetas empleadas en un documento.
• En el desarrollo de HTML5 se hace hincapié en la semántica, para facilitar a todo creador de páginas web, el entendimiento de un documento redactado con este lenguaje.
• Los elementos a nivel de estructura se aplican a bloques de texto, como por ejemplo main, para delimitar el contenido principal de la página web, o nav, para envolver los principales enlaces de navegación.
• Los elementos a nivel de texto son las etiquetas empleadas en líneas del documento, por ejemplo b, para marcar en negrita, o la etiqueta em, utilizada cuando es necesario dar énfasis.

A fin de manipular en su totalidad el enfoque de semántica en el desarrollo de HTML5, crea un plan de para la evaluación de etiquetas semánticas del lenguaje de marcado HTML. Tiempo disponible: entre 15 y 30 minutos.

Pasos a seguir:

• Ubica el estándar oficial de HTML.
• Selecciona cinco etiquetas a nivel de estructura, evalúa sus funciones y el aporte semántico a una página web.
• Selecciona cinco etiquetas a nivel de texto, evalúa sus funciones y el aporte semántico a una página web.
• Ubica un especialista mediante vKonnect y pide sugerencias de optimización.
• Tiempo disponible: 1 día.

Sabrás que has tenido éxito cuando las agregues a tu documento proyecto01 y se muestre la información correctamente en el navegador web.

Analiza el código y agrega comentarios con los objetivos de las etiquetas semánticas investigadas. Comparte el resultado final de tu código fuente en tu vKonnect y comenta alguna sugerencia de optimización en la publicación de dos compañeros. Tiempo disponible: entre 15 y 30 minutos.

Con la identificación del enfoque semántico en el desarrollo de HTML5, optimizamos en tiempos ideales una página web, debido a la fácil comprensión del uso de cada etiqueta o bloques de texto. También, creamos páginas web comprendidas de una misma forma por cualquier navegador. Mantener una disciplina. en el estudio constante de la semántica de HTML, conlleva a la creación de proyectos web legibles.