HTML <span> Tag
The <span> tag is a generic inline container for phrasing content and is essentially a container that does not inherently represent anything. It is used to group inline elements so that they can be styled with CSS or manipulated with JavaScript. Unlike block-level elements, <span> elements do not cause a line break before or after themselves, allowing them to sit within a line of text.
Syntax
<span attribute="value">content</span>
Attributes
| Attribute | Value | Description |
|---|---|---|
accesskey |
characters | Specifies a shortcut key to activate/focus the element. |
class |
classname | Specifies one or more class names for the element (often used to apply styles). |
contenteditable |
true/false/inherit |
Specifies if the content is editable by the user. |
dir |
ltr/rtl/auto |
Specifies the direction of the text. |
draggable |
true/false/auto |
Specifies if the element is draggable. |
hidden |
hidden |
Specifies that the element is not yet, or is no longer, relevant. |
id |
unique id | Specifies a unique id for the element. |
lang |
language code | Specifies the language of the element’s content. |
spellcheck |
true/false |
Specifies whether the element is to have its spelling and grammar checked. |
style |
CSS properties | Specifies inline CSS styles for the element. |
tabindex |
number | Specifies the tabbing order of the element. |
title |
text | Specifies extra information about the element. |
translate |
yes/no |
Specifies whether the content of the element should be translated. |
Note: The <span> element also supports the Global HTML Attributes.
Example
<p>
This is a <span style="color:red;">red</span> word within a paragraph.
</p>
More Examples
Highlighting Text
The <span> tag is commonly used to highlight specific parts of the text, such as keywords or important information.
<p>
The <span style="font-weight: bold;">key takeaway</span> from this discussion is the importance of the <span style="text-decoration: underline;">span</span> tag.
</p>
Styling with CSS Classes
You can create CSS classes and use <span> elements to apply specific styling to inline elements.
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
font-style: italic;
}
.special-text {
color: blue;
font-size: 1.2em;
}
</style>
</head>
<body>
<p>
This is <span class="highlight">some highlighted text</span>. And here is some
<span class="special-text">special text</span>.
</p>
</body>
</html>
Combining with JavaScript
The <span> tag can be used to target parts of the text for JavaScript manipulation.
<!DOCTYPE html>
<html>
<body>
<p>
The quick <span id="fox">brown fox</span> jumps over the lazy dog.
</p>
<button onclick="changeColor()">Change Fox Color</button>
<script>
function changeColor() {
document.getElementById("fox").style.color = "green";
}
</script>
</body>
</html>
Using <span> for Inline Icons
You can use <span> tags to display icons by combining it with font icons library.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<p>
Follow us on
<span style="color: #3b5998;"><i class="fab fa-facebook-square"></i></span>
<span style="color: #1da1f2;"><i class="fab fa-twitter-square"></i></span>
</p>
</body>
</html>
Text with Tooltip
Using the title attribute with a <span> tag to provide a tooltip on hover:
<p>
This is some text with a <span title="This is a helpful tooltip">tooltip</span>.
</p>
Browser Support
The <span> tag is supported by all modern browsers:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Notes and Tips
<span>is an inline element, meaning it does not create a line break before or after it. It only takes up as much width as necessary to contain its content.- Use
<span>when you need to target a specific inline portion of text for styling or scripting purposes. - Avoid using
<span>when other more semantic HTML tags are more appropriate such as<p>,<em>,<strong>, etc. <span>elements are very useful in conjunction with CSS classes for applying reusable styles.- When you need a container that will create a new line before and after, use
<div>instead. - Avoid using too many
<span>elements for styling as it can make your code less readable.
The <span> tag is a versatile tool for web developers and mastering its use can greatly enhance the flexibility of your website’s design and functionality.
