Zai Xeno Zai Xeno - 5 months ago 13
HTML Question

Are <section>, <div>, and <span> all basically the same thing?

I hear they all are basically putting elements in groups, so could all these elements be used the same way?

Answer

<section> (HTML 5) and <div> (been around forever), aside from SEO / semantic differences, are very similar -- but <span> is quite different.

As an inline element, <span> has several limitations that the other two do not, a couple of which are:

  • Cannot style/change height or width

  • Cannot use margin to raise/lower it above baseline

So what is span for? Usually used to enclose a string of text for any of the following purposes:

  • Assign an ID or class to a bit of text in order to style it

  • Assign an ID or class to a bit of text in order to target it for javascript manipulation

  • With an ID or class, javascript can inject or remove text

References (for further reading) :

What is the difference between <section> and <div>?

https://www.smashingmagazine.com/2013/01/the-importance-of-sections/

CSS width of a <span> tag

Does height and width not apply to span?

Comments