Back to HTML Course

HTML Course

Span

The <span> tag is an inline container used to mark up a part of a text, or a part of a document.

The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute.

The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.

HTML

<h1>
  <span style="color:blue">P</span>
  <span style="color:green">R</span>
  <span style="color:brown">A</span>
  <span style="color:violet">V</span>
  <span style="color:red">E</span>
  <span style="color:orange">E</span>
  <span style="color:yellow">N</span>&nbsp;
  <span style="color:blueviolet">O</span>
  <span style="color:lawngreen">R</span>
  <span style="color:blanchedalmond">U</span>
  <span style="color:khaki">G</span>
  <span style="color:orangered">A</span>
  <span style="color:yellowgreen">N</span>
  <span style="color:aqua">T</span>
  <span style="color:burlywood">I</span>
</h1>

CSS

h1 {
  text-align: center;
}

You can check out the Demo.