Span
The <span> tag is an inline container used to mark up a part of a text or document. Unlike block-level elements, it does not break the flow of content it stays on the same line. It is mostly used with CSS or JavaScript to apply styles or interactivity to a specific portion of content without affecting the entire block.
Example without <span> Tag
Output:
The entire paragraph has a background color.
Example With <span> Tag
Output:
Only the word 'Quipoin' has a background color.
Usage of <span>
Key Point
- <span> is an inline tag, meaning it does not start on a new line.
- It is used to style a specific part of text within a larger block (like a <p> tag).
- Works great with CSS for styling and JavaScript for interactivity using id or class.
- Commonly used when only a small portion of content needs customization.
- Unlike <div>, which is a block-level element, <span> only takes up as much space as needed.
Example without <span> Tag
<!DOCTYPE html> <html> <head> <title>Span</title> </head> <body> <h1>Example without span tag</h1> <p style="background-color: aquamarine">Hello and Welcome to Quipoin</p> </body> </html>
Output:
The entire paragraph has a background color.
Example With <span> Tag
<!DOCTYPE html> <html> <head> <title>Span</title> </head> <body> <h1>Example with span tag</h1> <p>Hello and Welcome to <span style="background-color: aquamarine;">Quipoin</span></p> </body> </html>
Output:
Only the word 'Quipoin' has a background color.
Usage of <span>
- Perfect for applying styles to a portion of inline text.
- Common in scenarios like highlighting words, color-coding, or managing events using JavaScript.
- Can be easily customized using class or id attributes.
- Think of <span> as a 'lightweight container', compared to <div> which is block-level and takes up more space.