Why are <span> tags useful?

The SPAN element has very similar properties to the DIV element, in that it changes the style of the text it encloses. But without any style attributes, the SPAN element won’t change the enclosed items at all.

There is one difference between div and span. In standard HTML, a div is a block-level element whereas a span is an inline element. The div block visually isolates a section of a document on the page, in the same way as a paragraph. The span element contains a piece of information inline with the surrounding text.

Wiki

p { text-transform: uppercase; }
<p>This is a paragraph that is all in uppercase, but I want <span style="text-transform: none; font-style: italic;">this text</span> in normal lowercase, italicized.</p>

See jsFiddle. Note that you can use class and id instead, I just wrote the styles inline in this case.

Just to add to the great information posted so far, you can think of span as a tool to style a container that can be used to style one or more words or phrases. In addition, its useful as a target container when using JavaScript where you may want to dynamically update the text within the span. Say for instance you have an invoice on the screen and you want to update the total cost as the user adds items to the order. You use javascript to update the contents of the span.