Link inside a div link [duplicate]

Question

I would like to have a div that contains an image and some text be a link. So that one can click anywhere (not necessarily the image or text) in the div and be taken to one location. However I would also like there to be another link at the end of the text that brings the user to another location. However, once I add this second link the whole div no longer is a link and just the image and text are links. Is what I am want to do possible?

Answer 1

It is not possible in HTML, since an a element inside an a element is not allowed. By existing HTML specs, you cannot have e.g, div inside a either, but this restriction was never really enforced by browsers and it has been lifted in HTML5 drafts. Nested a elements are a different issue, since it would create an active area inside an active, and its meaning would need to be defined and it would be confusing.

What happens in practice when using

<a href=foo>bla bla <a href=bar>inner link</a> stuff</a> 

is that it works the way you want except that content of the outer a element after the inner a element is not a link at all. Apparently browsers are not prepared to handling constructs like this. Effectively, they imply a closing </a> tag when they encounter an <a> tag when an a element is open. Much like they do for p elements.

So an inner link at the end of a link would sort-of work. There is of course no guarantee that it will keep working in future versions of browsers, or that it works on all browsers.

You could use two separate, non-nested a elements in succession and to place the second one visually inside the first one, using CSS positioning. But this would get somewhat complicated. A much simpler approach is to set up a JavaScript pseudo-link:

<span onclick="document.location.href = 'foo'; return false">inner link</span> 

The downside is that it won’t act in a link-like manner when JavaScript is disabled, and search engines won’t treat it as a link either.

Answer 2

There is a way to do this without any javascript using absolute and relative positioning. This also keeps the code semantic for SEO, which the javascript struggles to do.

 .outside-container {        width: 900px;        margin: 0 auto;        position: relative;        background: #888;        padding: 5px;      }         .overlay {        position: absolute;        height: 100%;        width: 100%;        top: 0; bottom: 0; right: 0; left: 0;        background: white;        opacity: 0;      }            .overlay:hover {        opacity: .2;      }            .text-box {        position: absolute;        top: 5px; right: 5px;        width: 30%;        color: white;        font: georgia, serif 700 14px;      }            .image-box {        width: 68%;      }

<div class = "outside-container">  <img src="https://upload.wikimedia.org/wikipedia/commons/b/bc/George_Berkeley_by_Jonh_Smibert.jpg" alt="george_wiki" class = "image-box">           <a class = "overlay" href = "#div"></a>           <div class = "text-box">             I was considering the odd fate of those men who have in all ages, through an affectation of being distinguished from the vulgar, or some unaccountable turn of thought, pretended either to believe nothing at all, or to believe the most extravagant things in the world. This however might be borne, if their paradoxes and scepticism did not draw after them some consequences of general disadvantage to mankind. But the mischief lieth here; that when men of less leisure see them who are supposed to have spent their whole time in the pursuits of knowledge professing an entire ignorance of all things, or advancing such notions as are repugnant to plain and commonly received principles, they will be tempted to entertain suspicions concerning the most important truths, which they had hitherto held sacred and <a href = "#text">unquestionable.</a>           </div>         </div>

Naturally I thought I was the only one who thought of this, but the question has been answered before. I added this because all the other answers were javascript or jQuery, and felt a pure HTML/CSS one could be useful.