RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-span-tag/ below:

HTML Tag - GeeksforGeeks

HTML Tag

Last Updated : 02 May, 2025

The HTML tag is an inline container that is used to group and apply styles or scripts to specific parts of text or elements within a document.

The  tag is inline, meaning it doesn't create a new line. It stays within the same line as the text around it.
The  tag doesn’t change how the content looks on its own. It's used to apply styles or to control parts of content through JavaScript.

Syntax

<span class="">Some Text</span>

Note: HTML tag supports the Global attribute and Event Attributes.

Examples of HTML Tag

Here are a few examples of the HTML span Tag:

Example 1: Reducing Code and Grouping Styles with 

In this example, we use the tag to apply CSS styles directly to specific content, reducing repetitive HTML attributes. This approach ensures cleaner code and a consistent style across elements.

HTML


 <!DOCTYPE html>
<html>
  <head>
    <title>GeeksforGeeks span tag</title>

    <!-- style for span tag  -->
    <style>
      span {
        color: green;
        text-decoration: underline;
        font-style: italic;
        font-weight: bold;
        font-size: 26px;
      }
    </style>
  </head>

  <body>
    <span> GeeksforGeeks </span><br />
    <span> GeeksforGeeks </span><br />
    <span> GeeksforGeeks </span><br />
  </body>
</html>

Output:

Span tag with CSS style Example 2: Inline Behavior of Elements

In this example, the tag works as an inline element. Each takes only the space required for its content, allowing multiple elements to appear on the same line without affecting the overall layout.

HTML


 <!DOCTYPE html>
<html>

<head>
    <title>GeeksforGeeks span tag</title>
</head>

<body>

    <!-- span tags with inline style/css  -->
    <span style="background-color:powderblue;">
        GfG
    </span>
    <span style="background-color: lightgray;">
        -Contribute-
    </span>
    <span style="background-color: yellow;">
        Article
    </span>
    <span style="background-color: lightgreen;">
        GCET
    </span>
</body>

</html>

Output:

Span_tag_with_CSS_style  vs <div> tag

Both  and <div> are used as containers in HTML, there are key differences between them:

 <div> Inline element Block-level element For styling or grouping inline content For grouping block-level content Does not break the flow of text Starts on a new line and takes up full width Styling or scripting small portions of text Structuring larger sections of content Best Practices for Using the  Tag

Avoid Overuse: Don't overuse  tags unnecessarily. Only use it when you need to apply specific styles or functionality to small portions of text.
Use Classes for Styling: Prefer using CSS classes over inline styles for better maintainability and cleaner code.
Keep Accessibility in Mind: When using , ensure that it doesn’t negatively affect the accessibility of your content. Add ARIA attributes if necessary for screen readers.
Group Inline Content: Use  for grouping small portions of text or inline elements for styling or JavaScript manipulation without disrupting the layout.

Browsers Support Conclusion

The HTML  tag is a versatile inline element used for applying styles or manipulating small sections of content. While it doesn't add any semantic meaning to the content, it plays an essential role in web development by providing hooks for styling and scripting.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-span-tag/ below:

HTML <span> Tag - GeeksforGeeks