HTML: What is a <span> target?

Question

I read a lot of explanations that the true goal of <span>, and I tried to include these explanations in real applications, but failed every time.

One person told me that he should apply the classes to the subtags beneath it, which does some work, except that it does not apply measurements to the elements, unless you interfere with the display and / or the built-in settings, which can completely spoil the layout.

Then someone told me that he uses as a replacement for a <div>, which does not work, because the attributes "float" or "margin: auto" do not work if they are not contained within certain types of elements.

Then someone told me that it is used as a text container that does not work, because the "text-align" attribute does not work if it is not contained within certain types of elements. The default cleared attribute <p> is much more suitable, in my experience.

So what is their essence? Why do so many people use them when the <div> seems to do everything that they seem to be capable of and much more?

Answer 1

From official docs:

The DIV and SPAN elements, together with the id and class attributes, offer a common mechanism for adding structure to documents. These elements define inline content (SPAN) or block level (DIV), but do not overlay any other presentation idioms on the content. Thus, authors can use these elements in combination with a style sheet, attribute lang, etc. . to adapt HTML to your own needs and tastes.

As the saying goes, you can use the <span> to structure (embed) sections of the page along with styles that you can optionally pass through id, class or stylesheets.

Characteristics of the <span> :

• Inline is displayed by default, which means:
  • you cannot apply width to it
  • you cannot apply height to it
  • you can also make it a block level using display:block ( div serves the same purpose)

The <div> opposite of this, and you can apply the above rules to it.

Answer 2

This is an inline element without attached semantics that you can use to transfer some inline content to

• JavaScript application (e.g. event handlers or DOM navigation)
• CSS application
• use lang attribute
• custom tooling

... if there is no element with more appropriate semantics.

floats or "margin: auto" attributes do not work if they are not contained within certain types of elements.

They work (or otherwise), based mainly on the display value, and not on the element type.

Why do so many people use them when the <div> seems to do everything that they seem to be capable of and more?

Div is identical to the range except for it:

• May contain block elements
• It is impossible (error correction is not saved) to contain an inline element (or any other element that can contain only inline content, for example <p> )
• Default display: block (instead of inline )

Answer 3

When the text is in the <span> element, you can add styles to the content or manipulate the content.