I was wondering if we could add a span tag inside a tag....
<h2><a href="mydomain.com"><span>Dog dresses</span></a><br></h2> Is the above method right? Is it safe to use...???
I know that We can define some class here and let it go inside other elements like this.
<h2><a href="mydomain">Dog dresses</a></h2> .bold {font-weight: bold; } OR
<h2><a href="mydomain">Dog dresses</a></h2> h2.bold a { font-weight: bold; } Please share your views..
18 Answers
Yes, it's fine. <span> is an inline element. Unless you add the css display: block; to it, it can go in the <a>.
Both forms are legal. (<a> inside <span> or <span> inside <a/>)
<a><div></div></a> <!-- illegal < HTML 5, you cannot put block level tags in an <a> --> <!-- legal in HTML 5 --> BUT, normally I would only use a <span> inside an <a> for some purpose, because there is some content which needs special treatment
<a href="#">this is <span>special and needs treatment</span></a> This is pointless (for me :-) )
<a href="#"><span>some text</span></a> THis would normally be
<a href="#">some text</a> I normally think with <heading> tags, the <a> should be inside the <heading>, but I don't think it is wrong to do the reverse
While that code is valid, it's not the best way to do it.
Here's your code again, indented for clarity
<h2> <a href="mydomain.com"> <span>Dog dresses</span> </a> <br> </h2> The first thing to notice is you have a trailing <br>. What's that for? Extra spacing? Well use padding instead!
Secondly, you don't need the span element - the bold style can be applied directly to the <a> tag.
Why not just write it like this:
<h2> <a href="">Dog dresses</a> </h2> It's perfectly legal to have a span tag inside an a tag.
Also read this:
Span inside anchor or anchor inside span or doesn't matter?
It is legal and safe. You can always check your markup at free validation service of w3 organisation:
If memory serves correctly, yes, you're allowed to have a <span> within an <a>, and an <a> within an <h2>. Where you define your class is up to you; put it wherever it makes most sense.
You can check if you've written valid HTML here, but don't fret too much if it doesn't validate as long as it renders correctly in all the prominent browsers.
I would perfer to use CSS rather then using inside . It reduce the complexity of HTML code, it reduce the stress to the browser, by not rendering complex structure. Easy to grab using JavaScript.
I want to add a different perspective which lacks among answers. Imagine you want to achive something like this, partially linked header:
<h1><a href="stackoverflow.com">This</a> site is amazing</h1> and a link which is a partial header:
<a href="stackoverflow.com"><h1>This</h1> site is amazing</a> which makes not much sense but syntactically true.
