Introduction
The HTML <span> tag is used to group elements for styling purposes. It can be thought of as a generic container for the phrasing content. The <span> tag is much similar to <div> tag, but it is an inline element unlike <div> which is a block-level element. The <span> tag does not inherently represent anything. In this lab, you will learn how to use the <span> tag to group elements for styling purposes.
Note: You can practice coding in
index.htmland learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.
Adding the HTML Code
In the index.html file, add the following code inside the <body> tag:
<p>This is a <span>simple</span> example of using the span tag.</p>
Here we have created a paragraph with the word "simple" wrapped inside the <span> tag. This will help us understand the use of this tag practically.
Styling the Span Element
Now let's see how to style the content that is wrapped inside the <span> tag. For example, if we want to add color to the word "simple", we can use the color property in CSS.
Add the following CSS code inside the <head> tag:
<style>
span {
color: red;
}
</style>
This CSS code changes the color of all the content wrapped inside the <span> tag to red. As we have wrapped the word "simple" inside the <span> tag, it will be printed in red color.
Using Span with Other HTML tags
The <span> tag can be used with other HTML elements also. Let's see how you can use it with the <a> tag.
Add the following HTML code inside the <body> tag:
<p>
This is a <span><a href="#">link</a></span> example.
</p>
This creates a paragraph with the word "link" wrapped inside the <span> tag and linked to the URL #.
Styling the Linked Text
Now let's see how we can style the linked text. Add the following CSS code inside the <head> tag:
<style>
span a {
color: green;
text-decoration: none;
}
</style>
This CSS code sets the color of the text inside the <a> tag to green without any underlining.
Adding Event Attributes
The <span> tag supports both global and event attributes. Let's see how we can use the global attribute class to apply styles.
Add the class attribute to the <span> tag that wraps the word "simple" as shown below:
<p>
This is a <span class="example"><a href="#">link</a></span> example.
</p>
Add the following CSS code inside the <head> tag:
<style>
.example {
font-size: 20px;
}
</style>
This CSS code increases the font size of the content inside the <span> tag that has the class example.
Using Span Tags for Semantics
Although the <span> tag doesn't have any inherent meaning, it can be used to convey the semantics of the text it wraps. For instance, you could use it to wrap a date or a percentage to indicate that the text inside has a special meaning.
For example, add the following code to the index.html file:
<p>My final score is <span class="score" aria-label="90 percent">90</span>.</p>
In this example, 90 is wrapped inside the <span> tag and given a class name score. By doing so, we have conveyed that the text inside the <span> tag has a special meaning. In addition, we have added the aria-label attribute to provide accessibility information to a screen reader.
Summary
In this lab, you learned how to use the HTML <span> tag to group elements for styling purposes. You also learned how to style the content wrapped inside the <span> tag, how to use it with other HTML tags, how to use global and event attributes, and how to use the <span> tag to convey semantics.
Want to learn more?
- 🚀 Practice Styling Elements with HTML Span
- 🌳 Learn the latest HTML Skill Trees
- 📖 Read More HTML Tutorials
Join our Discord or tweet us @WeAreLabEx ! 😄
Top comments (0)