Tag
Los tags son etiquetas visuales usadas para categorizar elementos y facilitar visualmente el conocimiento de grupos por temáticas. De igual forma sirve como elemento de navegación por categorías a modo de link.

Racional de aplicación

Usamos las tags siempre que sea necesario para definir la/s categoría/s o temática/s en la que se encuentra el elemento:
  • Como elemento de navegación a una categoría.
  • Para agrupar información dentro de una navegación con un mismo contexto.
  • Marcar la categoría o temática de un componente.
  • Filtrar entradas según categoría o temática.
  • Como etiqueta o metadato.
Evitamos usar en exceso los tags, ya que la sobrecarga de estas pueden perjudicar la jerarquía del contenido, por tanto la comprensión. Es recomendable evitar:
  • Usar tags no relevantes o que no agrupan un número considerable de elementos asociados.
  • En niveles principales de navegación.
  • Categorías vacías o con pocas entradas.
  • Usarlas como elemento puramente de posicionamiento.

Buenas prácticas

Uso correcto
Uso incorrecto
Proporcionamos la categorización de los elementos.
Demasiadas categorías en un elemento para no restringir en exceso los resultados.

Interacción

Dispositivo
Interacción
Ratón
Se puede activar un tag haciendo clic en cualquier lugar dentro del contenedor.
Teclado
Se puede navegar por los tag pulsando la tecla Intro y una vez enfocado el elemento acceder al enlace pulsando la tecla Espacio.

Anatomía y variabilidad

Anatomía del componente

Letra
Elemento
Descripción
A
Contenedor
Caja que recubre la etiqueta informativa.
B
Etiqueta
Texto que informa del contenido del enlace.

Variabilidad de estados

Letra
Estado
Descripción
A
Default
Estado por defecto. No hay interacción sobre el componente.
B
Hover
Visible al posicionar el cursor del ratón encima del componente.
C
Active
Activado por ratón con click o la tecla Espacio desde el teclado para actuar sobre el mismo.
Última actualización 8mo ago