HTML Span Tag | Span Element in HTML

HTML Span Tag

HTML Span Tag is a inline container element and mostly used to give special design style to the inline text. Span Element in HTML is mainly used to bold, italic or underline some part of text in a paragraph.

There are two types of element in HTML, inline and block element. There is a display CSS property, which actually controls the display of the element in the web browser.

The default setting of the display CSS property for the span element is inline.

In this HTML Span Example we have used one span element with CSS design specification in a paragraph. We have used style attribute of the span tag to specify the CSS property.

Example 1 – Example with one span elements in a paragraph element.

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<h1>Typical Application of span Tag</h1>
		<p>I am currently working in software development company which is in the <span style="font-weight:bold;">New York</span>.</p>
	</body>
</html>

In the above example the content of span tag (New York) is shown in BOLD.

Warning: Instead of span tag (with CSS property) you can use tag to show text in bold. But it is recommended that you should avoid the use of tag, span is a better technique to achieve this goal.

HTML Span Tag
Fig.1 – HTML Span Element in HTML example 1 output screenshot

In the above example output you can verify that the content (New York) is shown in BOLD, and other running text of the paragraph is shown as normal paragraph text.

Note: The span is an inline element that is why it is useful in this type of running text application. The Div tag is block element and it you use div tag instead of span, it will insert a new line before and after the span element content.

Span Element Example in HTML with more CSS property

In the span we can use any CSS property. In the below example we have shown the text in bold, italic and underline.

Example 2 – CSS style property specification in the Span Tag in HTML.

<!doctype html>
<html>
	<head>
	</head>
	<body>
		<h1>Typical Application of span with multiple property.</h1>
		<p>I am currently working in software development company which is in the <span style="font-weight:bold;">New York</span>.</p>
		<p>I am currently working in software development company which is in the <span style="font-style: italic;">New York</span>.</p>
		<p>I am currently working in software development company which is in the <span style="text-decoration: underline;">New York</span>.</p>
		<p>I am currently working in software development company which is in the <span style="font-weight:bold; text-decoration: underline;">New York</span>.</p>
	</body>
</html>

In this example we have used four major span tag applications to create a different look and feel for some selected keyword in the paragraph.

Span Tag in HTML Span Element in HTML
Fig.2 – Multiple Span Example code output screenshot

The screenshot above shows the browser output for code listing in example 2. In the screenshot shows the text in the bold, italic and underline.

Caution: In the above examples we have used style attribute of the HTML tag, to specify inline CSS style. But we can also use class or id attribute to specify the CSS style in the head part of the web page. In this case we use the class or id value as selector in the style.

You can leave a response, or trackback from your own site.
Leave a Reply to the article

Validation and Recognition

Valid CSS! Valid HTML5!          Protected by Copyscape