6 demos to learn HTML span tag

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

HTML Span example inside a paragraph

This example uses span HTML tag inside a paragraph to differentiate some text.

Experience this online

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

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

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

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

Also see HTML div | CSS border | CSS background

Was this article helpful?

Related Articles

Leave A Comment?