What is the difference between the <span> and the class?

Question

While studying XHTML, I understood that the <span> is an inline element. A class will be a block element.

But when to use one and the other? Besides them, when to use some elements knowing that there are others similar.

Answer 1

You are mixing different things. A span is an inline HTML element, but class is an attribute of elements such as span, p, div or any other. That is, you can add the attribute class span to give you CSS classes.

In the same way that you can do so to change the color to blue:

<span style="color: blue;">Este texto é azul</span>

The same can (and should) be done using CSS classes in order to have CSS rules in a separate file that controls all elements with a certain class. So the example above can be done like this using class:

CSS

.azul{ color: blue;}

HTML

<span class="azul">Este texto é azul também</span>

This example above is simple but on pages with hundreds of spans it is not practical to write the Stile or change element by element, so class(s).

Another great advantage that has nothing to do with CSS is the possibility to select groups of elements that share the same class in the DOM and apply other rules to them or change them if necessary. This can be done with CSS, for example using .azul:hover{ color: red;} that changes the color in case the mouse goes over, or in case of javascript (with or without library) where it can be done:

document.querySelectorAll('.azul').innerHTML = 'Novo texto...';

and thus change the text (content) of the elements that have this class, regardless of whether they are span or not.

These are very simple examples but in the background it is important to remember that the span is an element of the DOM, and the class is an attribute of DOM elements that gives them CSS classes to apply CSS rules to the element; or can be selected by javascript to change/select the element(s) that has this(s) classes.

Answer 2

The span is only one HTML element while the class is used for manipulate any HTML element, for example, you can use it to style any element. See:

CSS

.nav {
 background-color: #000;
}

HTML

<span class="nav">Texto<span>
<p class="nav">Texto<p>

In this example, both the element p as to the span will receive the background black because it has the class .nav

If you use the element span to stylize, all elements span will receive the properties of span.

Example:

span {

  background-color: #fff;

}

You can also use the span to style only a part of a text.

Example:

CSS

span {

  color: red;

}

HTML

<p>Texto <span>texto vermelho</span> texto.</p>

This site is good to study http://www.w3schools.com/