Span Tags ?

Span Tags are non-semantic tags and used to wrap few words for styling purposes Normally we use span tags inside a block element such as p tags. But we could use span tag separately too. You can use as many span tag as you want in any html file or webpage.

Syntax and Usage :

To use the tag, simply include it in your HTML markup with an opening and closing tag. You can use the tag to wrap individual words, characters, or inline elements within a larger block of text.
Here's an example: 

<span> A new day.</span>

<header>
  <div> A div wrapping content <span>inside semantic</span> header tag.</div>
</header>

<div>
  <p> Life is a <span>learning</span>.</p>
  <p> Life is <span>amazing</span>.</p>
  <p> Life is <span>funny</span>.</p>
</div>

  <span>Independent house</span>
  <span>Independent Swimming pool</span>
Styling with CSS :

The primary purpose of using span tags is to apply styles to specific portions of text or inline elements using CSS. By assigning class or ID attributes to span tags, you can target them in your CSS stylesheets and modify their appearance. 

<span class="highlight"> A new day.</span>
.highlight {
   /* CSS styles */
}


The span tag is commonly used in conjunction with CSS properties like color, font-weight, text-decoration, and background-color to add emphasis or visually distinguish certain elements within a paragraph or sentence.

Accessibility and Semantic Use :

While the span tag doesn't have any inherent semantic meaning, it can be useful for accessibility purposes when used with appropriate ARIA attributes. By adding ARIA roles and properties to tags, you can improve the accessibility and screen reader experience for users with disabilities. 

<span role="button" tabindex="0">Clickable Span</span>
Best practices :

When working with span tags, it's important to follow these best practices:

Use for Inline Elements : span tags are designed to target and style inline elements. Avoid using them for larger blocks of content or structural elements, as other HTML tags are more suitable for those purposes.

Meaningful Class and ID Names : Choose descriptive class and ID names for your span tags to ensure clarity and maintainable code.

Keep Code Readable : Use span tags judiciously and avoid excessive nesting to keep the code readable and maintainable.

The tag is a valuable tool for applying styles or behaviors to specific portions of text or inline elements. By using tags appropriately and in combination with CSS, you can add emphasis, modify appearance, and enhance the accessibility of your web content.

Note::
Please do not forget that span tags are inline element. And if you remember, it has right/left extra margins and paddings by default but does not have top/bottom margin/paddings and we can not set it by css even.
FYI :: These extra margings and paddings we need to remove from all span elements and then only UI will be consistent and follow css box model, obviously when we go to css.

PrevNext