Span inside anchor or anchor inside span or doesn't matter?

Html Problem Overview

I want to nest span and a tags. Should I

Put  inside <a>
Put <a> inside 
It doesn't matter ?

Html Solutions

Solution 1 - Html

3 - It doesn't matter.

BUT, I tend to only use a  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>

Solution 2 - Html

It is perfectly valid (at least by HTML 4.01 and XHTML 1.0 standards) to nest either a  inside an <a> or an <a> inside a .

Just to prove it to yourself, you can always check it out an the W3C MarkUp Validation Service

I tried validating:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
	<head>
	  <title>Title</title>
	</head>
	<body>
	   <p>
	     <a href="http://www.google.com/"><span>Google</span></a>
	   </p>
	</body>
  </html>

And also the same as above, but with the <a> inside the 

i.e.

<span><a href="http://www.google.com">Google</a></span>

with both HTML 4.01 and XHTML 1.0 doctypes, and both passed validation successfully!

Only thing to be aware of is to ensure that you close the tags in the correct order. So if you start with a  then an <a>, make sure you close the <a> tag first before closing the  and vice-versa.

Solution 3 - Html

It doesn't matter - they're both allowed inside each other.

Solution 4 - Html

that depends on what you want to markup.

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

Solution 5 - Html

SPAN is a GENERIC inline container. It does not matter whether an a is inside span or span is inside a as both are inline elements. Feel free to do whatever seems logically correct to you.

Solution 6 - Html

It depends on what the span is for. If it refers to the text of the link, and not the fact that it is a link, choose #1. If the span refers to the link as a whole, then choose #2. Unless you explain what the span represents, there's not much more of an answer than that. They're both inline elements, can be syntactically nested in any order.

Solution 7 - Html

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.

Solution 8 - Html

Personally, as a web developer, I only ever put a span within an anchor tag if I am trying to highlight a section of the links text, such as applying a background to one section.

Solution 9 - Html

It will work both, but personally I'd prefer option 2 so the span is "around" the link.

Solution 10 - Html

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.

Content Type	Original Author	Original Content on Stackoverflow
Question	user214582	View Question on Stackoverflow
Solution 1 - Html	Jon Hadley	View Answer on Stackoverflow
Solution 2 - Html	CraigTP	View Answer on Stackoverflow
Solution 3 - Html	Greg	View Answer on Stackoverflow
Solution 4 - Html	knittl	View Answer on Stackoverflow
Solution 5 - Html	Salman A	View Answer on Stackoverflow
Solution 6 - Html	sykora	View Answer on Stackoverflow
Solution 7 - Html	user1368737	View Answer on Stackoverflow
Solution 8 - Html	Xopa	View Answer on Stackoverflow
Solution 9 - Html	Oldskool	View Answer on Stackoverflow
Solution 10 - Html	Toby	View Answer on Stackoverflow