The \<span> tag in HTML is utilized for grouping inline elements together and applying styles to them. It allows styles to be applied using class or id attributes. While similar to the \<div> tag in HTML, the \<span> tag is considered an inline element. It is typically used when there are no other specific semantic tags available for the purpose.
The <span> tag is a paired tag, which means it requires both an opening and a closing tag. It is essential to remember to close this tag properly.
The comprehension of the <span> tag can be facilitated through the use of illustrative examples. Let's explore a range of instances to enhance our understanding.
Illustrative Example 1: In this instance, the span element is utilized in conjunction with the inline style property.
<!Doctype Html>
<Html>
<Head>
<Title>
Use inline Style in span tag
</Title>
</Head>
<Body>
Hello User!...
<center>
<p><span style = "color:blue;">
You are at C# Tutorial Site....
</span>
</p>
<p><span style = "color:blue;">
You are at C# Tutorial Site....<span style = "color:orange;"> This page describes what is span and how to use span in Html</span>
Ok... User.
</span>
</p>
</center>
</Body>
</Html>
The HTML code displayed above produces the output depicted in the screenshot below:
Illustrative Example 2: Below is an instance that demonstrates the utilization of the span element alongside the internal CSS styling.
<!Doctype Html>
<Html>
<Head>
<Title>
Use CSS in span tag
</Title>
<style type=text/css>
span{
color: green;
font-size: 20px;
text-decoration: underline;
font-weight: bold;
}
</style>
</Head>
<Body>
Hello User!...
<center>
<p><span>
You are at C# Tutorial Site....
</span>
</p>
</center>
</Body>
</Html>
The result of the HTML code above can be viewed in the screenshot provided below: