www.webdeveloper.com
Results 1 to 8 of 8

Thread: [RESOLVED] Why are <span> tags useful?

  1. #1
    Join Date
    Dec 2012
    Posts
    81

    resolved [RESOLVED] Why are <span> tags useful?

    I was just reviewing a brief tutorial on W3Schools and after reviewing <span> tags, I have a question. What are they for?

    Here's some HTML with <span> tags...

    Code:
    <!DOCTYPE html>
    <html>
    <body>
    
    <p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
    
    </body>
    </html>

    And here's some HTML without <span> tags, utilizing other tags...

    Code:
    <!DOCTYPE html>
    <html>
    <body>
    
    <p>My mother has <font color="blue"><strong>blue</strong></font> eyes and my father has <font color="yellow"><strong>dark green</strong></font> eyes.</p>
    
    </body>
    </html>
    So, if I can accomplish the same goal with both, is there a more significant use for <span> tags?


    -Jared

  2. #2
    Join Date
    Mar 2011
    Posts
    1,136
    As your examples demonstrate, the <span> tag is used to provide a containing element for inline content. The code does get messy when you use the 'style' attribute in a <span> tag, but you always have the preferred option of using an 'id' or 'class' attribute instead to allow you to control the CSS in your stylesheet to give you easier access and to keep your HTML cleaner.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Dec 2012
    Posts
    81
    So, within my HTML, <span> tags allow me to customize something within the HTML without using a formal <div id="id_name"></div>?

    Can I create a syle (in the stylesheet) and then carry it over to HTML like this?

    The quick sly fox jumped over the lazy <span class="brown">brown</span> dog.

    Is that what you mean?

  4. #4
    Join Date
    Mar 2011
    Posts
    1,136
    Yes, but to be clear, your entire document is HTML. The <span> tag is an inline element, so it would be used to contain other inline content like text or <img> tags, not block-level elements like <div> or <p>.
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    Be careful, though, that you aren't just apeing the old FONT element. Ask yourself why you are using a span. To change the color of a word or two? If you are doing that to add emphasis then use the EM element instead. Only use SPAN if no other HTML elements apply and then consider using a microformat. ( http://en.wikipedia.org/wiki/Microformat )
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  6. #6
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,111
    In your example, you're using "strong." You could simply do this:

    Code:
    <p>The quick <strong class="brown">brown</strong> fox jumped ...</p>
    Then in your CSS, you'd have this:

    .brown {color: brown;}
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  7. #7
    Join Date
    Feb 2013
    Location
    USA
    Posts
    40
    Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic.

  8. #8
    Join Date
    May 2013
    Posts
    119
    its so helpful and easy way to apply different format on any class or id.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles