Quick Reach
The Span tag in HTML
The HTML span tag is an inline element that is generally used to group other inline elements and apply CSS style. The span tag is also used in paragraphs or text where you want to distinguish some part of the text to other by applying different color/style without disturbing the layout. The cool thing is, you can apply CSS to that text inside the span element that becomes quite useful in order to present the information to visitors of the website.
A span tag example
You can use span style attribute to apply inline CSS or you can use span class or id attribute to refer to the separate or external CSS class or id.
Tip: The HTML inline elements are those that take only required space and does not add a line before and after itself. See this example to understand the difference between inline element <a> and block element <div>.
Following are a few examples of using the HTML span tag.
Span style example
In this example, we will show you how to use the span tag and apply inline CSS. We will use the style attribute of span tag to style some text.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<html>
<head>
</head>
<body>
<span style=“font-family: sans-serif;color:red;font-size: 17px;”>
This is span tag tutorial. It explains how to use span with style attribute.
</span>
</body>
</html>
|
HTML Span example inside a paragraph
This example uses span HTML tag inside a paragraph to differentiate some text.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<html>
<head>
</head>
<body>
<p>
This is <span style=“font-family: sans-serif;color:red;font-size: 17px;font-weight:bold;”>span tag tutorial</span>. It explains how to use span with style attribute.
The examples uses <span style=“font-family: sans-serif;color:green;font-size: 17px;”>span style attribute</span> to apply CSS.
</p>
</body>
</html>
|
Span class example
The example below shows how to use span class attribute to apply CSS style to the part of the text in a paragraph. The class is created in CSS style section and then class name is referred in the span class attribute.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<html>
<head>
<title>The span tag example</title>
<style>
.spanex{
font-family: sans-serif;
color:red;
font-size: 17px;
font-weight:bold;
}
.spanex2{
font-family: sans-serif;
color:green;
font-size: 13px;
}
</style>
</head>
<body>
<p>
This is <span>span tag tutorial</span>. It explains how to use span with class attribute.
The examples uses <span>span class attribute</span> to apply CSS.
</p>
</body>
</html>
|
Note that, a class is created with a dot (.) followed by the class name in CSS. You should use the class if you will apply it to more than one elements.
Span style by ID example
You can also apply the style by ID in span ID attribute. The same style as in above example is given by using the span ID attribute.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<html>
<head>
<title>The span tag example</title>
<style>
#spanex{
font-family: sans-serif;
color:red;
font-size: 17px;
font-weight:bold;
}
#spanex2{
font-family: sans-serif;
color:green;
font-size: 13px;
}
</style>
</head>
<body>
<p>
This is <span id=“spanex”>span tag tutorial</span>. It explains how to use span with ID attribute.
The examples uses <span id=“spanex2”>span ID attribute</span> to apply CSS.
</p>
</body>
</html>
|
CSS span example
You can also specify the span border, background color, background image etc. by using the CSS properties.
The following example uses more CSS properties in the span tag.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<html>
<head>
<title>The span tag example</title>
<style>
#spanex{
font-family: sans-serif;
border:dashed 1px black;
color:red;
width:100px;
font-size: 17px;
background-image: url(TC_logo.png);
font-weight:bold;
}
#spanex2{
font-family: Arial;
border:solid 1px black;
background: yellow;
color:green;
font-size: 13px;
}
</style>
</head>
<body>
<p>
This is <span id=“spanex”>span tag tutorial</span>. It explains how to use span with ID attribute.
The examples uses <span id=“spanex2”>span ID attribute</span> to apply CSS.
</p>
</body>
</html>
|
Span width example
As mentioned in the above section, the HTML span is an inline element. The height and width properties won’t apply to it. In order to apply height and width to the span element, you can convert span to a block element and then use height or width.
The following example uses display property of CSS to convert span tag from inline to block element and then width and height are applied.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<html>
<head>
<style>
#spanex{
font-family: sans-serif;
border:dashed 1px black;
display:block;
color:red;
width:150px;
height:200px;
font-size: 17px;
font-weight:bold;
}
</style>
</head>
<body>
<span id=“spanex”>
This is span tag tutorial. It explains how to use span with style attribute.
</span>
</body>
</html>
|
Also see HTML div | CSS border | CSS background
Leave A Comment?