HTML Span Tag

What is the 'Span' Tag in HTML?

In HTML, the span tag is a generic inline element. With the help of a span tag, we can wrap a particular text and provide the style with the help of a CSS property. We can write the syntax of the span tag with the help of opening and closing the angular bracket.

Syntax:

We can write the syntax of the span tag with the help of opening and closing the angular bracket.

We can also call the span element the generic tag because the developer cannot know anything about it by seeing its name. Also, the user does not know the meaning of the "span". The opposite word of the generic tag is the semantic tag. The name of the semantic tag describes all the tags about the names.

The span tags are also known as the inline tags. The inline tag means the element stays in the current line and does not create any new line. However, the semantic tag creates the element in 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 does not affect the rendering of the page. But the <span> tag is so much more powerful. We can also assign the global attribute to any other inline elements. The attributes used inside the inline tag are ID and class. Let's understand with the 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 can apply the CSS property to the HTML element inside the HTML <span> tag. We can provide the CSS property with the help of the internal CSS property. We can also implement other CSS properties to the span tag. In HTML, there is a lang attribute that is used to notify the browser that there is a temporary language change.

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:

With the help of a span tag, we can target a particular section using JavaScript. Let us take the below example. In the example below, a span tag hides some text. When we click on that span tag, then it reveals the text.

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 javaTpoint</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 clicking the span tag, the hidden text will be displayed as per the below output.

With the help of a span tag, we can also make the text bold and italic. But for the coding practice, we have to use a strong tag. Because for bold and italic, now we have semantic tags like <strong> and <em>. Let us see the below example.

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">javaTpoint.</span>.</p>
<p>Welcome to <strong>javaTpoint.</strong>.</p> <!-- this approach is better -->

<p>Welcome to <span id="italicized">javaTpoint.</span>.</p>
<p>Welcome to <em>javaTpoint.</em>.</p> 
</body>
</html>

Output:

Before seeing the difference between the span tag and the div tag, let us see the difference in the view of the coding 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.

Next TopicHTML strike Tag

← prev next →