What are the valid html elements, if any, that can be contained within a <a> tag?
Asked
Active
Viewed 3.0k times
43
-
[The MDN `a` page](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) says "Permitted content: Transparent, containing either [flow content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content) or [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content)." – Jeroen Aug 11 '14 at 13:45
6 Answers
77
As of HTML 5, <a> may contain not only (valid) inline elements, but also block elements, etc.
Matthew Nichols
- 4,866
- 4
- 41
- 48
Aya
- 771
- 1
- 5
- 2
-
4Nice find. It's also worth noting its parent must be an element that is allowed to contain block elements. – remarsh Dec 13 '14 at 00:55
-
9The precise link to the paragraph that discuss this question: http://w3c.github.io/html-reference/a.html#a-changes – Laizer Jun 13 '16 at 11:18
-
-
The link in the answer was dead so I fixed it, but I like the context given on the page @Laizer mentions. – Matthew Nichols Jan 04 '23 at 21:40
31
Inline elements ( a, span, strong, em among others ) can contain other inline elements and text nodes. An anchor can contain a span, which can contain a text node.
Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
From http://www.w3.org/TR/html401/struct/global.html
As noted in other answers, you can't nest an a in an a.
Digital Fu
- 2,877
- 1
- 14
- 20
meder omuraliev
- 183,342
- 71
- 393
- 434
-
-
1You can find out if you make a html document and validate @ http://validator.w3.org/ :) – meder omuraliev Jul 31 '10 at 18:52
-
question was actually inspired by another SO question :). I'm not actually doing this and somehow dont ever see myself using a `` within an ``.. Thanks.. another 6 minutes to go before i can mark this as accepted. – Ahmad Jul 31 '10 at 18:58
2
See the anchor section of the specification.
<!ELEMENT A - - (%inline;)* -(A) -- anchor -->
The relevant section is (%inline;)* -(A), which means "Anything in the group %inline excluding A elements". %inline is hyperlinked to make it easier for you to expand it.
Quentin
- 914,110
- 126
- 1,211
- 1,335
1
It can contain plain text and inline elements. Inline elements are following:
TT | I | B | BIG | SMALL | EM | STRONG | DFN | CODE | SAMP |
KBD | VAR | CITE | ABBR | ACRONYM | A | IMG | OBJECT | BR |
SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO
But A can not be nested in another A and nesting SCRIPT doesn't make senese.
Aleš Roubíček
- 5,198
- 27
- 29
-
You forgot the [formctrl](http://www.w3.org/TR/html401/sgml/dtd.html#formctrl) elements there. (Hell, who would use a `select` inside an `a`?) – user123444555621 Jul 31 '10 at 20:13
-
I forgot them by intention :) There is no need to nesting forms elements in anchor. Maybe without href attribute, but who use it today? :) – Aleš Roubíček Aug 01 '10 at 16:22
-
Why doesn't nesting script make sense? If I have text/plain it would be nice to treat that nested script tag as data and not a tag. – John Zabroski Apr 24 '13 at 17:20
1
An anchor tag is an inline element, so it can contain other inline elements (except other anchor tags).
If you want to put a block element inside an anchor, you have to use an inline element and turn it into a block element using CSS, along with the anchor tag itself.
Example:
<a href="page.html" class="blocklink"><span>eat me</span></a>
CSS:
.blocklink { display: block; }
.blocklink span { display: block; }
Guffa
- 687,336
- 108
- 737
- 1,005