Solved

Purpose of an unmarked <span>

Posted on 2011-02-18
9
394 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 83

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 500 total points
ID: 34932639
Maybe it is styled with

li a span { ... }

or
.books_nav span { ... }

or variations of this
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to combine and minify CSS and JS files 5 36
Accordion won't close correctly 5 12
CSS Scroll Center with Static Side. Like EE does. 2 26
Read text on Table 7 25
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

679 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