Span Tag in HTML

The span tag in HTML plays a vital role in styling and highlighting smaller portions of the text. It uses various tools for styling the texts without affecting the document layout.

In this blog, we will explore the syntax of the span tag along with some examples. We will also learn about the tools that are used with the span tag and the difference between the span and div tags in HTML.

Table of Contents:

• What is a Span Tag in HTML?
• Why and When to use the <span> tag in HTML?
• How to use the Span Tag in HTML?
• Examples of Span Tag in HTML
• Attributes of <span> tag in HTML
• Best Practices for Using the <span> Tag
• Tools Used to Enhance the <span> Tag
• Conclusion

What is a span tag in HTML?

In HTML, the <span> tag is a generic inline container and can group inline elements or apply a style to a section of text without forcing a new line. In effect, it is a “hook” for attaching CSS styling or JavaScript behavior to a section of a document.

Syntax:

<span class = "name_of_class”> Intellipaat </span>

Why and When to use the <span> tag in HTML?

The <span> tag is a generic inline container that is used to group small chunks of elements or texts without any additional visual change by default. It is essentially a generic wrapper, which means it doesn’t do anything by itself unless it is combined with CSS or JavaScript, which makes it powerful.

Let us understand when to use the <span> tag:

• Style part of the text inline – When we want to style only one line or word, then we can use the span tag. For example,
  <p>Welcome to <span style= “color: blue;”> Intellipaat </span></p>

• Apply CSS classes to inline content – To apply the CSS styling to inline content, we can use the span tag along with the classes. For example,
  In HTML
  <p> This is an <span class= “text”> important </span> text.</p> /* “Text” is the CSS class.
• In CSS,

<style>
.text {
  color: white;
  background-color: blue;
  font-style: italic;
}
</style>

• Manipulate text dynamically with JavaScript – We can update or animate specific words using span tags with IDs in JavaScript. For example,

<span id="user"></span>
<script>
document.getElementById("user").textContent = "Intellipaat";
</script>

• Wrap text for accessibility hooks or ARIA attributes – Use to provide extra information to the screen readers.

• Avoid block-level disruption – The span tag does not break the flow of the text.

How to use the span tag in HTML?

The <span> tag in HTML is a generic, inline container that is used to group elements for styling or manipulation with CSS (Cascading Style Sheet) or JavaScript. Let us see how to use the span tag in HTML:

• Structure – The <span> tag is written with an opening <span> and a closing </span>. The content to be styled goes between them.

• Adding Inline CSS Styles – Within the span tag in HTML, we can style any content directly using the style attribute. For example,
  <p> Welcome to <span style = “color: orange; font-weight: bold;”> Intellipaat </span></p>

• Using with CSS Class – We can use the span tag with a CSS class too. For example,
  In HTML,
  <p> Welcome to <span class= “text”> Intellipaat </span> </p> /* text is the class.
  In CSS,

<style>
.text {
  color: white;
  background-color: black;
  font-style: italic;
}
</style>

• Using with JavaScript – In JavaScript, we can use the span tag by using an id or class. For example,

<span id="text"> Hello </span>
<button onclick="changeText()"> Click </button>
<script>
function changeText() {
  document.getElementById("text").innerText = "World";
}
</script>

Common Use Cases of the <span> tag

There are many use cases of the <span> tag. Some of them are as follows:

• Inline Text Styling – We can apply the CSS styles like color, font-style, font-size, etc. to a specific part of the text or the line without affecting the whole paragraph. For example,
• <p> Welcome to <span style= “color: orange;”> Intellipaat </span>!</p>

• Grouping Inline Elements for CSS Classes – We can use a <span> tag to apply a CSS class for a selected portion of the inline elements or the text.
  For example,
  In CSS file

<style>
.text { /* text is the CSS class */
  background-color: red;
  font-weight: bold;
}
</style>

In HTML file,
<p>Hello <span class=”text”>World</span>!</p>

• Targeting Text with JavaScript – We can access or modify the inline text contents dynamically using the JavaScript ids.
  For example,

<span id="name"> </span>
<script>
document.getElementById("name").textContent = "Intellipaat";
</script>

• Interactive UI Effects – We can use the span tag with JavaScript to perform hover effects, tooltips, or clickable actions without needing any link or button.
  For example,
  <span onclick = “alert(‘You have clicked’)” style= “cursor: pointer;”> ⁣Click Me⁣ </span>

• Form Validation Message or Inline Feedback – Next to the form fields, we can display the error hints or the messages inline.
  For example,

<label>Email: <input type = "email" /> </label>
<span class= "error"> Required</span>

Difference between <span> and <div>

Examples of Span Tag in HTML

There are some examples to show how the <span> tag is used.

1. Using <span> with Inline CSS – The <span> tag helps to style a word or group of elements that is highlighted, and the rest of the content remains unchanged.
For example,

Output

2. <span> with Class and External CSS – The span tag is used in the CSS with the help of classes to highlight the word or the elements that are to be modified. The set of changes that are to be made are done in an external CSS file, which makes the HTML file clean, and we can reuse the changes for other elements too in that file.
For HTML file,

For CSS file,

	.text {
  color: blue;
  background-color: yellow;
  font-weight: bold;
  padding: 2px 4px;
  border-radius: 4px;
}

Output

3. Using JavaScript to target a <span> – We use IDs to use the span tag in JavaScript.
For example,

Output

After clicking the “Change Name” button.

Attributes of <span> tag in HTML

There are basically two types of attributes of the span tag in HTML. They are as follows:

Global Attributes

The global attributes are the attributes that can be used on any element in HTML, including the <span> tag. They help us to style, identify, or add extra information to the content or element. Some common global attributes used with the <span> tag are:

• id – The ids give the <span> tag a unique identifier to select the changes easily that are made inside the tag in the JavaScript file.
  For example,
  <span id = “user”> Employee </span>

• class – To style a group of elements, we can assign one or more numbers of classes in the CSS file. For example,
  In HTML file,
  <span classes= “text”> Important</span>
  
  In CSS file,

.text{
background-color: red;
}

• style – The style attribute helps to add inline CSS styles to the elements directly. For example,
  <span style= ” color: blue; font-weight: bold;”> Hello</span>

• title – This attribute helps to provide extra information that is shown as the tooltip when we hover over the element. For example,
  <span title= “Optional info”> Hover over me </span>
  

Best Practices for Using the <span> Tag

Some of the best practices of using the <span> tag are given below.

• Avoid Overusage – Overusing the <span> tag can lead to errors in the program.
• Use classes for Styling – It is preferred to use CSS classes over inline styles for maintainability and cleaner code.
• Keep Accessibility in Mind – The span tag is a powerful styling tool, but it can cause accessibility risks if misused.
• Group Inline Content – For styling a grouping of a small portion of the content or inline elements, we can use the span tag.

Helpful Tools for Working with the <span> Tag

There are various tools that are used with the span tag. They are:

• HTML Color Picker Tool – This tool is used to choose and copy the color codes to style the span tag elements with text, border, or border colors.
• CodePen – Is a live code editor that is used to test and review CSS, JavaScript, and HTML using the <span> tag.
• JSFiddle – This tool is also used to experiment with <span> tag behavior across CSS and JavaScript.
• Chrome DevTools – It uses our browser’s developer tools to inspect <span> elements, debug accessibility, and apply CSS live.
• WAVE Accessibility Checker – It analyzes the page for accessibility issues and ensures that the <span> tag does not create a problem for the screen reader functionality.

Conclusion

The <span> tag in HTML is an inline element that is used to style or modify some portions of text without making any changes in the structure of the document. It is mostly used with CSS and JavaScript to apply specific styles or highlight content and make updates to the page dynamically in the context of a sentence or phrase.

Span Tag in HTML – FAQs