The Complete WebDeveloper (38 Blogs) Become a Certified Professional

All you Need to Know About Span tag in HTML

Last updated on Apr 05,2024 11.8K Views

Grouping elements to perform a particular action in HTML is a very important task. Span tag in HTML is something that comes into the picture here. Let’s understand what is span tag and how it works in the following order:


What is a span tag in HTML?

In HTML <span> tag is mainly used for grouping of elements and applying styles accordingly to the inline elements. There is a difference between the <span> tag and <div> tag. The <span> tag is used with the inline elements while the <div> tag is used with block-level content.


In a paragraph <span> tag is used to apply a style to a particular group of words. With a given set of font codes. In these, there are three different types to set colors to the web page you have created.


Color Coding for Span Tag

The colors can be directly specified like green, blue. Hex codes – There is a six-digit code which represents the amount of color. Color decimal or percentage values – RGB() property is used to specify the colors. These hexadecimal codes will be preceded by a pound sign or hash sign #. Following is the list of few colors using hexadecimal notations.

ColorHex Code



&lt;!DOCTYPE html&gt;
&lt;title&gt;HTML span tag &lt;/title&gt;
&lt;p&gt;This is a paragraph&lt;span style="color:#FF0001;"&gt;
&lt;i&gt;This is a paragraph&lt;/span&gt;&lt;/i&gt;
This is a paragraph&lt;/p&gt;
&lt;p&gt;&lt;span style="color:#8866ff;"&gt;
This is another paragraph&lt;/span&gt;&lt;/p&gt;

Find out our Flutter Course in Top Cities

IndiaOther Countries
Flutter Training in Chennai Flutter Course in Australia
Flutter Course in BangaloreFlutter Course in Canada
Flutter Training in HyderabadFlutter Course in London

The output of Code:

span tag in html


As you can see we have successfully implemented the span tag to customize our HTML body. With this, we have come to the end of this article.

Create stunning and intuitive mobile app UIs using Flutter by enrolling in a Flutter Certification Training.

Take your design skills to the next level with our UI Design Course.

Check out our Full Stack Web Developer Masters Program which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.

Check out the Angular Course by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities.

If you want to get trained in React and wish to develop interesting UI’s on your own, then check out the React Certification by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe.

Got a question for us? Please mention it in the comments section of “Span Tag in HTML” blog and we will get back to you.

Upcoming Batches For Web Developer Certification Training Course
Course NameDateDetails
Web Developer Certification Training Course

Class Starts on 1st June,2024

1st June

SAT&SUN (Weekend Batch)
View Details

Join the discussion

Browse Categories

webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

All you Need to Know About Span tag in HTML