Span inside anchor or anchor inside span or doesn t matter

Question

I want to nest span and a tags  Should I    Put  lt span gt  inside  lt a gt  Put  lt a gt  inside  lt span gt  It doesn t matter

User · Answer

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

User · Answer

It is perfectly valid  at least by HTML 4 01 and XHTML 1 0 standards  to nest either a  lt span gt  inside an  lt a gt  or an  lt a gt  inside a  lt span gt    Just to prove it to yourself  you can always check it out an the W3C MarkUp Validation Service  I tried validating    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN   http   www w3 org TR html4 strict dtd  gt     lt html gt       lt head gt         lt title gt Title lt  title gt       lt  head gt       lt body gt          lt p gt            lt a href  http   www google com   gt  lt span gt Google lt  span gt  lt  a gt          lt  p gt       lt  body gt     lt  html gt    And also the same as above  but with the  lt a gt  inside the  lt span gt   i e    lt span gt  lt a href  http   www google com  gt Google lt  a gt  lt  span gt    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  lt span gt  then an  lt a gt   make sure you close the  lt a gt  tag first before closing the  lt span gt  and vice-versa

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

It can matter if for instance you are using some sort icon font  I had this just now with    lt span class  fa fa-print fa-3x  gt  lt a href  some link  gt  lt  a gt  lt  span gt    Normally I would put the span inside the A but the styling wasn t taking effect until swapped it round

User · Answer

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

User · Answer

that depends on what you want to markup    if you want a link inside a span  put  lt a gt  inside  lt span gt   if you want to markup something in a link  put  lt span gt  into  lt a gt

User · Answer

3 - It doesn t matter   BUT  I tend to only use a  lt span gt  inside an  lt a gt  if it s only for a part of the contents of the tag i e    lt a href     gt some  lt span class  red  gt text lt  span gt  lt  a gt    Rather than    lt a href     gt  lt span class  red  gt some text lt  span gt  lt  a gt    Which should obviously just be    lt a href     class  red  gt some text lt  a gt

User · Answer

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

[html] Span inside anchor or anchor inside span or doesn't matter?

Examples related to html

Examples related to css

Examples related to semantic-markup