CODEWITHSUNDEEP
htmlvalidationhtml4
Ahmad
Ahmad

Reputation: 24847

What elements can be contained within a <a> tag?

What are the valid html elements, if any, that can be contained within a <a> tag?

Upvotes: 46

Views: 33424

Answers (7)

Alireza Fattahi
Alireza Fattahi

Reputation: 45475

The below example completes @aya answer from https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element:concept-element-content-model:

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).

<aside>
 <h1>Advertising</h1>
 <a href="https://www.example.com">
  <section>
   <h1>Fun Travel!</h1>
   <p>Travel to Neverland</p>
   <p>$9.99 + free transfer.</p>
  </section>
 </a>
 <a href="https://www.example.com">
  <section>
   <h1>Family Fun!</h1>
   <p>Visit us at Freeland</p>
   <p>No charge!</p>
  </section>
 </a>
</aside>

Upvotes: 0

Aya
Aya

Reputation: 811

As of HTML 5, <a> may contain not only (valid) inline elements, but also block elements, etc.

W3: https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element:concept-element-content-model

Upvotes: 81

meder omuraliev
meder omuraliev

Reputation: 186562

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.

Upvotes: 31

Guffa
Guffa

Reputation: 700322

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; }

Upvotes: 1

Quentin
Quentin

Reputation: 943527

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.

Upvotes: 2

Aleš Roub&#237;ček
Aleš Roub&#237;ček

Reputation: 5187

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.

Upvotes: 1

Mike Sherov
Mike Sherov

Reputation: 13427

An <a> tag can contain any Inline Element besides another <a> tag.

Upvotes: 3

Related Questions