Is it right to add tag inside tag?

Question

I was wondering if we could add a span tag inside a tag....

Answer 1

Yes, it's fine. <span> is an inline element. Unless you add the css display: block; to it, it can go in the <a>.

Answer 2

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 class="lookatme">special and needs treatment</span></a>

This is pointless (for me :-) )

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

THis would normally be

<a href="#" class="lookatme">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

Answer 3

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.

Answer 4

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.

Answer 5

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?

Answer 6

While that code is valid, it's not the best way to do it.

Here's your code again, indented for clarity

<h2 style="text-align: left;">
    <a href="mydomain.com">
        <span style="font-weight: bold;">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 style="text-align: left; padding-bottom: 1em">
    <a href="http://mydomain.com" style="font-weight: bold">Dog dresses</a>
</h2>