DEV Community

Cover image for Styling Elements with HTML Span
Labby for LabEx

Posted on • Originally published at labex.io

Styling Elements with HTML Span

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.html and 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Add the following CSS code inside the <head> tag:

<style>
  .example {
    font-size: 20px;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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?

Join our Discord or tweet us @WeAreLabEx ! 😄

Top comments (0)