Sectioning with Spans

The span element is the inline equivalent of the <div> element.

stacked building blocks with stickers representing span elements

This means that spans can exist within divs, and do not create full-width blocks. It serves to identify or group content together that requires organization or extra styling. You can have multiple span elements inside a div.

One specific use for the <span> element is to identify text that needs to appear visually unique on the rendered HTML page.

As with the <div> element, the <span> element should include a class or id attribute to provide:

  • a reference to styling code
  • and/or information to developers about the inner content
HTML 
<p>Use <span>the span attribute</span> within block-level elements, like paragraphs.</p>


<!-- For example... -->
<div id="long-blue" class="long-block">
  <p>
    A block with a <span class="white-square">white square</span>,
    <span class="gray-square">gray square</span>,
    another <span class="white-square">white square</span>,
    and <span class="circle">circle</span> on it.
  </p>
</div>

<div id="short-red" class="long-block">
  <p>
    A block with a <span class="black-circle">black circle</span> and <span class="rectangle">rectangle</span> on it.
  </p>
</div>