The
<span>tag is an inline container used to group text or elements for styling with CSS or to apply JavaScript functionality.
Unlike<div>,<span>does not create a new block; it is inline and does not affect the layout by itself.
Syntax
<span>Some text here</span>Attributes
| Attribute | Description |
|---|---|
id | Assigns a unique identifier to the <span> element. |
class | Assigns one or more class names for styling or scripting. |
style | Applies inline CSS styles directly to the <span>. |
title | Specifies extra information shown as a tooltip on hover. |
| (Global Attributes) | data-*, lang, dir, etc. can be used as well. |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML span Tag Example</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h2>HTML <span> Tag Example</h2>
<p>This is a normal text and <span class="highlight">this part is highlighted using span</span>.</p>
<p>Hover over this <span title="This is a tooltip">tooltip text</span> to see the title attribute.</p>
</body>
</html>Output
Browser Output
The text inside <span> can be styled or manipulated without affecting the layout of other elements.
Inline styling or class-based CSS changes apply only to the content within the <span>.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
<span> itself does not create visual changes unless styled with CSS or manipulated via JavaScript.
Notes
<span>is purely semantic/structural for inline grouping.- Commonly used for applying CSS styles, attaching event listeners, or wrapping small portions of text.
- Use
<span>for inline elements, and<div>for block-level containers.
Conclusion
The <span> tag is a versatile inline container in HTML, perfect for applying styles or behavior to a portion of text without disrupting the flow of the document.
