Semántica: la web 3.0 original

Años atrás existía el rol de “WebMaster” (quien realizaba el 100% del sitio) en la era de la Web 2.0

En la Web 3.0 (hoy) se utiliza HTML 5, CSS 3, etc.

Elementos semánticos = etiquetas que informan su utilidad (ejemplo: article, footer, nav, etc.) en vez de etiquetas genéricas (por ejemplo: div, span, etc.). Ayudan a los lectores de pantalla o los buscadores (Google, Bing u otra) porque expresan mejor el contenido del sitio.

HUMOR: Enfermedad “DIVitis” es una estructuras “div” una dentro de otra y otra, y otra. (jajajaja!!!)

Los atributos “aria” (ARIA=Accessible Rich Internet Applications) tiene:

1. Roles: ayudan a agregar semántica a los elementos que no tienen una etiqueta específica en HTML.
2. Atributos: agregar descripciones adicionales a los elementos. Especial para lectores de pantalla.

NOTA: hay que evitar usar excesivamente atributos “aria” a las etiquetas innecesariamente.

Les recomiendo echar un vistazo a este artículo sobre HTML semántico (en inglés) https://cs.fyi/guide/writing-semantic-html

¡Qué interesante esto de las etiquetas semánticas y cómo pueden ayudar tanto a usuarios de lectores de pantalla como a buscadores (arañas ciegas de Google)! 😄 😮

Nota de este articulo que les recomiendo leer https://web.dev/learn/html/semantic-html/
.
While adding role=“button” to an element will inform screen readers that the element is a button, it doesn’t change the appearance or functionality of the element. The button element provides so many features without you doing any work. The button element is automatically added to the document’s tab ordering sequence, meaning it is by default keyboard focusable. The Enter and Space keys both activate the button. Buttons also have all the methods and properties provided to them by the HTMLButtonElement interface. If you don’t use the semantic button for your button, you have to program all those features back in. It’s so much easier to just go with <button>.

La semántica es super importante para estructurar adecuadamente la Web. Es muy importante conocer las bases del desarrollo para que luego al usar framework mantengamos la sintaxis semánticas.

Gracias

El concepto de rastreó es un tema bastante común en development/SEO y en inglés se conocé como crawl/crawlability/crawlable…etc