span Tag | HTML

The HTML span element is a generic inline container for inline elements and content. It used to group elements for styling purposes (by using the class or id attributes), A better way to use it when no other any other semantic element is available. span is very similar to the div tag, but div is a block-level tag and span is an inline tag. Span tag is a paired tag means it has both open(<) and closing (>) tag and it is mandatory to close the tag.

  • The span tag is used to grouping of inline-elements.
  • The span tag does not make any visual change by itself.
  • span is very similar to the div tag, but div is a block-level tag and span is an inline tag.

Tag is written like:
Syntax:

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

In below 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.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>GeeksforGeeks span tag</title>
</head>
<body>
    <h2>Welcome To GFG</h2>
  
<!-- 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>                    

chevron_right


Output:
Withoutspantag

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
Withoutspantag

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
span_tag_inline


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
color_text_in p_span
Manipulate javascript with span tag: In below example we add a span tag inside paragraph with id=”demo” we can changes its text by applying javascript in this example GFG will be changed “GeeksforGeeks” after clicking on Button.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
Before Clicking on Button
Span_JS_Prev
After Clicking on Button
span_JS_After

Difference Between Div tag and span tag

The div and span tag are two common tags when creating pages using HTML and perform different functionality on them while div tag is a block level element and span is inline element The div tag creates a line break and by default creates a division between the text that comes after the tag as begun and until the tag ends with </div>. div tag creates separate boxes or containers for all elements inside this tag like text, images, paragraphs.

Properties Div Tag Span Tag
Elements Types Block-Level Inline
Space/Width Contain Whole Width Available Takes only required Width
Examples Headings, Paragraph, form Attribute, image
Uses Web-layout container for some text
Attributes Not required, with common css, class Not required, with common css, class

The span tag does not create a line break similar to a div tag, but rather allows the user to separate things from other elements around them on a page within the same line. avoiding of the line break, results only that selected text to change, keeping all the other elements around them same.
Below example will display the difference between span and div tag while div tag contains whole width and span tag contain only required width and rest parts are free for another element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<strong>Example:</strong>
<html>
   <head>
      <title>gfg</title>
      <style type=text/css>
         p{
         background-color:gray;
         margin: 10px;
         }
           
           
         div
         {
         color: white;
         background-color: 009900;
         margin: 2px;
         font-size: 25px;
         }
         span
         {
         color: black;
         background-color: gray;
         margin: 5px;
         font-size: 25px;
         }
      </style>
   </head>
   <body>
<!-- below some div tags -->      
  
      <div > div tag   </div>
      <div > div tag   </div>
      <div > div tag   </div>
      <div > div tag   </div>
        
<!-- below some span tags -->      
      <span>span-tag</span>
      <span>span-tag</span>
      <span>span-tag</span>
      <span>span-tag</span>
   </body>
</html>

chevron_right


Output:
spanvsdiv

Supported Browser: Supported browsers are listed below

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : Akanksha_Rai



Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.