HTML span tag HTML span tag

In this tutorial we will be covering the last container tag which HTML gives you - the <span> tag. The <span> tag is similar to the <div> tag but not the <table> tag. The role of <span> tag is similar to the <div> tag but with one main difference – it is used for inline grouping of elements. In other words, the <span> tag groups elements present in a single line. A <div> tag can be used to group content which is spread or multiple lines, but <span> tag is used to group text which is in a single line.

Example of <span> tag

If you wish to give different styles to words within a sentence you should use the span tag. For example, if you want to display a line similar to this in the browser

Roses are red in color

Where you want to show the word red in red color then you will use the <span> tag in the following manner in your HTML code

<html>            
    <head>            
    </head>            

    <body>                
        Roses are <span style="color:red">red</span> in color.            
    </body>    
</html>

This is how the browser will show the output of the above HTML code

Image 

In this HTML we have used <span> tag to wrap up the word red in our sentence. We have done this so that we can highlight the word red by giving it a red color and by doing so give more meaning to the complete sentence. Because we can use the <span> tag to wrap some parts of a sentence, we can provide special styles to these words which will not apply to other parts of the sentence. This way, by using the <span> tag, we get better control on different parts of the text. You cannot use <div> container here to wrap the word red because <div> is used to group large chunk of text which is spread over multiple lines. Also, you cannot use <table> container here to wrap the word red because <table> tag is used for creating rows and columns. <span> tag is the only container tag which you should be using for inline wrapping of content.

Need Learning Guidence?
Join our Study Groups and get step by step guidence.
Learn HTML and CSS
The goal of creating this study group is to help students who are beginners to HTML and CSS program
7
Members
1
Questions Asked
0
Tasks Added
Learn Website Development
This goal of this study group is to help students learn the basics of website development using HTM
1
Members
0
Questions Asked
0
Tasks Added
Website Development Interview Preparation
This goal of this study group is to help students prepare for their website development interviews.
1
Members
0
Questions Asked
0
Tasks Added
Web Wars 1.0 - Build Your Digital CV
The goal of this study group is to manage all the communication for the 'Web Wars 1.0 - Build Your
110
Members
0
Questions Asked
0
Tasks Added

Quick Links

E-Magazines

@

Total Followers
Study Group Created
Study Group Joined
Following Teacher
Following Organization
Blog Articles Added
Questions Asked
Questions Answered
Jobs Posted
Total Members in Group
Questions asked by members
Tasks added in this Group

Please wait..

Ok

Login to Open ESchool OR Create your account    Login   SignUp