February 16th, 2019 
Nilesh Chaurasia 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.
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.
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.
Posted in 
Tags: 
