How to use the HTML <span> Element

Learn how to use the HTML <span> element.

The HTML <span> element is a generic inline container element, used to mark up text. It’s often used inside another element.

<span> is often used to make part of a text look different from the rest.

Example:

<p>My hat is <span style="color:red">red.</span></p>

You can also use <span> to group elements that share the same styling attribute values via a class.

For example, let’s say you’re writing recipes, and you want to emphasize every word in your text block that is an ingredient-word, with a specific color:

<p>
  To make my delicious garlic butter you need just four ingredients,
  <span class="ingredient">butter</span>,
  <span class="ingredient">garlic</span>,
  <span class="ingredient">salt</span> and
  <span class="ingredient">black pepper.</span>
</p>

You could then create the CSS class as such:

.ingredient {
  color: green;
}

The smart thing about using a reusable class is that if you at some point change your mind about how ingredient words should look visually, you can just change its style once in that .ingredient class, and the effect will take place on every <span> element that uses this class.

For example, let’s say you want to use a bold font, instead of a color to emphasize ingredients:

.ingredient {
  font-weight: bold;
}

The <span> element is similar to the <div>, element, but the main difference is that by default, <span> is an inline element, and <block> is a block-level element. You can however override the elements default styling with CSS.