How HTMLWhat is a Span in HTML
In HTML, a <span> is an inline element used to group and style text within a larger block of content. It does not add any extra line breaks or spaces between the content it surrounds. The <span> element is commonly used to apply CSS styles to a specific section of text or to create a hook for JavaScript manipulation.
Syntax
The syntax for the <span> element is as follows:
<p>This is a <span>span</span> of text in a paragraph.</p>
Example 1: Basic <span> Usage
<!DOCTYPE html>
<html>
<head>
<title>Span Example</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p>This is a <span class="highlight">highlighted</span> text.</p>
</body>
</html>
Output:
Example 2: Styling a <span>
<!DOCTYPE html>
<html>
<head>
<title>Span Styling</title>
<style>
.red {
color: red;
}
</style>
</head>
<body>
<p>This is a <span class="red">red</span> text.</p>
</body>
</html>
Output:
Example 3: Nested <span> Elements
<!DOCTYPE html>
<html>
<head>
<title>Nested Span</title>
<style>
.red {
color: red;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<p>This is a <span class="red">red text with a <span class="blue">blue</span> word</span>.</p>
</body>
</html>
Output:
Example 4: Inline Styling with <span>
<!DOCTYPE html>
<html>
<head>
<title>Inline Styling</title>
</head>
<body>
<p>This is a <span style="font-style: italic;">italic</span> text.</p>
</body>
</html>
Output:
Example 5: <span> with JavaScript Manipulation
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Manipulation</title>
<script>
function changeColor() {
document.getElementById("demo").style.color = "green";
}
</script>
</head>
<body>
<p>This is a <span id="demo" onclick="changeColor()">clickable</span> text.</p>
</body>
</html>
Output:
Example 6: <span> for Accessibility
<!DOCTYPE html>
<html>
<head>
<title>Accessibility</title>
</head>
<body>
<p>This is a <span title="This is an important word">important</span> text.</p>
</body>
</html>
Output:
Example 7: Using <span> for Highlighting Text
<!DOCTYPE html>
<html>
<head>
<title>Highlight Text</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p>This is how2html.com a <span class="highlight">highlighted</span> text.</p>
</body>
</html>
Output:
Example 8: <span> for Inline Block Styling
<!DOCTYPE html>
<html>
<head>
<title>Inline Block Styling</title>
<style>
.block {
display: inline-block;
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<p>This is an <span class="block">inline block</span> text.</p>
</body>
</html>
Output:
Example 9: Using <span> for Language Styling
<!DOCTYPE html>
<html>
<head>
<title>Language Styling</title>
<style>
.english {
font-weight: bold;
}
.spanish {
font-style: italic;
}
</style>
</head>
<body>
<p>This is an <span class="english">English</span> and <span class="spanish">Spanish</span> word.</p>
</body>
</html>
Output:
Example 10: <span> for Semantic Markup
<!DOCTYPE html>
<html>
<head>
<title>Semantic Markup</title>
</head>
<body>
<p>This is a <span class="quote">quote</span> from a famous author.</p>
</body>
</html>
Output:
In conclusion, the <span> element in HTML is a versatile and powerful tool for styling and manipulating text within a document. It allows developers to target specific sections of text and apply custom styles or functionality without affecting the overall structure of the content. By understanding how to effectively use <span>, web designers can create more visually appealing and accessible web pages.