HTML as a programming language was designed to be one of the simplest forms of coding available for people to learn how to code. That being said, there are a few functions, or in the case of HTML, tags, that make coding more dynamic and much simpler for the programmers to get the desired result. One such tag is the HTML span tag. If you are a beginner, you may not have heard of this tag. But rest assured, like most other tags, the span tag in HTML is easy and extremely accessible. Let us get right down to it.
Table of Contents
What is the HTML span tag?
For instance, if you want to apply any style to a character, letter, word, or statement, you will need to use the HTML span tag. What happens in traditional styling techniques within HTML is that most existing tags or attributes will automatically apply one particular style to the entirety of the contents of any tag.
As an example, consider you were typing out an <h1> tag with the words “This is an h1 tag”, and chose to style this statement by using the style attribute, you will be effectively altering the entire statement without having minute control over individual elements
The span tag does not change or alter the display of the contents within the <span> tag whatsoever. If any element is added within the <span> tag, then it will appear as is. As opposed to a <div> tag, a <span> tag is an inline element, whereas, a <div> tag is a block-level element. What this means is that, if you were to use multiple <div> tags, you would see the output occurring one below the other, as a <div> tag manipulates the entire line block of the output. Au contraire, a succession of <span> tags will be displayed one after the other on the same line, thus, termed ‘inline’.
The above-mentioned properties are the default parameters that can be changed using additional changes. We can see this through the following example:
HTML Span Tag Vs. Div Tag Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Span Tags</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div> <!-- block level element -->
Example of div element
</div>
<div> <!-- block level element -->
Example of div element
</div>
<div> <!-- block level element -->
Example of div element
</div>
<span> <!-- inline element -->
Example of span element
</span>
<span> <!-- inline element -->
Example of span element
</span>
<span> <!-- inline element -->
Example of span element
</span>
</body>
</html>IN CSS:
div{
border:2px solid blueviolet;
}
span{
border:2px solid palevioletred;
}
OUTPUT:
How to use HTML Span Tag:
Using a span tag in HTML is a way of grabbing a certain amount of text without defining it as different from the elements around it. This works especially well if you have a large block of text within one tag and you wish to only style bits and pieces of this block of text. Instead of separating the desired pieces of text within different tags, all you need to do is use the span tag. Like most other tags, the span tag needs to be opened and closed before and after the piece of text that you wish to style. Following is the syntax.
HTML Span Tag Syntax (Internal CSS):
<body>
Large <span style= “ ”>piece of text.</span>
</body>HTML Span Tag Syntax (External CSS):
<body>
Large <span>piece of text.</span>
</body>IN CSS:
span{
}
Like every other styling tag in HTML, no stylistic effects will take place without including CSS within your HTML program. This CSS can either be inline or external, as can be seen from the syntax examples above. Without any CSS formatting, the <span> tag will fail to take effect and the specified text will be displayed as it is. Let us now look at some examples using the HTML span tag, with inline, as well as external CSS.
HTML Span Tag Example (External CSS):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Span Tags</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
Following is some text without the span tag:
<h1> Welcome to <br>
PradTurorials <br>
Learn how to use the span tag in HTML to style your program output. </h1>
Following is the same text with the span tag:
<h1> Welcome to <br>
<span>PradTurorials</span> <br>
Learn how to use the <span>span tag in HTML</span> to style your program output. </h1>
</body>
</html>IN CSS:
span {
color:blueviolet;
}
OUTPUT:
HTML Span Tag Example (Inline CSS):
<!DOCTYPE html>
<html>
<head>
<title> PradTutorials Span Tag </title>
</head>
<body>
Following is some text without the span tag:
<h1> Welcome to <br>
PradTurorials <br>
Learn how to use the span tag in HTML to style your program output. </h1>
Following is the same text with the span tag:
<h1> Welcome to <br>
<span style=color:blueviolet;>PradTurorials</span> <br>
Learn how to use the <span style=color:palevioletred;>span tag in HTML</span> to style your program output. </h1>
</body>
</html>OUTPUT:
The examples above are mere representatives of all the things you could possibly do with the help of the HTML span tag. Along with changing the text borders or the text colors, you can effectively utilize every single CSS text formatting option with the span tag. It not only provides extremely precise customization but also allows for quick changes to your text formatting without adding extra load to the program memory.