Span Tag in HTML
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
Best-suited Web Development courses for you
Learn Web Development with these high-rated online courses
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>
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>
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>
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>
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>
Output
Read Later
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.
Hello, world! I'm Esha Gupta, your go-to Technical Content Developer focusing on Java, Data Structures and Algorithms, and Front End Development. Alongside these specialities, I have a zest for immersing myself in v... Read Full Bio
Top Picks & New Arrivals
