Home » HTML Span Tag – How to use span tag in HTML Coding
HTML

HTML Span Tag – How to use span tag in HTML Coding

June 14, 2019

HTML Span Tag

The HTML Span Tag is useful for applying custom styles to inline elements. It is a generic inline container for various inline elements. Under the span tag container, you can set the style and then implement them to different elements.

There are two ways in which you can use the HTML Span tag. In a first way, you can declare the styling in a different place under the <style> tag. Then to use the style in elements simply put them under <span> </span> tags.

For example:

<! DOCTYPE html>
<html>
<head>
<! -- it’s the first way to use span tag -->

     <style>
	span{
	  color: red;
	  text-decoration: underline;
	  font-size: 30px;
	}
     </style>

</head>

<body>
	<h4> HELLO EARTH! </h4>
	<span> This effect is due to the span </span> </br>
	<span> Follow for more </span> </br>
	<span> Interesting articles! </span> </br>
</body>
</html>
OUTPUT:-

HELLO EARTH
This effect is due to the span
Follow for more
Interesting articles!

In a second way, you can define the inline style under the span tag. The syntax will be:


<span style=""> Text goes here </span>

Let’s understand it better by looking at this example.


<! DOCTYPE html>
<html>
<head>
<! -- it’s the second way to use span tag -->
</head>

<body>

   <h4> HELLO EARTH </h4>
   <span style="color:blue;"> First Text </span> </br>
   <span style="background-color:lightgreen;"> Second Text </span> </br>

</body>
</html>
OUTPUT :-

First Text
Second Text

Difference between HTML Span tag and Div tag

The Span HTML tag and Div HTML tag have a very handsome difference in them. First of all tag is inline element whereas <div> tag is block-level element. However, both tags don’t require attributes with common CSS and class. Span tag takes only required width whereas the Div tag takes the whole width which is available.

Use Mettl to automate your Coding Assessment Test.

More Articles: