What is the 'Span' Tag in HTML?
In HTML, the span element is a versatile inline tag. By using a span element, we can enclose specific text and apply styling through CSS properties. The syntax of the span tag is defined by enclosing it within angle brackets, with both an opening and closing tag.
Syntax:
We can define the syntax of the span element using the angle brackets for both its opening and closing tags.
<span>Content goes here</span>
We can refer to the span element as the universal tag since its name does not reveal any specific information to developers. Similarly, users may not understand the significance of "span". On the contrary, the semantic tag serves as the antonym of the universal tag. It describes all tags based on their names.
The span elements are commonly referred to as inline elements. An inline element is one that remains within the current line without causing a line break. Conversely, a semantic element will generate the element on a new line.
Note: HTML <span> is much similar as <div> tag, but <div> is used for block-level elements and <span> tag is used for inline elements.
What does 'span' do in HTML?
The <span> tag has no impact on how the page is displayed. On the other hand, the <span> tag carries significant capabilities. It is possible to apply the global attribute to various inline elements. Attributes such as ID and class are commonly utilized within the inline tag. To illustrate, let's delve into an example.
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#red-text { color: red; }
#green-text { color: green; }
.highlighted { background-color: lightblue; }
#new-font { font-family: Helvetica; }
#new-font-size { font-size: 24px; }
</style>
</head>
<body>
<p>We can use span tags to target text with CSS styling, like with <span id="red-text">this red text</span> and <span id="green-text">this green text</span>.</p>
<p>You can use span for <span class="highlighted">any CSS rule</span>. Here, I'm using the <span class=" highlighted">background-color</span> property to <span class="highlighted">highlight text</span>.</p>
<p>You're not limited to color either. You can change the <span id="new-font">font family</span> or <span id="new-font-size">font size</span>.</p>
</body>
</html>
Output:
We have the option to add the CSS attribute to the HTML element contained within the HTML <span> tag. The CSS attribute can be specified using internal CSS. Additional CSS attributes can be applied to the span tag as well. Within HTML, the lang attribute serves the purpose of indicating a temporary language alteration to the browser.
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>French Phrase</title>
</head>
<body>
<p>In French, the phrase <span lang="fr">"s'il te pla?t"</span> means "please."</p>
</body>
</html>
Output:
By utilizing a span element, we can pinpoint a specific section for manipulation through JavaScript. Consider the following illustration. In this instance, the span element conceals certain text content, which becomes visible upon clicking the span element.
Example 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#answer { display: none; }
</style>
</head>
<body>
<h2>Welcome To Example</h2>
<p>Q: How many moons does Jupiter have?</p>
<p>A: <span id="answer">79!</span></p>
<button onclick="clicked()">Reveal the answer</button>
<script>
function clicked() {
var answerText = document.getElementById("answer");
answerText.style.display = "inline";
}
</script>
</body>
</html>
Output:
After selecting the span element, the concealed content will appear following the provided output below.
With the assistance of a span element, we can also apply both bold and italic styles to the text. However, in coding conventions, it is recommended to utilize a strong tag instead. This is because, for emphasizing text with bold and italic styles, contemporary semantic tags such as <strong> and <em> are now available. An illustration is provided below for better understanding.
Example 4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#bolded { font-weight: bold; }
#italicized { font-style: italic; }
</style>
</head>
<body>
<p>Welcome to <span id="bolded">C# Tutorial.</span>.</p>
<p>Welcome to <strong>C# Tutorial.</strong>.</p> <!-- this approach is better -->
<p>Welcome to <span id="italicized">C# Tutorial.</span>.</p>
<p>Welcome to <em>C# Tutorial.</em>.</p>
</body>
</html>
Output:
Before examining the variance between the span element and the div element, let's first observe the distinction in the appearance of the code output.
Example 5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div-0 {
background-color: #7fd1de;
padding: 20px;
color: white;
}
#div-1 {
background-color: #b4bbe8;
padding: 10px;
}
#span-0 {
background-color: #ffbcac;
padding: 5px;
font-weight: bold;
}
#span-1 {
background-color: #7fded2;
padding: 5px;
color: white;
}
</style>
</head>
<body>
<div id="div-0">
<h2>This is a heading inside a div element</h2>
<p>This a paragraph inside a div element.<p>
</div>
<div id="div-1">
<h2>This is a heading inside a div element</h2>
<p>This a paragraph inside a div element.<p>
</div>
<span id="span-0">This text is inside a span element.</span>
<span id="span-1">This text is inside another span element.</span>
</body>
</html>
Output:
Difference Between Div Tag and Span Tag
When we create the webpage, <div> and <span> tags are commonly used. We can also call <div> tag a block-level element, whereas <span> tag is an inline element.
| <div> Tag | <span> Tag |
|---|---|
| <div> tag is also known as a block-level element. | <span> tag is known as an inline-level element. |
| It takes the whole width of the web page. | It only takes the required width of the webpage. |
| Some examples of the <div> tag are Headings, Paragraph, forms, etc. | Some examples of <span> tags are attribute, image, etc. |
| We can make use of <div> tag for the creation of the web layout of the web page. | We can make use of <span> tag for the container of some text. |
| In <div> tag, there is no need for attributes; we can only use the common CSS property. | In <span> tag, there is no need for attributes; we can only use the common CSS property. |
With the help of the <span> tag, We can not create a line break similar to the <div> tag. With the help of <span> tag, we can separate the things from the other elements and place them in a single line.