What does span do in Html
Web structure starts with solid HTML. Learn how What does span do in Html contributes to accessible and semantic web pages in the tutorial below.
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:
