Hello all.

 

What does the <span> tag do and when should I use it?

 

 

Thanks.

Hi

 

have a look here

 

http://www.w3schools.com/TAGS/tag_span.asp

i understand it to be a sort of does all, use to wrap anything that doesn't have a specific tag sort of tag. say if you want to make a word italic and bold and red in a paragraph u could use a span to wrap that specific word and give it an ID and style it.

ha ha i really dont know what they do

the span tag allows you to apply css classes (maybe more tags) to smaller sections of text. So if you have a paragraph but then you want to control a few words and have them look differently than the rest you use the span a tag.

 

Like this:

 

<p class="text">This is a sentence. <span class="highlight">This will look different based on what the class highlight states<span> this part will go back to what the class text states</p>

 

I hope this helps

I'd advise, for my old friend semantics, of only using <span> tags if you absolutely have to as they are semantically meaningless. i.e. ask yourself why you want to apply a style to the text and see if it's not already covered by another, semantically meaningful tag (<em>, <strong>, <q>, <cite>, <q> etc.).

 

Don't forget you can apply classes to these tags too so you can have different ways of adding emphasis etc.

 

I'd say spans are there as a last resort for when there is absolutely no semantic meaning and for overcoming current CSS limitations to get some layout right (e.g. in the same way that <div> 'wrappers' are used). Using spans purely for aesthetics is another example of not separating style from the code (i.e. semantics).

Thank God... I thought I was some sort of newbie for not using them.

Its basically a way to style bits of text which tags such as <cite> <em> <small> <strong> etc can't do by standard. You can edit the way <strong> looks, but its better to use a span and leave strong vaguely "bold" looking.

I'd advise, for my old friend semantics, of only using <span> tags if you absolutely have to as they are semantically meaningless. i.e. ask yourself why you want to apply a style to the text and see if it's not already covered by another, semantically meaningful tag (<em>, <strong>, <q>, <cite>, <q> etc.).

 

Don't forget you can apply classes to these tags too so you can have different ways of adding emphasis etc.

 

I'd say spans are there as a last resort for when there is absolutely no semantic meaning and for overcoming current CSS limitations to get some layout right (e.g. in the same way that <div> 'wrappers' are used). Using spans purely for aesthetics is another example of not separating style from the code (i.e. semantics).

Another programmer told me not to use Span tags unless it needed. Because he said it will muddle up the code with too many span styles. I guess Wizely you're right.

span tags are semantically incorrect and should not be used except in extreme circumstances where not other option is available.

Old Wise Wizely is right <span></span> is a bugger that should be left alone if you can avoid it. It's really a bother how Dreamweaver over uses the bloody things. I mean god forbid you use the WYSIWYG for a quick moment before you know it your code is covered in the buggers.

 

Thanks guys for all the answers. Wow! Wizely, your advice is very helpful.

 

I mean god forbid you use the WYSIWYG for a quick moment before you know it your code is covered in the buggers.

 

 

Yup. I used to use WYSIWYG, but about 9 months ago I dropped it and am never going back. EVER.

HTML <span> tag

 

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

 

Tip: Use the <span> tag to group inline-elements to format them with styles

 

Example

 

Source

 

<p>This is a paragraph <span style="color:#0000FF;">This is a paragraph</span>  This is a paragraph</p>

<p>
<span style="color:#00DD45;">
This is another paragraph
</span>
</p>

 

Output

 

This is a paragraph This is a paragraph This is a paragraph

 

This is another paragraph

 

 

.........................................................................

 

NYC Web Development

Web site designers

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

Tip: Use the <span> tag to group inline-elements to format them with styles

Yep. But you've just got to ask yourself why you want that blue and green text and if the reason is covered by another tag use it in preference to <span>. If there is no suitable tag and there's no semantic meaning (so it's purely for decoration) then strongly consider living without it (i.e. changing your design idea for that element) before resorting to <span>.

Just to point out that if you want to use a span to make some text bold, think about using <b> or <strong> first and create a class to further style it. Some search engines use words flagged as bold or strong when they index your site.

Generally I work on 3 levels when writing xhtml, explained below (These aren't standard rules but a way I feel comfortable).

 

<div> Division : I use this for large chucks/sections (a division) of a page.... May it be a header block, footer block, or main content

 

<p> Paragraph : I use this pretty much only for text, it is what it is!

 

<span> : Generally I only use this is a wrap... Say ive got a paragraph of text but want a few words in red. I'd do the following:

 

<div id="main_content">
 <p class="std_txt">This is a normal sentence,<span class="red">but I want this bit in red</span> but this bit to go back to normal</p>
</div>

Generally I work on 3 levels when writing xhtml, explained below (These aren't standard rules but a way I feel comfortable).

 

<div> Division : I use this for large chucks/sections (a division) of a page.... May it be a header block, footer block, or main content

 

<p> Paragraph : I use this pretty much only for text, it is what it is!

 

<span> : Generally I only use this is a wrap... Say ive got a paragraph of text but want a few words in red. I'd do the following:

 

<div id="main_content">
 <p class="std_txt">This is a normal sentence,<span class="red">but I want this bit in red</span> but this bit to go back to normal</p>
</div>

 

Ah. Thank you! That makes sense.

A span tag can be handy when you want to apply some styles that simply don't matter to the content.

 

Image replacements simply wouldn't be possible without the span tag. While it's theoretically possible with any tag, span is the only tag with the necessary meaninglessness to be correct.

 

Another good use of span tags is to draw visual attention to something that doesn't require a difference in tone. For example, consider the phrase "To cancel, press the red button labeled 'cancel'." If a screen-reader reads the phrase, the colour of the button is meaningless since the screen-reader won't describe the colour. However, making the text red make the text easier to scan; a fully sighted person will see the red text, be drawn to the full sentence and find the cancel button quickly. The most correct markup for that would be to put the word "red" in span tags.

I'd advise, for my old friend semantics, of only using <span> tags if you absolutely have to as they are semantically meaningless. i.e. ask yourself why you want to apply a style to the text and see if it's not already covered by another, semantically meaningful tag (<em>, <strong>, <q>, <cite>, <q> etc.).

 

Don't forget you can apply classes to these tags too so you can have different ways of adding emphasis etc.

 

I'd say spans are there as a last resort for when there is absolutely no semantic meaning and for overcoming current CSS limitations to get some layout right (e.g. in the same way that <div> 'wrappers' are used). Using spans purely for aesthetics is another example of not separating style from the code (i.e. semantics).

 

I've got to totally agree with you. Using tags suchs as <em> is (in my opinion) very bad practise, as different browsers can parse this differently, where as something like <span style='font-style: italic'> is very precise...

 

Just my opinion, I'd love to hear others?

I've got to totally agree with you. Using tags suchs as <em> is (in my opinion) very bad practise, as different browsers can parse this differently, where as something like <span style='font-style: italic'> is very precise...

 

Just my opinion, I'd love to hear others?

 

 

don't agree there! the whole point of a css file is to write the style rules for the browser, rather than rely on its defauts. style the <em> with css to give it a default font-style (e.g italic). just the same as using span but more semantically correct as it means 'emphasis' rather than 'whatever is in me'.

 

i sometimes use span for image replacement - gilder/levin method, but agree that it should be avoided if there is an alternative.

I've got to totally agree with you. Using tags suchs as <em> is (in my opinion) very bad practise, as different browsers can parse this differently, where as something like <span style='font-style: italic'> is very precise...

That's weird you agree with me considering I said the exact opposite!!!!

agreeing to disagree, maybe?

 

For the record, I'm with wizely on this... if something needs a span, question why you're using it in the first place. If it's to actually add actual meaning, there's probably a more suitable tag out there. If there's no meaning, well... why bother?

<span> comes in very handy from time to time. Here's a very useful article that outlines it's uses:

 

When you wrap text with an opening <span> and closing </span>, you’re simply providing a hook—one that allows you to add styles (by adding a class attribute and using CSS to define the look of that class), or interact with the element via JavaScript and the Document Object Model (DOM).

 

Use it sparingly, but for the right thing.

Oooo..double posted

...Using tags suchs as <em> is (in my opinion) very bad practise, as different browsers can parse this differently, where as something like <span style='font-style: italic'> is very precise...

No it's completely the opposite of very bad practise. It's very good practise!!!! Inline styling means you bloat your code and make it harder and more costly to maintain. All browsers render <em> in the same way and semantically it is the right thing to use!!