Span inside anchor or anchor inside span or doesn&

Question

I want to nest span and a tags. Should I

1. Put <span> inside <a>
2. Put <a> inside <span>
3. It doesn't matter ?

Answer 1

Semantically I think makes more sense as is a container for a single element and if you need to nest them then that suggests more than element will be inside of the outer one.

Answer 2

3 - It doesn't matter.

BUT, I tend to only use a <span> inside an <a> if it's only for a part of the contents of the tag i.e.

<a href="#">some <span class="red">text</span></a>

Rather than:

<a href="#"><span class="red">some text</span></a>

Which should obviously just be:

<a href="#" class="red">some text</a>

Answer 3

that depends on what you want to markup.

• if you want a link inside a span, put <a> inside <span>.
• if you want to markup something in a link, put <span> into <a>

Answer 4

It can matter if for instance you are using some sort icon font. I had this just now with:

<span class="fa fa-print fa-3x"><a href="some_link"></a></span>

Normally I would put the span inside the A but the styling wasn't taking effect until swapped it round.