{"id":246,"date":"2021-09-20T13:26:58","date_gmt":"2021-09-20T18:26:58","guid":{"rendered":"https:\/\/www.shenansherwell.com\/?p=246"},"modified":"2022-08-22T20:42:55","modified_gmt":"2022-08-23T01:42:55","slug":"semantica-html5","status":"publish","type":"post","link":"https:\/\/www.shenansherwell.com\/es\/desarrollo-web\/semantica-html5\/","title":{"rendered":"Sem\u00e1ntica en HTML5, \u00bfQu\u00e9 es y porqu\u00e9 te debe importar?"},"content":{"rendered":"\n

Para entender el HTML<\/strong> sem\u00e1ntico podemos comenzar por revisar el significado de sem\u00e1ntica: La sem\u00e1ntica es la parte de la ling\u00fc\u00edstica que estudia el significado de las expresiones ling\u00fc\u00edsticas.
La sem\u00e1ntica en el HTML<\/strong> y HTML5<\/strong> se refiere al significado o informaci\u00f3n extra que otorgan los elementos o etiquetas del lenguaje, informaci\u00f3n que define o describe el contenido, funci\u00f3n o secci\u00f3n que contienen.
Esta informaci\u00f3n es lo que permite que un documento se pueda rastrear de mejor manera. Ayuda a que el contenido se muestre de manera consistente en diferentes aplicaciones y contextos, adem\u00e1s de ser fundamental para otorgar accesibilidad y funcionalidad con tecnolog\u00eda de asistencia como lectores de contenido.<\/p>\n\n\n\n

Evoluci\u00f3n del HTML<\/h2>\n\n\n\n

En un principio el contenido de las p\u00e1ginas de internet se formateaba y acomodaba utilizando tablas, lo cual restring\u00eda bastante las posibilidades en dise\u00f1o y produc\u00eda p\u00e1ginas poco atractivas.<\/p>\n\n\n\n

\"Pagina
Pagina web en los 90s<\/figcaption><\/figure><\/div>\n\n\n\n

El c\u00f3digo evolucion\u00f3 y aparecieron las elementos <div><\/strong> un contenedor gen\u00e9rico al cual se le da estilo, dise\u00f1o utilizando un nuevo lenguaje de apoyo, CSS<\/strong>.<\/p>\n\n\n\n

Tambi\u00e9n aparecieron las primeras elementos con valor sem\u00e1ntico. Ejemplo de esto es el elemento <p> utilizado para se\u00f1alar que el contenido que contiene se debe interpretar como un p\u00e1rrafo, o <\/p>\n\n\n\n

Este gran paso para adelante permiti\u00f3 que la creatividad se libere, y los sitios pasaron de un conjunto de tablas r\u00edgidas a un universo de contenedores <div><\/strong> y elementos que cambian de forma y posici\u00f3n de acuerdo a las reglas de CSS<\/strong> que le dan su formato.<\/p>\n\n\n\n

Un ejemplo ideal de este principio es la p\u00e1gina CSS zen garden<\/a> un sitio al cual le puedes intercambiar el archivo de CSS<\/strong> para otorgarle una apariencia totalmente diferente mientras el contenido no cambia.<\/p>\n\n\n\n

HTML sem\u00e1ntico desde su inicio.<\/h2>\n\n\n\n

Desde su inicio el HTML<\/strong> a\u00f1ade significado sem\u00e1ntico a el c\u00f3digo que comprende un sitio web.
Con etiquetas como <h1><\/strong> , <p><\/strong>, <img><\/strong> , etc\u2026 el desarrollador puede designar un t\u00edtulo, a\u00f1adir encabezados y p\u00e1rrafos e insertar im\u00e1genes para as\u00ed dar forma al documento.
En el HTML<\/strong> cada elemento tiene su propio modelo de contenido, el cual describe el tipo de contenido que este debe contener y par\u00e1metros adicionales como el texto alternativo o alt text<\/a> para describir los contenidos de una imagen a los rastreadores.
Los modelos de contenido se dividen en las siguientes categor\u00edas<\/p>\n\n\n\n