HTML span Tag
Example: In this example, we simply use span tag with style in HTML.
The HTML span element is a generic inline container for inline elements and content. It is used to group elements for styling purposes (by using the class or id attributes), A better way to use it when no other semantic element is available. span is very similar to the div tag, but div is a block-level tag and span is an inline tag. Span tag is a paired tag means it has both open(<) and closing (>) tag, and it is mandatory to close the tag.
- The span tag is used for the grouping of inline elements.
- The span tag does not make any visual change by itself.
- span is very similar to the div tag, but div is a block-level tag and span is an inline tag.
<span class="">Some Text.............</span>
Example 1: In this example suppose we want to write three times GeeksforGeeks in three lines with bold, italic, underline, in green color with font-family = courier new, so we need to use many HTML tags such as <b>, <i>, <u>, <font> for every time in every line, and we want to make changes need to modify every tag.
Example 2: In this example by using <span> tag we can reduce code and HTML Attributes see below example will display the same output as the above example with using <span> tag by applying CSS in a span tag.
Example 3: As we know span is an inline tag it takes space as much as required and leaves space for other elements let see it in the below example all four-span elements will display in the same line because each tag takes only the necessary space and the rest of the space free for other elements.
Example 4: A span tag can be used to set color/background color a part of a text. In the below example inside paragraph applying three times span tag with a different style.
Difference Between Div tag and span tag: The div and span tag are two common tags when creating pages using HTML and perform different functionality on them while div tag is a block-level element and span is inline element The div tag creates a line break and by default creates a division between the text that comes after the tag as begun and until the tag ends with </div>. div tag creates separate boxes or containers for all elements inside this tag like text, images, paragraphs.
- Google Chrome
- Internet Explorer
- Edge 12 and above
- Firefox 1 and above
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.