Anchor text is not a block level element, can it semantically include span as child?

<a href=""><span></span>Load more Comments <span></span></a>

Anchor text is not a block-level element, can it semantically include span as a child?
Is the above semantically correct?

I think all these are legal:


excluding this:


These are not HTML tags:


Just placeholders for understanding a semantic flow.

Yes it can.
Earlier it was invalid to include block elements such as div in an anchor.
But that has now been relaxed to allow “block links” which allows things like “card” layouts.
Of course it makes sense to display the anchor as a block if it is to contain a block.
But in your case span is in-line so I don’t think it was ever a problem.


Thanks. Inline elements under inline are legal.

<a href=""><div></div></a> If we set a to display: block then this will also become legal?

Yes inline element can always contain other inline elements. That’s what they were designed for :slight_smile:

No the rules of html have nothing to do with CSS. It is already legal. You can change the display of anything in css but it does not change the rules of html. They are separate things.

As Sam said anchors have recently (some years ago but still recent for me) been redefined in the specs so that they can contain block level tags. They are a special case (as are some other special tags that can be both block and inline level tags).

The point Sam was making is that it is now legal to do this <a href=""><div></div></a> but an anchor is still display:inline and won’t encompass the block content properly (or allow you to add dimensions) unless you declare it in css as display:block,. This has nothing to do with the rules of html which stand on their own merits irrespective of what css you applied to them.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.