Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Purpose of an unmarked <span>

Posted on 2011-02-18
9
Medium Priority
?
416 Views
Last Modified: 2012-05-11
I've run into the code below and I'm wondering what the purpose might be of the <span>..</span> tags around the text for the link. If the span has an id or a class then got styled I could see it, but nothing like that is happening here.

Thanks.
span.png
0
Comment
Question by:steva
  • 3
  • 3
  • 2
  • +1
9 Comments
 
LVL 12

Expert Comment

by:geowrian
ID: 34931476
It has no visual meaning by itself when used like that. It could be used by a JavaScript function for something, but there are better ways to do that (i.e. an "ID" attribute is preferable). Or maybe a CSS file applies a special style to the SPAN tag, but that's also unlikely.
See:
http://www.w3schools.com/tags/tag_span.asp

"The <span> tag is used to group inline-elements in a document.

The <span> tag provides no visual change by itself.

The <span> tag provides a way to add a hook to a part of a text or a part of a document.

When the text is hooked in a span element you can add styles to the content, or manipulate the content with for example JavaScript."
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 34931853
I think some design software 'automatically' puts text in <span> tags so it will have a place to add 'styles' if requested.
0
 
LVL 29

Accepted Solution

by:
fibo earned 2000 total points
ID: 34932639
Maybe it is styled with

li a span { ... }

or
.books_nav span { ... }

or variations of this
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:steva
ID: 34933702
Nope.   You guys are all wrong.  The markup is tagging that text to be moved off screen later so that a background image is seen instead: But thanks for the input.  I split the points.


FIR.png
0
 

Author Comment

by:steva
ID: 34933724
After looking at the answers again I realized that fibo actually had it right.  So you get the points, fibo.
Thanks.
0
 
LVL 12

Expert Comment

by:geowrian
ID: 34933957
Actually, my answer does cover that scenario. But don't bother changing the answer/points.
0
 
LVL 29

Expert Comment

by:fibo
ID: 34934077
B-) glad we could help, thx for the grade and points.
CSS can really be nightmare at times.

You should consider using 2 tools to have a better grasp at which "cascades" lead to a given style:
- Xray http://www.westciv.com/xray/ works with IE6+ and FF, really a "no brainer" even though at times it seems less complete than hoped for
- within FF, use the "webdevelopper" add-on which will help you, among other thing, in finding all the cascading styles which affect a given element, and also to "live-edit" the local cached copy of the css, so that you can see the impact at once (...except that there is an issue with background-colors, but this is really a "must-have" tool)
0
 

Author Comment

by:steva
ID: 34937942
Fibo,

I use Firebug now, which is how I found the style applied to the <scan> tags. I have Webdeveloper installed but haven't really explored it yet, as I should.  And I hadn't heard of Xray.  It looks like it costs $60, so it must be good.  I'll look into it.  

Thanks.
0
 
LVL 29

Expert Comment

by:fibo
ID: 34940984
- had some problems with Firebug: I suggest you deactivate it in normal times, and reactivate it just when debugging
- webdevelopper does not show such problems, so I always keept it active (useful for images and source code, and some css work)
- Xray is free. $60 is their other tool "style master"
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

927 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question