SPANS - When to use them?

I understand what SPANS are used for, mostly. Going by the SitePoint reference are there things that you can use SPANS on and things you should never use SPANS on (besides the typical using a SPAN to bold text)?

If there is a difference, it’s minute. The pre element type indicates that all white-space has some sort of semantic meaning, whereas a br element only indicates a semantic line break. But we’re splitting hairs now.

A paragraph can consist of a single sentence, and a sentence can – in extreme cases – be a single word (in a particular context). So ‘a couple anchors’ can be a paragraph (but they probably aren’t in most cases).

An image can definitely ‘be’ a paragraph; or, rather, the text equivalent (alt text) can be a paragraph. Again, in most cases it’s probably not, so I’m not saying you’re wrong … only that there are special cases where you’re not right. :slight_smile:

I know! I just couldn’t help myself. :smiley:

It’s been doing that since October. The stupid web host f***ed something up, including the FTP password. The only thing that seems to work is his invoicing application. :-/

that’s a cheap shot, tommy :slight_smile:

just go ahead and write the html the way it should be written

then let people like that idiot with the older browser see only the semantic markup, because you can use DOM tricks (“progressive enhancement”) to add the cutesy bells and whistles and rounded corners

yeah?

by the way, your site is barfing up php error messages at the momoent

:slight_smile:

see, that’s what really frosts me about css

what that code should look like is this –

<p>Text goes here.</p>

at the very most, i would tolerate this –

<p class="foo">Text goes here.</p>

i keep hearing this “mantra” about separating style from content, but when the rubber hits the road, i ain’t seeing very much of it

:injured:

Span tags are helpful for a lot of css techniques.

image replacement:

<a href="#" ><span>About us</span></a>

In this method the contents of the span tag is hidden and the link has a graphical text background image.

rounded corner box:

<div class='promo'>
<span class='top'>&nbsp;</span>
Text goes here.
<span class='bottom'>&nbsp;</span>
</div>

In this method the top and bottom span are filled with background images.
This technique keeps display images out of your content, and has the benefit of being switchable. For example you could change a green box to a red box or a thin box to wide box just by changing the div class.

This is getting kind of funny…

To me, I see no difference between
(0x0D) inside of PRE and BR. BR means line-break… difference between that and the handling of a CR/LF and/or just LF (depending on how you handle them) is what exactly? No difference.

BR exists BECAUSE HTML is white-space neutral. You turn off white-space neutrality with <pre> - what’s the difference? NONE AT ALL.

While paragraph is something entirely different as it has MEANING - it MEANS “this is a paragraph” – which is why in my mind it’s inappropriate to be slapping paragraphs around things that are NOT paragraphs of text (a couple anchors, just one image, etc).

Oh, I agree. And it could … but unfortunately some people persist in using a browser that doesn’t support CSS well enough for us to do that. Therefore we have to abuse the markup to cater for those luddites, even though there are [url=http://www.opera.com/download/]good browsers available for free. :wink:

The SPAN element exists purely to provide inline style whenever there isn’t another appropriate element to do the task. For example, if you want text to appear stronger and bolder semantically on the page (for it having added importance) you would use STRONG (or EM if you just needed emphasis rather than strength). However if you simply want the “bold” effect purely for stylistic reasons, that’s when the span would appear. :slight_smile:

You use a span when you need to access a span of characters and/or inline elements and there is no semantically appropriate element type available.

Just like you use a div when you need to access block-level information and there is no semantically appropriate element type available.

Example:

<p>This text is <span style="color:red;">red</span>, while this text is <span style="color:blue;">blue</span>!</p>

I employ “span” for what many jokingly call ‘‘down and dirty’’ solutions to one’s needs.!

It seems time wasting to go modify a css file just to make one new class for one solitary use and so “span” is for sure the ideal way to go I find. I use it for usually a color change for a quote for example … or floating one image on a page of text and adding necessary offsets etc. It’s handy and versatile.

You’d still need to add the span even if you were going to add a class or id attribute instead of the style attribute.

dude, no :rolleyes:

use the B element for that

as someone recently said,

The SPAN element exists purely to provide inline style whenever there isn’t another appropriate element to do the task.

I usually use span on addresses to create breaks, you don’t normally pause when you read an address, but it’s typically presented in 3-4 lines. Or if I have to style a specific phrase within a paragraph, like in different font size and color, because you just want to highlight it visually. Oh and also, classes for microformats.

About the don’ts well… I can only think of one: do not put any block elements (div, p, etc) within a span.

Welcome to the forum; especially as you have an intelligent first-post comment to offer, which is not all that common. :slight_smile: I have one area of disagreement, one otherwise, and a short, but intense rant in response.

In which case, it is preformatted text, no?

Or if I have to style a specific phrase within a paragraph, like in different font size and color, because you just want to highlight it visually.
Correct. I think of the span element as a segregator, meant to provide a separate hook to semantically non-specific content.

Oh and also, classes for microformats.
What a kluge! The whole Microformat thing is a work-around (well designed, albeit) for IE’s lack of support for xhtml. Unlike the tables for layout work-around that awaited css-p support we knew was coming, this work-around has no end in sight.

cheers,

gary

Doesn’t the announcement a while ago that IE9 will support XHTML mean that it will eventually end.

Thanks for the welcome! Maybe I should have posted in the introduction forum first. :stuck_out_tongue:

Aha! Thanks for the new idea. I never thought of that, I’ve always used

<pre>

for preformatted code.

It’s OT, but what do you think of HTML5’s microdata, then? Don’t you like being able to download a company’s vcard and all? The reason why I like microformats is because it gives semantic value to items for both machine and the people.

You’d still need to add the span even if you were going to add a class or id attribute instead of the style attribute.

Agreed Stephen - what I meant was it is probably quicker to code the style quickly within the span tags direct on the html page, rather than dig out the css file just to enter a new class for one shot.

Since the thread is about when to use spans I was just pointing out that updating a separate CSS file in that situation doesn’t avoid the need for the span tag. Where you place the styles does not affect the HTML tags you are attaching them to.