HTML <span> Tag
The
<span> tag in HTML is used to group inline elements and apply styles to them without affecting the overall layout of the page. It is a generic inline container that does not add any extra spacing or line breaks. You can use the
tag to target specific sections of text within a larger block of content and style them differently.
For example, if you want to highlight a particular word or phrase in a paragraph, you can wrap it in a tag and apply a different color, font size, or font style to it. This allows you to create visually distinct sections within your text without changing the structure of the content.
Here is an example of how the <span> tag can be used in HTML:
<p>
This is a <span style="color: red;">red</span> word in a paragraph.
</p>
In this example, the word "red" is wrapped in a <span> tag with a style attribute that sets the color to red. This will only affect the color of the word "red" and not the rest of the text in the paragraph.
The <span> tag can also be used in combination with CSS classes or IDs to apply more complex styles to specific sections of text. Here is an example with a CSS class:
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
<p>
This is a <span class="highlight">highlighted</span> word in a paragraph.
</p>
In this example, the word "highlighted" is wrapped in a <span> tag with a class of "highlight", which applies a yellow background color and bold font weight to the text.
Here are the main attributes of the <span> tag and their use:
| Attribute |
Description |
| style |
Defines inline styles for the content within the tag |
| class |
Defines one or more classes for the content within the tag |