Enlaces vacíos y semánticos

6/Abr/2009 287

Si desayunas jQuery, almuerzas Mootools y cenas Spry entonces seguro te gusta manipular eventos utilizando elementos del DOM ya generados. Deben saber que la etiqueta correcta para click (y doubleclick) es <a> y solamente <a>; todas las demás tienen otros muchos usos pero la única que semánticamente está habilitada para desencadenar una acción mediante un click es… ¡<a>!

Bien eso era lo primero que quería dejar claro; he visto demasiados <li>, <h1>, incluso <p> clickeables. Ahora, a lo que va este artículo es cómo la semántica se está dejando atrás por la comodidad de escribir eventos mediante JS. Me culpo también por caer en lo mismo, pero me interesa ahora mostrarles la mejor solución que he encontrado al respecto.

Pongámonos en un caso de ejemplo. Supongamos que se agrega una función para ejecutar un slideToggle a un enlace; por lo que he visto generalmente esto se hace de 2 maneras:

<a href="#" id="ejecuta_toggle">Ejecutar slideToggle</a>

Cumples con tener un href funcional (no vacío) pero puede hacer que al hacer click la página haga scroll hasta el inicio dado que tienes un ancla vacío en el href y quizás tengas que dar un return false al final de la función del slideToggle, ó

<a href="javascript:void(0)" id="ejecuta_toggle">Ejecutar slideToggle</a>

Que hace que el browser no ejecute el enlace y no se salga de la misma página.

Enfin, son 2 métodos similares y que cumplen con el objetivo primario de ejecutar algun comportamiento mediante Javascript a través de un hyperlink. Pero nuevamente mi pregunta: ¿Qué sucede con la semántica? ¿Cómo le digo al buscador, indexador, robot que ese <a> no es un enlace realmente? ¿Que lo estoy disfrazando para cumplir con mis objetivos?

Complicada pregunta y simple respuesta. Con esta inquitud espero que puedan ir más allá en sus desarrollos; recuerden que un simple click puede desencadenar muchos más eventos que los que tienen planificado para él, eventos que benefician a sus usuarios mediante indexaciones más precisas.

La solución

Entreguen una ancla semántica al hyperlink, pero una ancla sobre sí mismo. Ejemplifico con lo mismo que he estado utilizando:

<a href="#ejecuta_toggle" name="ejecuta_toggle" id="ejecuta_toggle">Ejecutar slideToggle</a>

Con este método conservan la semántica indicando a través del atributo name qué hará ese mismo enlace y al mismo tiempo evitan el movimiento de scroll de la página.

Comentarios

  1. web hosting off [#]

    What i don’t understood is in truth how you are no longer really a lot more
    well-favored than you might be now. You’re
    so intelligent. You know therefore considerably in the case of this matter, produced me individually consider
    it from a lot of varied angles. Its like men and
    women are not interested until it’s something to do with Girl gaga!
    Your own stuffs outstanding. Always care for it
    up!

  2. bit.ly [#]

    Amazing things here. I’m very happy to look your post.
    Thank you so much and I’m taking a look ahead to contact you.
    Will you kindly drop me a mail?

  3. PatrickFax [#]

    cialis pills cialis without a doctor prescription

  4. instagram takipçi satın al [#]

    Instagram takipçi satın alarak fenomen olmak istemezmisiniz?

    Sizlere en iyi fırsatları sunan bu websitesinden hemen takipçi alarak düşmeyen kaliteli takipçilere sahip olabilirsiniz
    link :
    instagram Takipçi Satın Al

  5. dating a gay latino [#]

    fuck buddies gay dating https://gayonlinedating.net/

  6. free gay dating sex [#]

    gay horney sex dating online https://datinggayservices.com/

  7. hydroxychloroquineMt [#]

    chloroquine diphosphate chloroquine walmart hydroxochloriquine

  8. gay dating site guide [#]

    akron gay old dating https://gaydatingcanada.com/

  9. http://app.gumroad.com [#]

    Hi there, its good article concerning media print, we
    all understand media is a wonderful source of data.
    asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

  10. HenryUnfiP [#]

    gay abdl dating
    gay 12+ year olds dating signt
    mature gay men dating sites

  11. hydroxychloroquineMt [#]

    chloroquine structure chloroquine 500 mg hydroxochlorquine

  12. ivermectin1.com [#]

    ivermectin lotion cost Enlaces vacios y semanticos | CSSLab | Laboratorio de ideas web https://ivermectin1.com/ ivermectin lice dose

  13. quest bars that [#]

    Good respond in return of this matter with real
    arguments and describing everything about that. quest bars http://bit.ly/3jZgEA2 quest
    bars

  14. gay dating site in sacramento [#]

    gay husband asia dating site https://gay-singles-dating.com/

  15. best friend is gay dating [#]

    gay ftm dating https://gayedating.com/

  16. gay dating college [#]

    gay free dating https://gaydatinglosangeles.com/

  17. ivermectin1.com [#]

    ivermektin 1% grädde generisk Enlaces vacios y semanticos | CSSLab | Laboratorio de ideas web https://ivermectin1.com/ reddit canadian pharmacy

  18. j.mp [#]

    It’s amazing in support of me to have a site, which is good in support
    of my knowledge. thanks admin cheap flights http://1704milesapart.tumblr.com/ cheap flights

  19. http://bitly.com/3z5HwTp [#]

    Hello mates, its impressive post on the topic of educationand entirely defined, keep it up all
    the time. ps4 https://bitly.com/3z5HwTp ps4

  20. j.mp [#]

    This piece of writing is truly a pleasant one it helps new internet viewers, who are wishing for blogging.
    scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  21. http://www.iherb.com [#]

    Great information. Lucky me I came across your blog
    by accident (stumbleupon). I have bookmarked it for later!
    quest bars https://www.iherb.com/search?kw=quest%20bars quest bars

  22. coub.com [#]

    Wow, incredible blog layout! How long have you been blogging for?
    you made blogging look easy. The overall look of your site is magnificent,
    let alone the content! scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

  23. HenryUnfiP [#]

    non hookup gay dating sites
    gay millionare dating
    instant gay dating

  24. GafoInvake [#]

    buy prednisone without prescription

  25. allegra allergy [#]

    generic zyrtec at walmart – http://allergyd.com

  26. children's allegra [#]

    allegra coupons – http://allergyd.com

  27. buymodafinil [#]

    provigil side effects provigil vs modafinil

  28. pharmaceptica [#]

    purchase 200mg sildenafil https://www.pharmaceptica.com/

  29. whatismodafinil [#]

    https://getmodafinilnow.com/ modafinil adhd

  30. how does accutane work [#]

    roaccutane isotretinoin side effects

  31. GafInvake [#]

    cialis 5mg daily

  32. provigilcost [#]

    modafinil prescription online provigil

  33. bactrim [#]

    sulfamethoxazole tmp ds tablet side effects for sulfamethoxazole trimethoprim

  34. GazInvake [#]

    cialis low price

  35. is ivermectin safe for people [#]

    stromectol tabletten http://stromectolforte.com/ coronavirus cure stromectol

  36. instagram begeni satin al ucuz [#]

    Heya are using WordPress for your blog platform? I’m new to the blog world but
    I’m trying to get started and create my own. Do you need any
    html coding knowledge to make your own blog? Any help would be really appreciated!

  37. GustavoVet [#]

    personal statement writers
    essay writing website

CSSLab