Styling Elements with HTML Span
Tags: html, coding, programming, tutorial
Published: 2024-06-19 20:11:35


## 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](https://code.visualstudio.com/docs/languages/html). 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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<p>
  This is a <span class="example"><a href="#">link</a></span> example.
</p>
```

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

```html
<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:

```html
<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](https://labex.io/tutorials/html-styling-elements-with-html-span-70839)
- 🌳 Learn the latest [HTML Skill Trees](https://labex.io/skilltrees/html)
- 📖 Read More [HTML Tutorials](https://labex.io/tutorials/category/html)

Join our [Discord](https://discord.gg/J6k3u69nU6) or tweet us [@WeAreLabEx](https://twitter.com/WeAreLabEx) ! 😄