The shape-shifting "a" element

Published: 24 November 2022

Do you remember when HTML elements were classified into some broad categories like "block-level", "inline" and "replaced" elements?

There were always issues with these categories as many elements did not fit neatly into any category.

In HTML5, a new set of content categories was introduced. These categories are used when defining the content models for each element. They include:

• Metadata content
• Flow content
• Phrasing content
• Sectioning content
• Heading content
• Embedded content
• Interactive content

There are also some lessor categories:

• Palpable content
• Script-supported content
• Transparent content models

What does this have to do with the <a> element? Well, this element falls into four of these HTML content categories:

1. Flow content
2. Phrasing content
3. Interactive content (if there is an href attribute present)
4. Palpable content (if there is at least one node in its contents that is palpable content)

Descendant elements

But what elements can be placed inside the <a> element - as child or descendant elements?

Some elements, like the <article>, allow flow content as child or descendant elements.

<article>
  <div>Flow content</div>
</article>

<article>
  <p>Flow content</p>
</article>

Other elements, like the <span>, allow only phrasing content as child or descendant elements.

<span>
  <em>Phrasing content</em>
</span>

<span>
  <b>Phrasing content</b>
</span>

The <a> element cannot have descendants that are interactive content or elements that have a tabindex attribute specified.

This makes sense, because you should never place a link or a button inside another link.

<a href="#">
  <a href="">Hello world</a>
</a>

<a href="#">
  <button>Hello world</button>
</a>

The <a> element is considered "transparent". This means that it's a shape-shifter! The content model of the <a> element is derived from the content model of its parent element.

Let's look at two examples:

In the example below, the <a> element is positioned inside the <article> element - which allows flow content. So, the "transparent" <a> element also allows flow content:

<article>
  <a href="#">
    <div>Flow content</div>
  </a>
</article>

In the example below, the <a> element is positioned inside the <span> element, which only allows phrasing content. So, the "transparent" <a> element also only allows phrasing content:

<span>
  <a href="#">
    <em>Phrasing content</em>
  </a>
</span>

That's it for the shape-shifting <a> element!

Note: In the simplified examples above, the <article> element does not include a heading. However, headings should always be included within the <article> element, to help with labelling / identification.