HTML <span> Tag for Styling Inline Text
The HTML <span> element is a generic inline container. It is commonly used to apply CSS or JavaScript to a specific part of text without creating a new block.
Welcome to <span class="highlighting">plus2net HTML</span> section.Output:
Welcome to plus2net HTML section.
<span> when you need a generic inline hook. If the text has semantic meaning, prefer a more meaningful element such as <strong>, <em>, <mark> or <code>.Basic span Example Top ↑
The original example highlights only selected words inside a sentence:
Welcome to plus2net html section. Use the forum to post any query / doubts on the tutorial.
Welcome to <span style="background-color: #ffff00;">plus2net html</span> section.
Use the forum to post any <span style="color: #cc00cc;">query / doubts</span> on the tutorial.The surrounding sentence remains normal because <span> is inline by default.
Inline Styling with style Top ↑
You can put CSS directly in the style attribute:
<span style="color: brown; background-color: #ffff00;">
Highlighted text
</span>Inline CSS is useful for a small demonstration, but a reusable CSS class is usually better when the same style appears in several places.
span with a CSS Class Top ↑
The old page attempted to create a class named highlighting, but the selector was missing the required dot. A class selector must begin with ..
CSS Top ↑
.highlighting {
color: brown;
font-weight: 700;
background-color: #ffff00;
}HTML Top ↑
We can use a CSS class with span to create
<span class="highlighting">formatted text</span>
and reuse the same style elsewhere.Output: We can use a CSS class with span to create formatted text and reuse the same style elsewhere.
<style><!-- ... --></style> pattern is no longer needed. CSS inside a modern <style> element should be written directly without HTML comment wrappers.span vs Semantic Elements Top ↑
<span> has no special semantic meaning by itself. Choose a semantic element when the content represents a specific meaning.
| Purpose | Prefer |
|---|---|
| Generic styling or scripting hook | <span> |
| Strong importance | <strong> |
| Stress emphasis | <em> |
| Highlighted/relevant text | <mark> |
| Inline computer code | <code> |
For example, if the intention really is to mark text as highlighted or relevant, this is more descriptive:
Search result: <mark>HTML span tag</mark>Background Image with span Top ↑
The original page demonstrates a background image applied to inline text:
Here we are using CSS to add a
<span style="background-image: url(images/bg1.jpg);">background image to this line of text</span>
as an example.Output:
Here we are using CSS to add a background image to this line of text as an example.
title Attribute on span Top ↑
The title attribute can provide advisory text:
To check the example,
<span title="This is the title attribute of the span element">place your pointer here</span>.To check the example, place your pointer here.
title. Tooltip behavior is not equally available to keyboard, touch and assistive-technology users. Important information should remain visible in the page content.Using span with JavaScript Top ↑
A span can also provide an inline target for JavaScript.
<p>Total: <span id="total">0</span></p>
<script>
document.getElementById('total').textContent = '25';
</script>Use textContent when the value should be treated as text rather than parsed as HTML.
Inline Layout Behavior Top ↑
A span is inline by default. It stays in the normal text flow rather than starting a new line.
Before <span class="highlighting">highlighted words</span> after.If you need block-level layout, use a suitable block element or change the CSS display behavior only when that is appropriate.
Common span Mistakes Top ↑
Forgetting the dot in a class selector Top ↑
This does not select class="highlighting":
/* Wrong for a class */
highlighting {
background-color: yellow;
}Use:
.highlighting {
background-color: yellow;
}Using span when a semantic element is better Top ↑
Use <strong>, <em>, <mark> or another meaningful element when the content has that semantic purpose.
Repeating long inline style attributes Top ↑
Use a CSS class when the same presentation is reused.
Depending on title for essential information Top ↑
Keep important instructions visible because title tooltips are not consistently accessible across input methods.
Using span as a replacement for every HTML element Top ↑
Span is generic. Use headings, paragraphs, links, buttons and other semantic elements for their intended purposes.
Related Tutorials Top ↑
<font>. For modern HTML, use CSS for text color and presentation.Frequently Asked Questions Top ↑
It is a generic inline container used mainly as a CSS or JavaScript hook for part of the document.
No. Span is inline by default and normally remains in the surrounding text flow.
Span is inline by default, while div is a generic block container. Choose based on document structure and the type of content being grouped.
Inline style is acceptable for small demonstrations, but reusable styling is usually better placed in a CSS class.
Yes. Span supports global HTML attributes such as id and class.
No. Span is generic and has no special semantic meaning by itself.
Yes. JavaScript can select a span by id or another selector and update its text or attributes.
Bold Text Underline Text Text Color
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
