HTML <span> tag

The span tag in HTML is used as an inline container element to mark up a specific or special chunk of a text or a section of a page.

If you want to edit or add any validation, you may do that using JavaScript with the aid of the class or id property in HTML. If you want to customize the span tag, you can simply do it by using CSS (cascading style sheet).

Syntax:

<body>
<p>……………
<span style="………">
………. 
</span>
……………</p>
</body>

Example

Here is an example in which we used a span element to color a piece of information:

Example 1:

<!DOCTYPE html>
<html>
<head>
<tilte> html span tag </title>
</head>
<body>
<p>My fatherworks in <span style="color: red">red</span>tape company which is famous for shoe making.</p>
</body>
</html>

Output:

Example 2:

<!DOCTYPE html>
<html>
<head>
<title> html span tag </title>
</head>
<body>
<p>Jaideep is my brother who has <span style="color:green">green</span> hairs.</p>
</body>
</html>

Output:

A span element is an HTML element which is used to provide the background color to a part of a text.

Example 3:

<!DOCTYPE html>
<html>
<head>
<title> html span tag </title>
</head>
<body>
<p>Do not read the content highlighted in this paragraph as it has been deleted <span style="background-color: yellow"> “tough conditions makepeople tough”</span>.</p>
</body>
</html>

Output:

Browser support:

List of browsers that support html section tag are mentioned below:

Chrome: Yes

Microsoft Edge: Yes, version 12 needed

Firefox: Yes, version 1 needed

Safari: Yes

Opera: Yes