The HTML <span> tag is a generic inline container for inline elements and content. It is used to group elements for styling purposes (by using the class or id attributes), A better way to use it when no other semantic element is available.
The span tag is a paired tag means it has both open(<) and closing (>) tags, and it is mandatory to close the tag. The span tag is used for the grouping of inline elements & this tag does not make any visual change by itself.
Syntax:Â
<span class="">Some Text</span>
Attribute:Â
This tag accepts all the Global attribute and Event Attributes
Definition and Usage:
- The
<span>
tag is an inline HTML element used to apply styles or manipulate specific portions of text within a larger block of content.
- It also enables the grouping of inline elements within a larger block, allowing for targeted styling or scripting.
- TheÂ
<span>
 tag is much like the <div> element, but <div> is a block-level element and <span>
 is an inline element.
- Commonly used with CSS styles to alter the appearance of selected text without affecting the overall structure.
Example 1: In this example, we simply use a span tag with style in HTML.
HTML
<!DOCTYPE html>
< html >
< body >
< h2 >Welcome To GeeksforGeeks</ h2 >
< p >
GeeksforGeeks is a
< span style = "color:red;font-weight:bolder" >
computer science
</ span > portal for
< span style = "background-color: lightgreen;" >
geeks
</ span >.
</ p >
</ body >
</ html >
|
Output:
HTML tag
Example 2: In this example, suppose we want to write three times GeeksforGeeks in three lines with bold, italic, underline, in green color with font-family = courier new, so we need to use many HTML tags such as <b>, <i>, <u>, <font> for every time in every line, and we want to make changes need to modify every tag.
HTML
<!DOCTYPE html>
< html >
< body >
< h2 >
Welcome To GfG
</ h2 >
< span >
The span tag does not create a line break
</ span >
< span >
it allows the user to separate things from other elements
</ span >
< span >
around them on a page within the same line
</ span >
< br >
< font color = "009900" size = "6" >
< b >
< u >
< i >GeeksforGeeks</ i >
</ u >
</ b >
</ font >
< br >
< font color = "009900" size = "6" >
< b >
< u >
< i >GeeksforGeeks</ i >
</ u >
</ b >
</ font >
< br >
< font color = "009900" size = "6" >
< b >
< u >
< i >GeeksforGeeks</ i >
</ u >
</ b >
</ font >
</ body >
</ html >
|
Output:
Example 3: In this example, by using <span> tag, we can reduce code and HTML Attributes, see the below example that will display the same output as the above example with using <span> tag by applying CSS in a span tag.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
GeeksforGeeks span tag
</ title >
< style type = text /css>
span {
color: green;
text-decoration: underline;
font-style: italic;
font-weight: bold;
font-size: 26px;
}
</ style >
</ head >
< body >
< h2 >
Welcome To GFG
</ h2 >
< span >
GeeksforGeeks
</ span >< br />
< span >
GeeksforGeeks
</ span >< br />
< span >
GeeksforGeeks
</ span >< br />
</ body >
</ html >
|
Output:
Styling the tag using the CSS properties
Example 4: As we know span is an inline tag & it takes space as much as required and leaves space for other elements. All four-span elements will display in the same line because each tag takes only the necessary space and the rest of the space free for other elements.
HTML
<!DOCTYPE html>
< html >
< head >
< title >GeeksforGeeks span tag</ title >
</ head >
< body >
< h2 >
Welcome To GfG
</ h2 >
< 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 tag illustrates inline-element to acquire the required space for the element Â
Example 5: A span tag can be used to set color/background color as a part of a text. In the below example inside paragraph applying, three times span tag with a different style.Â
HTML
<!DOCTYPE html>
< html >
< head >
< title >GeeksforGeeks span tag</ title >
</ head >
< body >
< h2 >Welcome To GfG</ h2 >
< p >
< span style = "background-color:lightgreen" >
GeeksforGeeks
</ span > is A Computer Science Portal where you can
< span style = "color:blue;" >Publish
</ span > your own
< span style = "background-color:lightblue;" >articles
</ span > and share your knowledge with the world!!
</ p >
</ body >
</ html >
|
Output:
Setting the color using tag
Example 6:Â Manipulate JavaScript with span tag, in the below example, we add a span tag inside a paragraph with id=”demo” we can change its text by applying javascript in this example GFG will be changed “GeeksforGeeks” after clicking on Button.Â
HTML
<!DOCTYPE html>
< html >
< body >
< h2 >Welcome to GfG</ h2 >
< p >
< span id = "demo" style = "background-color:lightgreen;" >GfG
</ span >
A computer Science portal for Geeks
</ p >
< button type = "button" onclick="document.getElementById('demo') .innerHTML =
'GeeksforGeeks!!!' ">Change Text!
</ button >
</ body >
</ html >
|
Output:
Manipulation of the
Supported Browsers:Â
- Google Chrome 1
- Edge 12
- Firefox 1
- Opera 15
- Safari 1
Last Updated :
26 Dec, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...