Solved

Purpose of an unmarked <span>

Posted on 2011-02-18
9
365 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
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
Maybe it is styled with

li a span { ... }

or
.books_nav span { ... }

or variations of this
0
 

Author Comment

by:steva
Comment Utility
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

Author Comment

by:steva
Comment Utility
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
Comment Utility
Actually, my answer does cover that scenario. But don't bother changing the answer/points.
0
 
LVL 29

Expert Comment

by:fibo
Comment Utility
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
Comment Utility
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
Comment Utility
- 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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
CSS alignment question 8 37
Specific DIV Hyperlink Color 1 39
Swiper slider stops between pages 11 29
Bootstap Icons 3 16
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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…

728 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now