HTML <span> Tag
The HTML <span> tag is an inline container that is used to group and apply styles or scripts to specific parts of text or elements within a document.
- The
<span>tag is inline, meaning it doesn't create a new line. It stays within the same line as the text around it. - The
<span>tag doesn’t change how the content looks on its own. It's used to apply styles or to control parts of content through JavaScript.
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>
In this example, we use 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.
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks span tag</title>
<!-- style for span tag -->
<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>
Output:
Example 2: Inline Behavior of <span> Elements
In this example, 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.
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks span tag</title>
</head>
<body>
<!-- span tags with inline style/css -->
<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>
Output:
<span> vs <div> tag
Both <span> and <div> are used as containers in HTML, there are key differences between them:
<span> | <div> |
|---|---|
| Inline element | Block-level element |
| For styling or grouping inline content | For grouping block-level content |
| Does not break the flow of text | Starts on a new line and takes up full width |
| Styling or scripting small portions of text | Structuring larger sections of content |
Best Practices for Using the <span> Tag
- Avoid Overuse: Don't overuse
<span>tags unnecessarily. Only use it when you need to apply specific styles or functionality to small portions of text. - Use Classes for Styling: Prefer using CSS classes over inline styles for better maintainability and cleaner code.
- Keep Accessibility in Mind: When using
<span>, ensure that it doesn’t negatively affect the accessibility of your content. Add ARIA attributes if necessary for screen readers. - Group Inline Content: Use
<span>for grouping small portions of text or inline elements for styling or JavaScript manipulation without disrupting the layout.
Browsers Support
| Browsers |  |  |  |  |  |
|---|---|---|---|---|---|
| <span> tag | Yes | Yes | Yes | Yes | Yes |
Conclusion
The HTML <span> tag is a versatile inline element used for applying styles or manipulating small sections of content. While it doesn't add any semantic meaning to the content, it plays an essential role in web development by providing hooks for styling and scripting.
