<span>

The span element is a generic mechanism for adding structure or styles to documents. And, since it is a benign element, e.g., they have no default rendering attributes, it is often used by Content Management Systems (CMSs) for placeholders and inserted content by server-side scripts. Multiple span elements may be used; and, they may be nested.

[Note: Sequence (or, precedence) order must be considered when using span elements for presentation. ]

Start tag:
<span>
End tag:
</span>
Example [Common Navigation Hack]:
Code [HTML]:
<div><span><a href="/index">HOME</a></span> | <span><a href="/contact">CONTACT</a></span> | <span><a href="/formaldehyde">FORMALDEHYDE</a></span> | <span><a href="/site-map">SITE MAP</a></span></div>
Example [Typography]:

Example [Typography]:

Code [HTML]:
<p class="exampleName">Example <span class="note">[Typography]</span>:</p>
Example [Nested (Palindrome)]:

This palindrome “Ah, Satan sees Natasha” makes for conversation.

Code [HTML]:
<p><span style="color:#000;">This <span style="color:#ff0000;font-size:1.3em;">palindrome <span style="color:#7c005a;font-size: 2em;">“Ah, Satan sees Natasha”</span> makes for</span> conversation.</span></p>
Example [Design Detail (Unobtrusive)]:

Stéphane Mallarmé (French pronunciation: [malaʁˈme]) (18 March 1842 – 9 September 1898) – in his later works – explored the relationship between content and form, especially that relationship between the words of the text and the arrangement of his words in the white space of the page.

Code [HTML]:
<p><a href="http://en.wikipedia.org/wiki/St%C3%A9phane_Mallarm%C3%A9" title="View Wikipedia article">Stéphane Mallarmé</a><span class="externalLink"></span> (<small>French pronunciation: </small>[malaʁˈme]) (18 March 1842 – 9 September 1898) – in his later works – explored the relationship between content and form, between the text and the arrangement of his words in the white space of the page.</p>
Code [CSS]:

.externalLink {
    width:20px;
    padding-left:10px;
    background:url(/images/meta-glyphs/icon_external_dark.gif) right top no-repeat;
}
Element-Type:
Text-Level [HTML 4.01]
Phrasing Content [HTML 5]
Attributes:

</span>