Add class to span javascript

Question

The <span> HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element.

Table of Contents Show

Specifications
Browser compatibility
Block versus Inline HTML Elements
Id Attribute
Class Attribute
Additional Reading
Can I add class to span?
Can you put class in span HTML?
Can you add a class in JavaScript?
How do you append a class in JavaScript?

Try it

Attributes

This element only includes the global attributes.

Example

Example 1

HTML

<p><span>Some text</span></p>

Result

Example 2

HTML

<li>
  <span>
    <a href="portfolio.html" target="_blank">See my portfolio</a>
  </span>
</li>

CSS

li span {
  background: gold;
}

Result

Specifications

Specification
HTML Standard # the-span-element

Browser compatibility

BCD tables only load in the browser

Block versus Inline HTML Elements

From Stylin' With CSS by Charles Wyke-Smith:

...most XHTML tags fall into two broad categories in respect to the way they display on the page: block and inline. Block level elements such as headings <h2> through <h6> and paragraphs <p> will obligingly stack down the page with no line breaks required. They even have preset margins to create space between them. Inline elements have no such margins, and sit side by side across the page, only wrapping to the next line if there is not enough room for them to sit next to each other. (p. 18)

Div Tag

The div tag is a block level HTML element. It is used to divide or section of other HTML tags in to meaningful groups.

A perfect example of the use of a div tag is to designate a navigation list:


<div id="navigation">
  <ul>
    <li><a href="index.html" title="Go Home">Home</a></li>
    <li><a href="about.html" title="Learn more about us">About</a></li>
    <li><a href="contact.html" title="Contact us">Contact</a></li>
  </ul>
</div>

Span Tag

The span tag is an inline HTML element that is used to group a set of inline elements. Generally speaking, you use span to hook text or a group of tags that you want to style differently. Often though, you can do this more semantically by using other elements like em or strong.

A good example of an appropriate use of span is in a header that you want to style in two parts.


<h2>Comm 244: <span class="coursename">Design for the WWW</span></h2>

Id Attribute

The id attribute is used to label sections or parts of your HTML document. You may only use the same id once per page, so save it for important major sections of your page. Additionally, the id selector in CSS has a high specificity level and therefore overrules other things (like the class selector).


<div id="navigation">
  <ul>
    <li><a href="index.html" title="Go Home">Home</a></li>
    <li><a href="about.html" title="Learn more about us">About</a></li>
    <li><a href="contact.html" title="Contact us">Contact</a></li>
  </ul>
</div>

Class Attribute

If a page had multiple sidebar chunks, we might want to make one class so that we could use CSS to style each chunk with one rule.


<div class="aside">
  <h3>Sidebar Title</h3>
  <p>sidebar text Lorem ipsum dolor sit amet,
  consectetur adipisicing elit.</p>
</div>

Additional Reading

Here are some articles with more information about divs, spans, ids and classes.

The Semantic Div, Id, Class, and Span
Grouping elements: the DIV and SPAN elements

Back to Class Three page »

Can I add class to span?

If you want to makes some particular text or any other content different from the rest, you can wrap it in a span tag, give it a class attribute, then select it with the attribute value for styling. In the examples below, I change the color , background-color , and font-style of some text by wrapping it in a span tag.

Can you put class in span HTML?

The <span> HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang .

Can you add a class in JavaScript?

Adding the class name by using JavaScript can be done in many ways. Using . className property: This property is used to add a class name to the selected element.