How do you make a div tag into a link

Question

How do you make a div tag into a link   I would like my entire div to be clickable

User · Answer

If you re using HTML5  as pointed in this other question  you can put your div inside a    lt a href  http   www google com  gt  lt div gt Some content here lt  div gt  lt  a gt    Preffer this method as it makes clear in your structure that all the content is clickable  and where it s pointing

User · Answer

If you have to set your anchor tag inside the div  you can also use CSS to set the anchor to fill the div via display block   As such    lt div style  height  80px  gt  lt a href     style  display  block  gt Text lt  a gt  lt  div gt    Now when the user floats their cursor in that div the anchor tag will fill the div

User · Answer

DON T DO IT    If you want a link  wrap the content in the proper  lt A gt NCHOR lt  a gt   If you want to turn the  lt DIV gt  into a link  use  Javascript  to wrap the  lt DIV gt  inside an  lt A gt NCHOR lt  A gt  If you want to perform some action when clicking the  lt DIV gt  use the onclick event handler    and don t call it a  link

User · Answer

lt div style  cursor pointer  onclick  document location  http   www google com   gt Content Goes Here lt  div gt

User · Answer

You could use Javascript to achieve this effect  If you use a framework this sort of thing becomes quite simple  Here is an example in jQuery      div id   click function  e         Do whatever you want       This solution has the distinct advantage of keeping the logic not in your markup

User · Answer

Keep in mind that search spiders don t index JS code  So  if you put your URL inside JS code and make sure to also include it inside a traditional HTML link elsewhere on the page    That is  if you want the linked pages to be indexed by Google  etc

User · Answer

lt div style  cursor pointer   onclick  document location  http   www google com   gt Foo lt  div gt

User · Answer

JS    lt div onclick  location href  url   gt content lt  div gt    jQuery      div   click function       window location   this  find  a   attr  href    return false        Make sure to use cursor pointer for these DIVs

User · Answer

You can make the entire DIV function as a link by adding an onclick  window location  TARGET URL   and by setting its style to  cursor pointer    But it s often a bad idea to do this because search engines won t be able to follow the resulting link  readers won t be able to open in tabs or copy the link location  etc   Instead  you can create a regular anchor tag and then set its style to display block   and then style this as you would a DIV

User · Answer

So you want an element to be something it s not   Generally speaking this isn t a good idea  If you need a link  use a link  Most of the time it s easier to just use the appropriate markup where it belongs   That all said  sometimes you just have to break the rules  Now  the question doesn t  have javascript  so I m going to put the disclaimer here   You can t have a  lt div gt  act as a link without either using a link  or equivalent  such as a  lt form gt  that only contains a submit button  or using JavaScript   From here on out  this answer is going to assume that JavaScript is allowed  and furthermore that jQuery is being used  for brevity of example    With that all said  lets dig into what makes a link a link     Links are generally elements that you click on so that they navigate you to a new document   It seems simple enough  Listen for a click event and change the location   Don t do this   x000D   x000D      link   on  click   function      x000D    window location    http   example com   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  link  gt Fake Link lt  div gt  x000D   x000D   x000D    There you have it  the  lt div gt  is now a link  Wait   what s that  What about accessibility  Oh right  screen readers and users of assistive technology won t be able to click on the link  especially if they re only using the keyboard   Fixing that s pretty simple  let s allow keyboard only users to focus the  lt div gt   and trigger the click event when they press Enter   Don t do this either   x000D   x000D      link   on   x000D     click   function      x000D      window location    http   example com   x000D       x000D     keydown   function  e    x000D      if  e which     13    x000D          this  trigger  click    x000D        x000D      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  link  tabindex  0  gt Fake Link lt  div gt  x000D   x000D   x000D    Again  there you have it  this  lt div gt  is now a link  Wait   again  Still accessibility problems  Oh ok  so it turns out that the assistive technology doesn t know that the  lt div gt  is a link yet  so even though you can get there via keyboard  users aren t being told what to do with it   Fortunately  there s an attribute that can be used to override an HTML element s default role  so that screen readers and the like know how to categorize customized elements  like our  lt div gt  here  The attribute is of course the  role  attribute  and it nicely tells screen readers that our  lt div gt  is a link   Ugh  this is getting worse every minute   x000D   x000D      role  link     on   x000D     click   function      x000D      window location    http   example com   x000D       x000D     keydown   function  e    x000D      if  e which     13    x000D          this  trigger  click    x000D        x000D      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div role  link  tabindex  0  gt Fake Link lt  div gt  x000D   x000D   x000D    Finally  our  lt div gt  is a lin---oh now the other devs are complaining  What now   Ok  so the devs don t like the code  They tried to preventDefault on the event  and it just keeps working  That s easy to fix   I warned you this was bad   x000D   x000D    document  on   x000D     click   function  e    x000D      if   e isDefaultPrevented      x000D        window location    http   example com   x000D        x000D       x000D     keydown   function  e    x000D      if  e which     13  amp  amp   e isDefaultPrevented      x000D          this  trigger  click    x000D        x000D      x000D       role  link      x000D   x000D      aria-disabled  true     on  click   function  e    x000D    e preventDefault    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div role  link  tabindex  0  gt Fake Link lt  div gt  x000D   lt div role  link  aria-disabled  true  tabindex  0  gt Fake disabled link lt  div gt  x000D   x000D   x000D    There we have it---THERE S MORE  What else don t I know  Tell me everything NOW so that I can fix it    Ok  so there s no way to specify target  We can fix that by updating to window open  Click events and keyboard events are ignoring Ctrl  Alt  and Shift keys  That s easy enough  just need to check those values on the event object  There s no way to specify contextual data  Let s just add some  data-   attributes  and call it a day with that one  The click event isn t obeying the mouse button that s being used  middle mouse should open in a new tab  right mouse shouldn t be triggering the event  Easy enough  just add some more checks to the event listeners  The styles look weird  WELL OF COURSE THE STYLES ARE WEIRD  IT S A  lt DIV gt  NOT AN ANCHOR    well  I ll address the first four issues  and NO MORE  I ve had it with this stupid custom element garbage  I should have just used an  lt a gt  element from the beginning   Told you so   x000D   x000D    document  on   x000D     click   function  e    x000D      var target  x000D          href  x000D      if   e isDefaultPrevented    amp  amp   e which     1    e which     2     x000D        target     this  data  target        self   x000D        href     this  data  href    x000D        if  e ctrlKey    e shiftKey    e which     2    x000D          target     blank     close enough x000D          x000D        open href  target   x000D        x000D       x000D     keydown   function  e    x000D      if  e which     13  amp  amp   e isDefaultPrevented      x000D          this  trigger   x000D          type   click   x000D          ctrlKey  e ctrlKey  x000D          altKey  e altKey  x000D          shiftKey  e shiftKey x000D            x000D        x000D      x000D       role  link      x000D   x000D      aria-disabled  true     on  click   function  e    x000D    e preventDefault    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div role  link  tabindex  0  data-href  http   example com   gt Fake Link lt  div gt  x000D   lt div role  link  tabindex  0  data-href  http   example com   data-target   blank  gt Fake Link With Target lt  div gt  x000D   lt div role  link  aria-disabled  true  tabindex  0  data-href  http   example com   gt Fake disabled link lt  div gt  x000D   x000D   x000D    Note that stack snippets won t open popup windows because of how they re sandboxed   That s it  That s the end of this rabbit hole  All of that craziness when you could have simply had    lt a href  http   example com   gt         your markup here     lt  a gt    The code I posted here probably has problems  It probably has bugs that even I don t realize as of yet  Trying to duplicate what browsers give you for free is tough  There are so many nuances that are easy to overlook that it s simply not worth trying to emulate it 99  of the time

[html] How do you make a div tag into a link

Examples related to html

Examples related to anchor