Is it right to add tag inside tag?

Question

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

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

.bold {font-weight: bold; }

OR

<h2 class="bold"><a href="mydomain">Dog dresses</a></h2>

h2.bold a { font-weight: bold; }

Please share your views..

dont forget to mark answer as accepted if you got the info you want — Pranay Rana, Sep 28 '11 at 06:45

score 21 · Answer 1 · answered Sep 15 '11 at 07:24

21

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

answered Sep 15 '11 at 07:24

Paul

139,544
27
275
264

5

NB that this changes in HTML 5 – [see this blog post](http://html5doctor.com/block-level-links-in-html-5/) – lonesomeday Sep 15 '11 at 07:29
@lonesomeday What does NB mean? – Paul Jun 10 '16 at 16:30
1

It means "note that". – lonesomeday Jun 12 '16 at 22:18
5

Note that what changes in HTML 5 is that you can use block elements in anchors, **not** that you can't use inline elements anymore… – Skippy le Grand Gourou Jun 22 '17 at 14:21

Ian G · Answer 2 · 2011-09-15T08:37:03.583

14

Both forms are legal. (<a> inside  or  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  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

edited Sep 15 '11 at 08:37

answered Sep 15 '11 at 07:26

Ian G

29,468
21
78
92

1

"illegal: you cannot put block level tags in an " - [Not in HTML 5, it isn't](http://html5doctor.com/block-level-links-in-html-5/) – Eric Sep 15 '11 at 07:57
I still live in an old XHTML world :-), but i have updated and learnt something new – Ian G Sep 15 '11 at 08:35
The `` is stylized as rectangle while the `
` inside is stylized separately - thus (your 2nd example) a required case for me.
– Ujjwal Singh Dec 23 '16 at 08:45

score 3 · Answer 3 · answered Sep 15 '11 at 07:55

3

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  . 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>

answered Sep 15 '11 at 07:55

Eric

95,302
53
242
374

In this case there is no need, however I tend to add span tags within my anchor tags so that you can added "image buttons" to the link and hide the text that is within. – Tim B James Sep 16 '11 at 11:53
@Tim: I'm not sure whether it's still acceptable, but you can keep the image and remove the text with `text-indent: -9999px`, which requires no extra element. – Eric Sep 16 '11 at 14:40
absolutely nothing wrong with that http://stackoverflow.com/questions/1763235/span-inside-a-or-a-inside-span-or-doenst-matter `text-indent` to me is just a cheats way :P – Tim B James Sep 16 '11 at 14:57
@Tim: I was referring to my method being possibly unacceptable, not yours. I was just pointing out a way of doing it without extra markup. – Eric Sep 16 '11 at 16:02

score 1 · Answer 4 · edited May 23 '17 at 12:09

1

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?

edited May 23 '17 at 12:09

Community

1
1

answered Sep 15 '11 at 07:22

brain

2,507
1
13
12

score 1 · Answer 5 · answered Sep 15 '11 at 07:26

1

It is legal and safe. You can always check your markup at free validation service of w3 organisation: http://validator.w3.org/check

answered Sep 15 '11 at 07:26

a.b

9,414
5
26
22

score 0 · Answer 6 · answered Aug 05 '18 at 22:35

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.

score 0 · Answer 7 · answered Sep 15 '11 at 07:26

If memory serves correctly, yes, you're allowed to have a  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.

score 0 · Answer 8 · answered Sep 15 '11 at 08:04

0

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.

answered Sep 15 '11 at 08:04

Rakesh

1

Is it right to add tag inside tag?

8 Answers8

Linked

Related