- Starting a New Paragraph
- Adding Author Contact Information
- Creating a Figure
- Specifying Time
- Marking Important and Emphasized Text
- Indicating a Citation or Reference
- Quoting Text
- Highlighting Text
- Explaining Abbreviations
- Defining a Term
- Creating Superscripts and Subscripts
- Noting Edits and Inaccurate Text
- Marking Up Code
- Using Preformatted Text
- Specifying Fine Print
- 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).
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 (
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.... <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>
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
- 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 (see Chapters 10 and 11).