<Div> Inside Link (<A Href="">) Tag

Is putting a div inside an anchor ever correct?

Depending on the version of HTML you're catering to:

• HTML 5 states that the <a> element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".

• HTML 4.01 specifies that <a> elements may only contain inline elements. A <div> is a block element, so it may not appear inside an <a>.

  Of course you are at liberty to style an inline element such that it appears to be a block, or indeed style a block so that it is rendered inline. The use of the terms inline and block in HTML refers to the relationship of the elements to the semantic structure of the document, whereas the same terms in CSS are related more to the visual styling of the elements. If you make inline elements display in a blocky manner, that's fine.

  However you should ensure that the structure of the document still makes sense when CSS is not present, for example when accessed via an assistive technology such as a screen reader - or indeed when examined by the mighty Googlebot.

DIV inside link (a href=) tag

No, the link assigned to the containing <a> will be assigned to every elements inside it.

And, this is not the proper way. You can make a <a> behave like a <div>.

An Example ^[Demo]

CSS

a.divlink { 
     display:block;
     width:500px;
     height:500px; 
     float:left;
}

HTML

<div>
    <a class="divlink" href="yourlink.html">
         The text or elements inside the elements
    </a>
    <a class="divlink" href="yourlink2.html">
         Another text or element
    </a>
</div>

Creating anchor tag inside anchor tag

As @j08691 describes, nested a elements are forbidden in HTML syntax. HTML specifications do not say why; they just emphasize the rule.

On the practical side, browsers effectively enforce this restriction in their parsing rules, so unlike in many other issues, violating the specs just won’t work. The parsers effectively treat an <a> start tag inside an open a element as implicitly terminating the open element before starting a new one.

So if you write <a href=foo>foo <a href=bar>bar</a> zap</a>, you won’t get nested elements. Browsers will parse it as <a href=foo>foo</a> <a href=bar>bar</a> zap, i.e. as two consecutive links followed by some plain text.

There is nothing inherently illogical with nested a elements: they could be implemented so that clicking on “foo” or “zap” activates the outer link, clicking on “bar” activates the inner link. But I don’t see a reason to use such a structure, and the designers of HTML probably didn’t see one either, so they decided to forbid it and thereby simplify things.

(If you really wanted to simulate nested links, you could use a normal link as the outer link and a span element with a suitable event handler as the inner “link”. Alternatively, you could duplicate links: <a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a>.)

Open an anchor link inside a div

Couple of problems in the code to point out...

First is that the selectors are not right. You have a space after your element and it's class which is wrong (Eg:ul .ulStyle here .ulStyle is considered as a child of ul).The selector must be like this

$('div#results ul.ulStyle li.list-group-item a.anchorStyle')

Notice I have removed the spaces between the element and it's class..

Even after getting this changes done it still won't work for you because the elements are added dynamically. Taking this line from the OP

I'm programmatic-ly creating a ul and appending li's to it from array items then appending the ul to a div.

So this calls for a need to use event delegation

The syntax must change to

$(document).on('click','div#results ul.ulStyle li.list-group-item a.anchorStyle',function(){//your stuff here});

Further you can keep the selector simple as
'#results a.anchorStyle'

a href link for entire div in HTML/CSS

UPDATE 06/10/2014: using div's inside a's is semantically correct in HTML5.

You'll need to choose between the following scenarios:

<a href="http://google.com">
    <div>
        Hello world
    </div>
</a>

which is semantically incorrect, but it will work.

<div style="cursor: pointer;" onclick="window.location='http://google.com';">
    Hello world
</div>

which is semantically correct but it involves using JS.

<a href="http://google.com">
    <span style="display: block;">
        Hello world
    </span>
</a>

which is semantically correct and works as expected but is not a div any more.

Wrapping DIV inside Anchor tag or otherwise

HTML5, you can wrap a DIV inside an A anchor

<a href="page1.html">
    <div>
        <!-- complex layout - WITHOUT ANCHORS OR BUTTONS -->
    </div>
</a>

only if inside <!-- complex layout --> you don't have another <a> or Form-action elements like <button> etc.

Otherwise you can do:

<div id="#redirectLink" data-link="page1.html">
    <!-- complex layout -->
</div>

<script>
document.querySelectorAll("[data-link]").forEach( el =>  {
   el.addEventListener("click", () => window.location.href = el.dataset.link);
});
</script>

or simply:

<div id="#redirectLink" onclick="window.location.href='page1.html';">
    <!-- complex layout -->
</div>

but inline JavaScript is bad design since hard to maintain and debug, so prefer having it in your script files.

---

Related Topics