Sectioning with Spans
The span element is the inline equivalent of the
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
<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>