- Adding a Paragraph
- Specifying Fine Print
- Marking Important and Emphasized Text
- Creating a Figure
- Indicating a Citation or Reference
- Quoting Text
- Specifying Time
- Explaining Abbreviations
- Defining a Term
- Creating Superscripts and Subscripts
- Adding Author Contact Information
- Noting Edits and Inaccurate Text
- Marking Up Code
- Using Preformatted Text
- Highlighting Text
- Creating a Line Break
- Creating Spans
- Other Elements
This chapter is from the book
This chapter is from the book
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 (
and 
) 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.)
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
- Type <span.
- If desired, type id="name", where name uniquely identifies the spanned content.
- If desired, type class="name", where name is the name of the class that the spanned content belongs to.
- If desired, type other attributes (such as dir, lang, or title) and their values.
- Type > to complete the start span tag.
- Create the content you wish to contain in the span.
- Type </span>.
TIP
A span doesn’t have default formatting 
, but just as with other HTML elements, you can apply your own with CSS.