SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 32
  1. #1
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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)?

  2. #2
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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.

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Birnam wood is come to Dunsinane

  4. #4
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Example:

    Code HTML4Strict:
    <p>This text is <span style="color:red;">red</span>, while this text is <span style="color:blue;">blue</span>!</p>
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  5. #5
    SitePoint Enthusiast ChrisXPPro's Avatar
    Join Date
    Apr 2010
    Location
    PA 15521
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ChrisXPPro View Post
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,250
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    However if you simply want the "bold" effect purely for stylistic reasons, that's when the span would appear.
    dude, no

    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.
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  8. #8
    SitePoint Member mpaulino's Avatar
    Join Date
    Nov 2007
    Location
    Philippines
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome to the forum; especially as you have an intelligent first-post comment to offer, which is not all that common. I have one area of disagreement, one otherwise, and a short, but intense rant in response.

    Quote Originally Posted by mpaulino View Post
    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.
    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
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by gary.turner View Post
    Unlike the tables for layout work-around that awaited css-p support we knew was coming, this work-around has no end in sight.
    Doesn't the announcement a while ago that IE9 will support XHTML mean that it will eventually end.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    SitePoint Member mpaulino's Avatar
    Join Date
    Nov 2007
    Location
    Philippines
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the welcome! Maybe I should have posted in the introduction forum first. :P

    Quote Originally Posted by gary.turner View Post
    In which case, it is preformatted text, no?
    Aha! Thanks for the new idea. I never thought of that, I've always used
    HTML Code:
    <pre>
    for preformatted code.

    Quote Originally Posted by gary.turner View Post
    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.
    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.

  12. #12
    SitePoint Enthusiast ChrisXPPro's Avatar
    Join Date
    Apr 2010
    Location
    PA 15521
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ChrisXPPro View Post
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  14. #14
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Doesn't the announcement a while ago that IE9 will support XHTML mean that it will eventually end.
    If I had heard or read about IE9 and xhtml, I'd forgotten. If it comes to pass, the semantic potential is amazing.

    Quote Originally Posted by mpaulino View Post
    Thanks for the welcome! Maybe I should have posted in the introduction forum first. :P
    Nah. To introduce yourself through intelligent posts is more than sufficient.

    Aha! Thanks for the new idea. I never thought of that, I've always used <pre> for preformatted code.
    Another example of preformatted text is found in poetry and verse markup.

    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.
    Off Topic:

    There is an &#91;ot] bbcode tag. FYI.

    I lost interest in keeping current with html5 when they veered so vehemently onto the pave-the-cowpath um, path. I suggest that xhtml provides a better technology. The many and sundry values are beyond any reasonable scope of a structural markup language standard. On the other hand, a standardized set of xhtml schemata are, by definition* modifiable by the author to fit his own needs.

    Regarding vcards, I use them on some of my own email accounts, and do appreciate corespondents who attach them to their own messages. The same machine readability may be had by the use of semantic element tags, were we able to take advantage of the capability. The concept of v- or hcards is a good one. It's just a damned shame we have to use such a clumsy kluge of a work-around.

    * schema: an organization of concepts and actions that can be revised by new information about the world.

    * xhtml: extensible hypertext markup language.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  15. #15
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by r937 View Post
    dude, no use the B element for that
    The STRONG element is for when semantic importance and strength is needed in context of the content, the B element is for when the contents importance needs to be stated with no semantic value... the SPAN on the other hand is purely for no importance needs to be conveyed (as denoted in the HTML Reference). If the content (as I said) is PURELY for stylistic reasons (and not for offsetting text for importance - semantically or otherwise) then SPAN is the more appropriate element.

  16. #16
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,250
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    sorry, we'll have to disagree then

    the context was "if you simply want the "bold" effect purely for stylistic reasons" (i believe these are your words)

    you go ahead and use SPAN for that, i'll use B

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  17. #17
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by mpaulino View Post
    Thanks for the welcome! Maybe I should have posted in the introduction forum first.
    I've never seen a lot of need for that - far better to dive straight in!

    Aha! Thanks for the new idea. I never thought of that, I've always used <pre> for preformatted code.
    You can use <pre> for any section that needs to be laid out in a particular way - and if the text doesn't need to line up vertically then you can set it to a serif or sans-serif font (rather than monospace) in the CSS, which will look better.

    However - I would generally avoid <pre> and instead just stick a <br> in where you need a line break. It's generally accepted that two examples of content where a <br> is exactly the right element to use to force a new line are postal addresses and poetry - in both cases, the new line is an integral and essential part of the content, so it's right to use an HTML element that sets a new line.

  18. #18
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    The STRONG element is for when semantic importance and strength is needed in context of the content, the B element is for when the contents importance needs to be stated with no semantic value
    That sounds a bit muddled to me ... how can it be considered more important, without attaching semantic value to it?

    w3.org says "B: Renders as bold text style". And that's all it says. The <b> element makes things bold, end of story. So if you have text that you want to make physically bold, but without any structural or semantic importance attached to it, you can use <b>. While <span style="font-weight:bold;">...</span> does exactly the same job, I don't see any reason to waste 32 characters to achieve exactly the same thing!

  19. #19
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    <snip>
    However - I would generally avoid <pre> and instead just stick a <br> in where you need a line break. It's generally accepted that two examples of content where a <br> is exactly the right element to use to force a new line are postal addresses and poetry - in both cases, the new line is an integral and essential part of the content, so it's right to use an HTML element that sets a new line.
    It may be generally accepted; that does not imply it is correct. In the case of poetry, not only are there rhyme and meter, but there is also typographic or visual rhythm. I strongly suggest you study the examples in the link I posted above.

    While I am not comfortable with a blanket endorsement of the br element for marking up addresses, I will stipulate there are cases where it is sufficient.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  20. #20
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by gary.turner View Post
    It may be generally accepted; that does not imply it is correct. In the case of poetry, not only are there rhyme and meter, but there is also typographic or visual rhythm. I strongly suggest you study the examples in the link I posted above.
    While for some poetry the visual layout is important and goes beyond simple lines of text separated by line breaks, for most of it there is no more than that. A number of stanzas, which can be described by <p> elements, each formed of several lines of poetry, which can be separated by <br>s.

    Where the poetry is of a simple form and lends itself to this style of markup, it is far preferable to use <br>s to separate the lines than to wrap the whole lot in a <pre> block, for just the same reason as tables should be marked up with table elements and not faked with <pre> - the markup describes the contents much better that way.

  21. #21
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    […]
    Where the poetry is of a simple form and lends itself to this style of markup, it is far preferable to use <br>s to separate the lines than to wrap the whole lot in a <pre> block, for just the same reason as tables should be marked up with table elements and not faked with <pre> - the markup describes the contents much better that way.
    So, you're saying we should not fake a table's structure with formatting, but we should fake poetic formatting with paragraph tags and line breaks.

    No, thanks.

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  22. #22
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    What Stevie meant is if the text didn't require preserving of whitespace or displaying in a specific manner then it would be perfectly acceptable to use a <br /> (in some special circumstances). I also assume he wasn't just talking about poetry or verse.

    An address would be an example where you could use a <br /> generally speaking it doesn't make a great deal of difference between an address; separated by comma; on one single line or forcing a break. That's all he meant nothing more hopefully that clarifies things.

  23. #23
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know what he meant, xhtmlcoder. I give him the line breaks on most addresses, but poetry is formatted text by convention, if not also definition, thus pre is the semantic container for formatted text.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  24. #24
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by gary.turner View Post
    So, you're saying we should not fake a table's structure with formatting, but we should fake poetic formatting with paragraph tags and line breaks.
    Far from it - I'm saying we should use HTML elements to encode structure into the poetic formatting.

    Yes, there may be a small number of cases where that isn't appropriate, and where <pre> is the best mechanism to preserve the precise layout that the author requires.

    However, I maintain that in the vast majority of cases, paragraphs (which are analogous to stanzas) and line breaks are precisely the sum total of poetic formatting required (possibly with the addition of inline formatting such as italics, which is perfectly compatible with what I'm suggesting). The vast majority of poetry is simply made up of lines - the author never intended them to be set out in a precise and particular way, except that there would be line breaks and stanza breaks in certain places. That is precisely and exactly what using <p> and <br> achieves.

    Using <pre>, on the other hand, is a kludge that should only ever be considered as a last resort, when the need to replicate a precise physical form outweighs any need to attach semantically relevant information to the contents.

  25. #25
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Follow your own inconsistent thinking as you wish. :shrug:

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •