CODEWITHSUNDEEP
html
user1097771
user1097771

Reputation:

HTML: What exactly is <span>'s purpose?

I've read many explanations of what the actual purpose of the < span > tag is, and I've tried to incorperate those explanations into real applications but have failed every time.

One person told me that it was to apply classes to sub-tags below it, which does kind of work, except it doesn't apply dimensions to elements, unless you mess around with the display and/or inline settings, which can totally screw up a layout.

Then someone else told me that it's use as a substitute for the < div > tag, which doesn't work because floats or "margin: auto"-type attributes don't work unless contained inside certain types of elements.

Then someone else told me that it's used as a text container, which doesn't work because the "text-align" attribute doesn't work, again, unless contained inside certain types of elements. A default-attribute-cleared < p > tag is much more suited, in my experience.

So what exactly is the point of them? Why are so many people using them when < div > seems to do everything that they're apparently capable of and more?

Upvotes: 6

Views: 4420

Answers (3)

Quentin
Quentin

Reputation: 943217

It is an inline element with no attached semantics that can be used to wrap some inline content for

  • the application of JavaScript (e.g. event handlers or moving about the DOM)
  • the application of CSS
  • use with the lang attribute
  • processing by custom tools

… when no element with more appropriate semantics exists.

floats or "margin: auto"-type attributes don't work unless contained inside certain types of elements.

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

Why are so many people using them when <div> seems to do everything that they're apparently capable of and more?

A div is identical to a span except it:

  • Can contain block elements
  • Cannot (error recovery not withstanding) be contained by an inline element (or any other element that can contain only inline content, such as a <p>)
  • Is display: block by default (instead of inline)

Upvotes: 8

Sarfraz
Sarfraz

Reputation: 382666

From Official Docs:

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

As it says, you can use <span> tag to structure (inline) the sections of page along with styling which you may optionally pass via id, class or stylesheets.

Characteristics of <span> tag:

  • It's display is inline by default which means:
    • you can not apply width to it
    • you can not apply height to it
    • you can make it block-level too by using display:block (div serves the same purpose)

The <div> tag is opposite to that and you can apply above rules to it.

Upvotes: 17

Animesh
Animesh

Reputation: 37

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

Upvotes: 1

Related Questions