HTML span Tag

Last Updated : 3 Apr, 2026

The HTML <span> tag is an inline element used to group parts of text or elements so you can apply styles or scripts to them. It stays on the same line as surrounding content and doesn’t change how the text looks by itself.

  • <span> is inline, so it doesn’t create a new line.
  • It is used to apply CSS styles to specific text or elements.
  • It can be targeted with JavaScript for dynamic changes.
  • Alone, <span> does not affect appearance, styling or scripting is needed.
HTML 
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    span {
      color: green;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p>This is a <span>highlighted text</span> using the span tag.</p>
</body>
</html>
  • The <span> tag highlights part of the paragraph.
  • CSS makes the highlighted text green and bold.

Syntax:

<span class="">Some Text</span>

Note: HTML <span> tag supports the Global attribute and Event Attributes.

Examples of HTML <span> Tag

Here are a few examples of the HTML span Tag:

Example 1: Reducing Code and Grouping Styles with <span>

Using the <span> tag to apply CSS styles directly to specific content, reducing repetitive HTML attributes. This approach ensures cleaner code and a consistent style across elements.

HTML 
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      span {
        color: green;
        text-decoration: underline;
        font-style: italic;
        font-weight: bold;
        font-size: 26px;
      }
    </style>
  </head>
  <body>
    <span> GeeksforGeeks </span><br />
    <span> GeeksforGeeks </span><br />
    <span> GeeksforGeeks </span><br />
  </body>
</html>
  • The <span> tags highlight each "GeeksforGeeks" text individually.
  • CSS styles them green, bold, italic, underlined, and larger (26px) to make them stand out.

Example 2: Inline Behavior of <span> Elements

The <span> tag works as an inline element. Each <span> takes only the space required for its content, allowing multiple <span> elements to appear on the same line without affecting the overall layout.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <span style="background-color:powderblue;"> GfG </span>
    <span style="background-color: lightgray;"> -Contribute- </span>
    <span style="background-color: yellow;"> Article </span>
    <span style="background-color: lightgreen;"> GCET </span>
</body>
</html>
  • The <span> tags highlight each piece of text separately.
  • Inline CSS gives each span a different background color.

<span> Vs <div> Tag

Both <span> and <div> are used as containers in HTML, there are key differences between them:

<span><div>
Inline elementBlock-level element
For styling or grouping inline contentFor grouping block-level content
Does not break the flow of textStarts on a new line and takes up full width
Styling or scripting small portions of textStructuring larger sections of content

Best Practices

Efficient use of <span> improves styling control while preserving proper HTML structure.

  • Avoid Overuse: Only use <span> when you need to style or manipulate small portions of text. Don’t add it unnecessarily.
  • Use Classes for Styling: Prefer CSS classes over inline styles for cleaner, more maintainable code.
  • Keep Accessibility in Mind: Ensure <span> doesn’t negatively affect accessibility; use ARIA attributes if needed.
  • Group Inline Content: Use <span> to group small portions of text or inline elements for styling or JavaScript without breaking the layout.
Comment
Article Tags:
Web Technologies
HTML
HTML-Tags

Explore