×

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:

HTML Span Tag

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:

HTML Span Tag

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:

HTML Span Tag

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


Related Topics

HTML References

BASIC HTML TAGS TAGS DESCRIPTION <!DOCTYPE> Defines Document Type <html> Defines Html document <head> Defines Header of document <title> Defines Title of document <body> Describe all the content of document <h1> to <h6> Defines Html Heading <p> Write Paragraph in this tag <br> Line break <!--...--> Comment in Html FORMATTING TAGS TAGS DESCRIPTION <abbr> Defines...

3 minutes read.

What is a Container tag?

In HTML, there are different types of tags or say instructions which make the developer specify various elements in the document and make the browsers understand what to display. Tags in...

5 minutes read.

HTML Date

The input element in HTML has several attributes. One of its attributes is the type attribute which creates a calendar in an order that a user can select a date...

5 minutes read.

Most Commonly used Tags in HTML

In this tutorial, we'll look at the most popular HTML tags. We know HTML is a fundamental requirement for creating a website. As a result, it is essential to remember...

9 minutes read.

HTML <strike> tag

The HTML <strike> tag is used to specifies strikethrough text. The tag is deprecated now and <del> tag is used in HTML files instead of it. All the global and...

2 minutes read.

HTML Font Size

The HTML <font> tag uses the size attribute to specify the size of the text. We can set the size attribute’s value from 1 to 7. The default size of...

4 minutes read.

HTML5 Attribute

HTML Attribute HTML attributes are special words that provide additional information about the HTML element or attributes.The element or tags have attributes, which define the element's behavior.It also adds attributes with a start...

3 minutes read.

Html &lt;Col> Tag

You can write the col tag inside the table tag after the thead, tbody, foot, and tr tags. You can also apply it after the caption tag (in which the...

4 minutes read.

How to change font in HTML

To give style to the content of your website, you may change the font of the text and make your website look attractive to the user. There are several methods which...

4 minutes read.

Caption Tag in HTML

Caption Tag in HTML: The < caption > tag in HTML describes the heading of a table in the HTML text. Browsers typically make the text found above the table...

4 minutes read.

HTML Youtube

<object> element: It embed the object within the HTML documents and embed plug-ins such as Java applets, PDF readers, Flash Players etc in web pages. Example: <object width="100" height="100" data="bookmark.swf"></object> <embed> element: It defines an embedded...

1 minute read.

HTML5 Button Tag

HTML Button Tag The < button > tag is used on the webpage to construct a clickable button inside the HTML. Within the < button>....</button > tag, we can place content...

2 minutes read.

HTML Search Box

The HTML search box is also known as the search bar. It is an input text field that is used to search the content. If the users want to explore...

7 minutes read.

HTML Font Color

The HTML <font> tag has an attribute called color, which defines the color of the text. We use the color attribute inside the <font> tag to specify the color of...

6 minutes read.

HTML Lists

HTML List HTML lists are used to specify data sets. All lists can include one or more elements from the list. HTML lists are available in three different types: Ordered List or...

4 minutes read.

HTML City tag

HTML <City> tag HTML < cite > tag specifies a citation, a reference or title to a creative work, quoted content, books, websites, a research paper, a blog post, a painting,...

3 minutes read.

Html <colgroup> Tag

A HTML table's column group is specified by the "colgroup" tag. If you want to apply various properties to one or more <col> elements in an HTML table, then you...

4 minutes read.

Responsive HTML5 and CSS3 Tutorial

Introduction to HTML5 Tutorial HTML5 is the latest and upgraded version of HTML. HTML is a hypertext markup language. Technically, it is not a programming language. It is a markup language. HTML...

17 minutes read.

Difference between HTML and DHTML

Introduction to HTML HTML stands for Hypertext Markup Language. It is a standard web language used to create web pages and applications. HTML is used to define the structure and content...

4 minutes read.

HTML Images

HTML has <img> tag to display image on the web pages or web application. This tag is an empty tag i.e. we don't have to close this tag while using. SYNTAX: <img src="source address" attributes="alt, height, width"> Example: <html>   <body>   <center>Image tag Example</center>   <img src="https://www.tutorialandexample.com/resources/images/favicon.png"    alt="tutorialandexample"/>   </body>   </html> Output: Image...

1 minute read.