<span> Tag in HTML | Inline Element
The <span> tag in HTML is an inline container used to group or style text and other inline elements. It does not create any new block-level elements but allows applying styles to a part of the content.
Key Points on <span> Tag:
- The <span> tag is a generic container for inline content, often used with CSS for styling purposes.
- It has no visual effect on its own and does not affect the layout of the document unless styled using CSS.
- The <span> tag is commonly used for applying styles, adding classes or ids, and manipulating inline content in JavaScript.
- It is typically used within block-level elements like
<p>,<div>, or<h1>for styling specific portions of text.
Syntax of <span> Tag:
Syntax Example
<span>Some inline text</span>Example of <span> Tag in HTML:
This example demonstrates the usage of the <span> tag to apply styles to specific portions of text.
Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Span Tag Example</title>
<style>
.highlight { color: red; font-weight: bold; }
</style>
</head>
<body>
<h1>HTML Span Tag Example</h1>
<p>
This is an example of using the span tag to highlight specific text.
</p>
</body>
</html>Output
HTML Span Tag Example
This is an example of using the span tag to highlight specific text.
The <span> tag is a versatile inline element used for grouping and styling text or other inline elements without affecting the layout. It is commonly used in combination with CSS and JavaScript to manipulate or format specific portions of content within a document.