Doubt on Span Tag

I am confused what a span tag does in html I recently completed my lesson and when coming to review of my lesson I still doesn’t know what a span tag does can anyone please explain this to me with example.

Span is a way to mark a particular piece of text to give it different attributes to the other text. It can be thought of as similar to div but for inline-text.
Examples

<p>My mother has <span style="color:blue">blue</span> eyes.</p>

<p>Gradually add the <span class="ingredient">olive oil</span> while running the blender slowly.</p>

In point of fact, HTML elements do not “do” anything. They are markup, not commands. As mentioned above, a <span></span> is simply an inline container that lets us give special treatment to the text it contains. As it is an inline element, we would want to confine their use to paragraphs, list items, or other block-level containers, as opposed to using them for block sectioning.

Red White Blue

<p><span>Red</span> <span>White</span> <span>Blue</span></p>

If those were block level elements they would be on their own line when rendered.

2 Likes