How to properly create a link to some content in HTML?

Question

Putting an anchor a around a complex div , or a container, containing more buttons and other anchors is not something valid.

What's the correct, valid, way to follow if I want this container to behave as a link to another element?

code sample:

<div class="my-container-where-i-would-like-a-link" data-href="/something">
      ...
      <a href="/something/else">a children link</a>
</div>

Right now I am considering to implement it in JavaScript, I was wondering if there were any better option.

EDIT : Please also consider how SEO unfriendly is using JavaScript to do this.

Answer 1

Without JavaScript I can't think of a way. But the easiest way to do it with JS should be this:

<div class="my-container-where-i-would-like-a-link" onclick="window.location.href = '/something'">

Answer 2

Nested anchor elements are not valid HTML so the only valid option is to use JavaScript.

Google takes links created with onclick="" into account if they are easy to interpret as links. They are taken into account as normal <a> tags. This is confirmed by Matt Cutts, the Google spokesman about referencing issues. (source: http://www.scriptol.com/seo/faq/ ).

This is the best way to go:

<a class="my-container-where-i-would-like-a-link" href="/something">
      ...
    <span onclick="location.href='/something/else'; return false;">a children link</span>
</a>

Use return false; to prevent firing of the parent anchor's click event.

Answer 3

You can do something like this

<div class="my-container-where-i-would-like-a-link" id="tempId" data-href="/something">


$("#tempId").on("click", function() {
    location.href = "something";
});