Open In App

HTML <span> Tag

Improve
Improve
Like Article
Like
Save
Share
Report

The HTML <span> tag is a generic inline container for inline elements and content. It is used to group elements for styling purposes (by using the class or id attributes), A better way to use it when no other semantic element is available.

The span tag is a paired tag means it has both open(<) and closing (>) tags, and it is mandatory to close the tag. The span tag is used for the grouping of inline elements & this tag does not make any visual change by itself.

Syntax: 

<span class="">Some Text</span> 

Attribute: 

This tag accepts all the Global attribute and Event Attributes

Definition and Usage:

  • The <span> tag is an inline HTML element used to apply styles or manipulate specific portions of text within a larger block of content.
  • It also enables the grouping of inline elements within a larger block, allowing for targeted styling or scripting.
  • The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.
  • Commonly used with CSS styles to alter the appearance of selected text without affecting the overall structure.

Example 1: In this example, we simply use a span tag with style in HTML.

HTML




<!DOCTYPE html>
<html>
 
<body>
    <h2>Welcome To GeeksforGeeks</h2>
    <p>
        GeeksforGeeks is a
        <span style="color:red;font-weight:bolder">
            computer science
        </span> portal for
        <span style="background-color: lightgreen;">
            geeks
        </span>.
    </p>
</body>
 
</html>


Output:

HTML tag

Example 2: In this example, suppose we want to write three times GeeksforGeeks in three lines with bold, italic, underline, in green color with font-family = courier new, so we need to use many HTML tags such as <b>, <i>, <u>, <font> for every time in every line, and we want to make changes need to modify every tag.

HTML




<!DOCTYPE html>
<html>
 
<body>
    <h2>
        Welcome To GfG
    </h2>
    <span>
        The span tag does not create a line break
    </span>
    <span>
        it allows the user to separate things from other elements
    </span>
    <span>
        around them on a page within the same line
    </span>
    <br>
 
    <!-- First Line -->
    <font color="009900" size="6">
        <b>
            <u>
                <i>GeeksforGeeks</i>
            </u>
        </b>
    </font>
 
    <br>
 
    <!-- Second Line -->
    <font color="009900" size="6">
        <b>
            <u>
                <i>GeeksforGeeks</i>
            </u>
        </b>
    </font>
 
    <br>
 
    <!-- Third Line -->
    <font color="009900" size="6">
        <b>
            <u>
                <i>GeeksforGeeks</i>
            </u>
        </b>
    </font>
 
 
</body>
 
</html>


Output:

Example 3: In this example, by using <span> tag, we can reduce code and HTML Attributes, see the below example that will display the same output as the above example with using <span> tag by applying CSS in a span tag.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        GeeksforGeeks span tag
    </title>
 
    <!-- style for span tag  -->
    <style type=text/css>
        span {
            color: green;
            text-decoration: underline;
            font-style: italic;
            font-weight: bold;
            font-size: 26px;
        }
    </style>
</head>
 
<body>
    <h2>
        Welcome To GFG
    </h2>
    <span>
        GeeksforGeeks
    </span><br/>
    <span>
        GeeksforGeeks
    </span><br/>
    <span>
        GeeksforGeeks
    </span><br/>
</body>
 
</html>


Output:

Styling the tag using the CSS properties

Example 4: As we know span is an inline tag & it takes space as much as required and leaves space for other elements. All four-span elements will display in the same line because each tag takes only the necessary space and the rest of the space free for other elements.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>GeeksforGeeks span tag</title>
</head>
 
<body>
    <h2>
        Welcome To GfG
    </h2>
    <!-- span tags with inline style/css  -->
    <span style="background-color:powderblue;">
        GfG
    </span>
    <span style="background-color: lightgray;">
        -Contribute-
    </span>
    <span style="background-color: yellow;">
        Article
    </span>
    <span style="background-color: lightgreen;">
        GCET
    </span>
</body>
 
</html>


Output:

span tag illustrates inline-element to acquire the required space for the element  

Example 5: A span tag can be used to set color/background color as a part of a text. In the below example inside paragraph applying, three times span tag with a different style. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>GeeksforGeeks span tag</title>
</head>
 
<body>
    <h2>Welcome To GfG</h2>
 
    <!-- Inside paragraph applying
         span tag with different style -->
    <p>
        <span style="background-color:lightgreen">
            GeeksforGeeks
        </span> is A Computer Science Portal where you can
        <span style="color:blue;">Publish
        </span> your own
        <span style="background-color:lightblue;">articles
        </span> and share your knowledge with the world!!
    </p>
</body>
 
</html>


Output:

Setting the color using tag

Example 6: Manipulate JavaScript with span tag, in the below example, we add a span tag inside a paragraph with id=”demo” we can change its text by applying javascript in this example GFG will be changed “GeeksforGeeks” after clicking on Button. 

HTML




<!DOCTYPE html>
<html>
 
<body>
    <h2>Welcome to GfG</h2>
    <p>
        <span id="demo" style="background-color:lightgreen;">GfG
        </span>
        A computer Science portal for Geeks
    </p>
    <!-- Creating button in java script -->
    <button type="button" onclick="document.getElementById('demo').innerHTML =
                 'GeeksforGeeks!!!'">Change Text!
    </button>
</body>
 
</html>


Output:

Manipulation of the

Supported Browsers: 

  • Google Chrome 1
  • Edge 12
  • Firefox 1
  • Opera 15
  • Safari 1


Last Updated : 26 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads