CODEWITHSUNDEEP
html
kirb
kirb

Reputation: 2049

Is it ok to have an `<a>` inside another `<a>`?

If I had a link to another page, and another link was put inside it, would that be ok to do? Is it allowed in HTML5 and if so, which browsers support it?

Trying this in Chrome 14.0.835.202, I see the text on the left gets linked, followed by the #1 link, but the rest doesn't get linked.

Example:

<p>
 <a href="download?file=2">Example file.txt</a>
 [
  <a href="revision?file=2&id=8">This is an example revision that fixes bug 
   <a href="bug?file=2&id=1">#1</a>. 
   Version number updated.
  </a>
 ]
</p>

Upvotes: 33

Views: 23804

Answers (5)

Eddy Freddy
Eddy Freddy

Reputation: 1816

Even on HTML5 it's not allowed...

See here: the Living HTML Standard

The a element can 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).

Upvotes: 5

calvinf
calvinf

Reputation: 3914

According to the W3C specification for links HTML4: No.

Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.

Or, in the HTML Living Standard:

Links are a conceptual construct, created by a, area, form, and link elements, that represent a connection between two resources

Upvotes: 11

kojiro
kojiro

Reputation: 77089

No, you cannot nest a elements in HTML 4 or 5. The key part of the spec that clarifies this is that when an a is a link, it is interactive content, and the content model of the a is

Transparent, but there must be no interactive content descendent

Reference

Upvotes: 8

zzzzBov
zzzzBov

Reputation: 179046

According to the HTML specification for links: No.

Content model:
Transparent, but there must be no interactive content descendant.

Upvotes: 35

Artjoms
Artjoms

Reputation: 1

It's not allowed, but you can do something like this:

<a href="revision?file=2&id=8">This is an example revision that fixes bug </a>
<a href="bug?file=2&id=1">#1</a>. 
<a href="revision?file=2&id=8">
  Version number updated.
</a>

Upvotes: -1

Related Questions