Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > HTML/XHTML

  • Print
  • + Share This
  • 💬 Discuss

Creating Spans

The span element, like div, has absolutely no semantic meaning. The difference is that span is appropriate around a word or phrase only, whereas div is for blocks of content (see “Creating Generic Containers” in Chapter 3).

span is useful when you want to apply any of the following to a snippet of content for which HTML doesn’t provide an appropriate semantic element:

  • Attributes, like class, dir, id, lang, title, and more (red_circle-a.jpg and red_circle-b.jpg)

    red_circle-a.jpg In this case, I want to specify the language of a portion of text, but there isn’t an HTML element whose semantics are a fit for “La Casa Milà” in the context of a sentence. The h1 that contains “La Casa Milà” before the paragraph is appropriate semantically because the text is the heading for the content that follows. So for the heading, I simply added the lang attribute to the h1 rather than wrap a span around the heading text unnecessarily for that purpose.

    ...
    
    <body>
    
    
    
    <h1 lang="es">La Casa Milà</h1>
    
    
    
    <p>Gaudí's work was essentially useful. 
    <span lang="es">La Casa Milà</span> is an apartment building and <em>real people </em> live there.</p>
    
    
    
    </body>
    </html>
    04_23.jpg

    red_circle-b.jpg The span element has no default styling.

  • Behavior with JavaScript

Because span has no semantic meaning, use it as a last resort when no other element will do.

To add spans

  1. Type <span.
  2. If desired, type id="name", where name uniquely identifies the spanned content.
  3. If desired, type class="name", where name is the name of the class that the spanned content belongs to.
  4. If desired, type other attributes (such as dir, lang, or title) and their values.
  5. Type > to complete the start span tag.
  6. Create the content you wish to contain in the span.
  7. Type </span>.
  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus