HTML span Tag

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.

• 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.

• 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.

• 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:

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.