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.