What is a Span in HTML-How HTML

What is a Span in HTML

In HTML, a  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  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  element is as follows:

<p>This is a <span>span</span> of text in a paragraph.</p>

Example 1: Basic `` 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:

What is a Span in HTML

Example 2: Styling a ``

<!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:

What is a Span in HTML

Example 3: Nested `` 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:

What is a Span in HTML

Example 4: Inline Styling with ``

<!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:

What is a Span in HTML

Example 5: `` 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:

What is a Span in HTML

Example 6: `` 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:

What is a Span in HTML

Example 7: Using `` 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:

What is a Span in HTML

Example 8: `` 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:

What is a Span in HTML

Example 9: Using `` 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:

What is a Span in HTML

Example 10: `` 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:

What is a Span in HTML

In conclusion, the  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 , web designers can create more visually appealing and accessible web pages.

What is a Span in HTML