Esha
Esha Gupta
Associate Senior Executive
Updated on Jan 3, 2024 13:39 IST

Have you ever wondered how web developers style or manipulate specific parts of a webpage's text without affecting the whole document? This is where the <span> tag in HTML comes into play. Let us understand more!

In HTML (Hypertext Markup Language), tags are the basic building blocks used to create web pages. They are used to define and structure the content of a webpage. In this blog, we will dive deeper into span tag in HTML.

Table of Content

What is a Span Tag in HTML?

The <span> tag in HTML is an inline-level element used for styling and grouping content within a web page. Unlike block-level elements like <div>, the <span> tag does not inherently introduce any line breaks or block formatting. Instead, it allows you to target and style specific portions of text or inline elements without disrupting the overall flow of the document.

Let's first check out a video on the same.

Source: Bro Code

Syntax of Span Tag in HTML

<span>content goes here</span>

In the above syntax, we have-

  • Opening Tag: The <span> is the opening tag.
  • Content: Between the opening and closing tags, you can place the content that you want to style or manipulate. This could be text, other HTML elements, or even a combination of both.
  • Closing Tag: The </span> is the closing tag, which indicates the end of the span element.
 

Usage of HTML Span Tag with Examples

The <span> tag in HTML is used primarily for styling and manipulating specific portions of text or inline elements within a document. Let's see its uses with examples.

Example 1: Styling Specific Text

Problem Statement: Change the color of specific words within a sentence.


 
<!DOCTYPE html>
<html>
<head>
<title>Styling Text Example</title>
</head>
<body>
<p>
Welcome to <span style="color: blue;">Shiksha Online</span>,
where learning <span style="color: green;">never stops</span>.
</p>
</body>
</html>
Copy code

Output

Example 2: Highlighting Text for Emphasis

Problem Statement: Emphasize a word by highlighting it.


  
<!DOCTYPE html>
<html>
<head>
<title>Highlighting Text Example</title>
</head>
<body>
<p>
Don't forget to <span style="background-color: yellow;">subscribe</span> to our newsletter.
</p>
</body>
</html>
Copy code

Output

Example 3: Adding Tooltips to Text

Problem Statement: Show a tooltip when hovering over a word.


 
<!DOCTYPE html>
<html>
<head>
<title>Tooltip Text Example</title>
</head>
<body>
<p>
Make sure to visit our <span title="Click to learn more">blog</span> for the latest updates.
</p>
</body>
</html>
Copy code

Output

Example 4: JavaScript Interaction

Problem Statement: Change text content dynamically on user interaction.


 
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Interaction Example</title>
<style>
.clickable-box {
border: 2px solid black; /* Adds a border to create the box */
padding: 10px; /* Adds some space inside the box */
display: inline-block; /* Keeps the box in line with text */
cursor: pointer; /* Changes the cursor to indicate it's clickable */
margin: 10px; /* Adds some space around the box */
background-color: #f0f0f0; /* Light background color for the box */
}
</style>
<script>
function changeText(element) {
element[removed] = 'Thanks for clicking!';
}
</script>
</head>
<body>
<span class="clickable-box" onclick="changeText(this)">Click me</span>
</body>
</html>
Copy code

Output

 

Example 5: Changing the Style of a Span Element on Button Click

Problem Statement: Change the style of text within a <span> element when a button is clicked.


 
<!DOCTYPE html>
<html>
<head>
<title>Span Style Toggle Example</title>
<script>
function toggleSpanStyle() {
var spanElement = document.getElementById('styledText');
if (spanElement.style.fontWeight === 'bold') {
spanElement.style.fontWeight = 'normal';
spanElement.style.color = 'black';
} else {
spanElement.style.fontWeight = 'bold';
spanElement.style.color = 'red';
}
}
</script>
</head>
<body>
<button onclick="toggleSpanStyle()">Toggle Style</button>
<p>
This is a <span id="styledText">special text</span> inside a paragraph.
</p>
</body>
</html>
Copy code

Output

Top 62+ HTML Interview Questions and Answers for 2024
Top 62+ HTML Interview Questions and Answers for 2024
Here are the HTML interview questions most likely to be asked during the interviews. This list also covers some HTML CSS interview questions to help you start or move ahead...read more

How to Create HTML Forms – Tutorial with Examples
How to Create HTML Forms – Tutorial with Examples
HTML forms or web forms are a powerful medium for interacting with users. They have interactive controls for submitting information. Web forms enable us to collect data or personal information...read more

HTML Attributes Explained with Examples
HTML Attributes Explained with Examples
HTML attributes provide additional information about HTML elements. They are used to modify the behavior or appearance of an element. Attributes are specified within the opening tag of an element...read more

Creating HTML Links – Tutorial With Examples

HTML Lists: Ordered and Unordered Lists Explained with Examples
HTML Lists: Ordered and Unordered Lists Explained with Examples
This tutorial explains how to create different types of lists: unordered, ordered, and description lists in HTML. In this blog, you will learn what are HTML lists and understand how...read more

Key Takeaways

  • The <span>  tag is used for inline styling within text, affecting specific words or phrases without creating a new line.

  • It's a generic container with no inherent meaning, serving primarily for styling or scripting purposes.

  • Ideal for applying CSS styles and being targeted by JavaScript for dynamic web content manipulation.

  • Offers a way to add styles or changes to content without disrupting the surrounding document flow.

FAQs

What is a span tag?

The span tag is a widely-used inline element in HTML that is used for styling or grouping inline elements without creating a new line. It's typically used when you need to apply styles or target a section of text or inline elements with JavaScript.

How does a span tag differ from a div tag?

The main difference lies in their display behavior. A span tag is an inline element, meaning it doesn't start on a new line and only takes up as much width as necessary. In contrast, a div tag is a block-level element, which starts on a new line and extends the full width available.

Can you nest other elements inside a span tag?

Yes, you can nest other inline elements inside a span tag. However, it's not recommended to nest block-level elements like divs inside a span, as this can cause unpredictable rendering issues.

How do you style a span tag?

A span tag can be styled using CSS. You can apply various styles like font size, color, background, and more. To target a specific span tag with CSS, you can use class or id attributes.

What are some common uses of a span tag?

Common uses of a span tag include changing the style or color of a part of the text, highlighting a section of text, and inserting icons or small graphics inline with text. It's also useful for applying JavaScript actions to specific parts of inline content.

About the Author
author-image
Esha Gupta
Associate Senior Executive

Hello, world! I'm Esha Gupta, your go-to Technical Content Developer with a focus on Java, Data Structures and Algorithms, and Front End Development. Alongside these specialities, I have a zest for immersing myself ... Read Full Bio

Comments