What is the span attribute in HTML and How to use it?

M

Mohit Verma

<span> Attributes in HTML

The <span> tag does not have specific attributes unique to itself. Instead, it inherits and utilizes common attributes available to all HTML elements. The <span> element is mainly used as an inline container to group and apply styles to small portions of text or inline content within a larger block of text.

Uses of <span> Attributes

The primary use of the <span> element is to apply styles or target specific portions of text within a larger block of content.

1. Using the style Attribute in <span>

You can apply inline CSS style properties directly to the <span> element to change the appearance of its content.

For Example

<span style="color: blue; font-weight: bold;">Blue and bold text</span>

2. Using the id Attribute in <span>

Though not common, you can give an id to a <span> element if you need to target it specifically with JavaScript or CSS.

For Example

<style>

  #span_text{

    background-color: red;

  }

</style>

<span id="span_text">This is important</span>

3. Using the class Attribute in <span>

The class attribute allows you to assign one or more class names to the <span> element. You can define the styles in a CSS file or within <style> tags in the HTML document.

For Example

<style>

  .high_light {

    background-color: green;

  }

</style>

<span class="high_light ">The text is highlighted.</span>

4. Using ARIA Attributes in <span>

You can use ARIA attributes to improve the accessibility of the content within the <span> element.

For Example

<span aria-label="Important Information">Here is the some important text.</span>

1 votes

Your Answer

Email Us: advertise@gdatamart.com

Donate Us: Support to GDATAMART

LifeStyle & Fun

© 2024 GDATAMART.COM (All Rights Reserved)