HTML Span Tag

The HTML Span tag is an inline element used to group and apply styles to small portions of text or other HTML elements. The span tag does not create a new line or separate the content from the surrounding text, unlike block-level elements such as <div>.

Syntax

The syntax for the HTML span tag is as follows:

1<span>Text or HTML element</span>

Examples

Here are some examples of how the span tag can be used in HTML:

Example 1: Text Styling

1<p>Lorem ipsum dolor sit <span style="color: red; font-weight: bold;">amet</span>, consectetur adipiscing elit.</p>

In this example, the word "amet" is enclosed within a span tag and has a red color and bold font weight applied to it.

Example 2: Grouping Elements

1<ul>
2  <li><span class="item">Item 1</span></li>
3  <li><span class="item">Item 2</span></li>
4  <li><span class="item">Item 3</span></li>
5</ul>

In this example, the <span> tag is used to group each list item with a class of "item". This can be useful when applying styles to a specific group of elements.

Example 3: Adding Icons

1<p>
2Follow us on 
3<span class="icon"><i class="fa fa-twitter"></i></span> 
4Twitter and 
5<span class="icon"><i class="fa fa-facebook"></i></span> 
6Facebook.
7</p>

In this example, the <span> tag is used to contain an icon from the Font Awesome icon library. The icon is added using the <i> tag within the span with a class of "icon".