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

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

  • Print
  • + Share This
This chapter is from the book

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

The span element 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-a.jpg and red-b.jpg)

    red-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. (The lang attribute allows you to declare the language of the element’s text.)


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

  • Styling with CSS
  • Behavior with JavaScript

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

To add a span

  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