HTML Span Tag | Web Development Tutorials

Introduction

The HTML  tag is used to group elements for styling purposes. It can be thought of as a generic container for the phrasing content. The  tag is much similar to <div> tag, but it is an inline element unlike <div> which is a block-level element. The  tag does not inherently represent anything. In this lab, you will learn how to use the  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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/LayoutandSectioningGroup -.-> html/nav_links("`Navigation and Links`") html/LayoutandSectioningGroup -.-> html/access_cons("`Accessibility Considerations`") subgraph Lab Skills html/para_br -.-> lab-70839{{"`Styling Elements with HTML Span`"}} html/nav_links -.-> lab-70839{{"`Styling Elements with HTML Span`"}} html/access_cons -.-> lab-70839{{"`Styling Elements with HTML Span`"}} end

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  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  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  tag to red. As we have wrapped the word "simple" inside the  tag, it will be printed in red color.

Using Span with Other HTML tags

The  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  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  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  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  tag that has the class example.

Using Span Tags for Semantics

Although the  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  tag and given a class name score. By doing so, we have conveyed that the text inside the  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  tag to group elements for styling purposes. You also learned how to style the content wrapped inside the  tag, how to use it with other HTML tags, how to use global and event attributes, and how to use the  tag to convey semantics.

Styling Elements with HTML Span