Enlaces vacíos y semánticos

6/Abr/2009 197

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. Baauwi [#]

    lola vardenafil generic – vardenafil canada vardenafil tablets 20 mg

  2. generic tadalafil united states [#]

    tadalafil 60 mg for sale https://tadalafilgenc.com/ what is tadalafil tadalafil 60 mg for sale

  3. Kixzmr [#]

    vardenafil professional – free vardenafil vardenafil buy online

  4. tadalafil 40 [#]

    tadalafil pills https://tadalafilgenc.com/ tadalafil pills 20mg buy tadalafil us

  5. tadalafil 40 [#]

    generic tadalafil https://pulmoprestadalafil.com/ generic tadalafil generic tadalafil united states

  6. tadalafil 60 mg for sale [#]

    tadalafil generic https://superactivetadalafil.com/ 40 mg tadalafil order tadalafil

  7. generic tadalafil 40 mg [#]

    tadalafil tablets https://pulmoprestadalafil.com/ tadalafil gel tadalafil

  8. tadalafil online [#]

    tadalafil 30 mg https://nextadalafil.com/ tadalafil pills 20mg tadalafil 30 mg

  9. tadalafil generic [#]

    tadalafil pills 20mg https://pulmoprestadalafil.com/ tadalafil tablets buy tadalafil us

  10. JohnnyNop [#]

    best treatment for ed ed pills for sale – buying ed pills online

  11. Pwdjqn [#]

    canada pharmacy – cvs online pharmacy canada pharmacy online

  12. Wdfuho [#]

    best canadian online pharmacy – canadian pharmacy coupon code canadian pharmacy no scripts

  13. buy cialis usa [#]

    tadalafil brands cialis without a doctor prescription tadalafil medication

  14. cialis pills [#]

    is tadalafil and cialis the same thing cialis 20 mg buy tadalafil

  15. how long does tadalafil last [#]

    tadalafil uses side effects of tadalafil tadalafil warnings

  16. JohnnyNop [#]

    online med pharmacy online pharmacy no prescription – ez pharmacy

  17. buy tadalafil powder [#]

    taldenafil tadalafil cost tadalafil peptide

  18. JohnnyNop [#]

    buy amoxicillin online uk buy antibiotic – amoxicillin 500mg over the counter

  19. Mvfjku [#]

    order cialis canadian pharmacy – cialis paypal uk cialis 5mg

  20. Udkchk [#]

    cialis viagra levitra – mail order pharmacy india buy cialis online 20mg

  21. JohnnyNop [#]

    amoxicillin 500 mg brand name flagyl antibiotic – zithromax 250 mg australia

  22. Eqyuqo [#]

    viagra rx – cost viagra otc generic viagra

  23. Dzjrkg [#]

    viagra soft 50mg – purchase viagra in australia sildenafil tablets 100mg uk

  24. DavidPraib [#]

    ed treatment pills: online canadian drugstore erection problems

  25. DavidPraib [#]

    best ed pills non prescription: ed meds online canada generic ed pills

  26. Cgfhax [#]

    generic vardenafil for sale – buy cheap generic vardenafil vardenafil 20mg tab

  27. Adclyo [#]

    buy vardenafil in canada – how to buy vardenafil online vardenafil for women

  28. KevinchaWn [#]

    buy viagra online usa – how much is viagra when will viagra be generic

  29. KevinchaWn [#]

    where can i buy viagra over the counter – viagra without a doctor prescription usa п»їviagra pills

  30. Qudzfp [#]

    bruno vardenafil generic – vardenafil online bestellen rezeptfrei generic vardenafil 20 mg

  31. Vovytp [#]

    generic vardenafil 100mg – best online pharmacy vardenafil cheapest place to buy vardenafil

  32. Pixruw [#]

    ivermectin 6 tablet – buy stromectol usa ivermectin brand name

  33. Muazhm [#]

    buy ivermectin online – stromectol nz stromectol for head lice

  34. KevinchaWn [#]

    neurontin capsules buy gabapentin – where can i buy neurontin from canada

  35. Meovft [#]

    where to buy viagra in singapore – viagra 2019 where to buy generic viagra online

  36. Mpyqac [#]

    is online viagra real – buy sildenafil 100mg uk sildenafil San Jose

  37. KevinchaWn [#]

    where can i get doxycycline buy doxycycline 100mg – doxycycline 100mg dogs

  38. KevinchaWn [#]

    neurontin price south africa neurontin – buy neurontin 100 mg canada

  39. pharmaceptica.com [#]

    what is hydroxychloride https://pharmaceptica.com/

  40. Lpsehu [#]

    cialis discount price – cialis super active online how to get cialis prescription australia

  41. Liuldg [#]

    buy tadalafil 20mg – tadalafil 20 mg paypal can you buy cialis over the counter in mexico

  42. KevinchaWn [#]

    discount neurontin buy gabapentin – neurontin 50 mg

  43. KevinchaWn [#]

    amoxicillin without a doctors prescription amoxicillin 500 mg without a prescription – amoxicillin buy canada

  44. KevinchaWn [#]

    aralen medication chloroquine india – chloroquine tablets buy

  45. Gmpqjo [#]

    prednisone cream rx – 50 mg prednisone online where can i buy prednisone online

  46. Qqpfzd [#]

    prednisone 20 mg tablet – buy prednisone tablets online 20mg prednisone

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

CSSLab