I hear they all are basically putting elements in groups, so could all these elements be used the same way?
Are , , and all basically the same thing?
Asked
Active
Viewed 2,772 times
1 Answers
2
<section> (also <article>, <aside>, and other HTML 5 additions) and <div> (been around forever), are very similar (except for SEO / semantic differences) -- but <span> is quite different.
All - even <html> and <body> - are just containers inside which you can put other containers/tags.
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? It is usually used to enclose a string of text for any of the following purposes:
Place some text into an invisible container in order to style it (assign an ID or class to the span to make that job easier)
Place some text into an invisible container in order to target it for javascript manipulation
javascript can inject or remove text from a container, like a span tag
Making a span tag a bit more stylable: If you add display:inline-block to the span, you can now give the container most of the above styles (margin, etc) that you could not do at its default setting of display:inline. (Note that if you add display:inline or display:inline-block to a DIV, it will now behave like a span...
References (for further reading) :
What is the difference between <section> and <div>?
https://www.smashingmagazine.com/2013/01/the-importance-of-sections/
Does height and width not apply to span?
Note that:
<p> and <h1> etc are exactly the same - containers inside which you can put other containers/tags/text - but these are like <span> in that they come with some automatic formatting that you may (or may not) desire. The primary reason for the different tags (except for a little bit of auto-formatting/css) is for SEO (semantics).
IF, while reading this, you begin to suspect you can program an entire website using nothing but DIVs . . . you are right. CSS is hella powerful.
cssyphus
- 37,875
- 18
- 96
- 111
, and all basically the same thing?
Asked
Active
Viewed 2,772 times
1 Answers
2
<section> (also <article>, <aside>, and other HTML 5 additions) and <div> (been around forever), are very similar (except for SEO / semantic differences) -- but <span> is quite different.
All - even <html> and <body> - are just containers inside which you can put other containers/tags.
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? It is usually used to enclose a string of text for any of the following purposes:
Place some text into an invisible container in order to style it (assign an ID or class to the span to make that job easier)
Place some text into an invisible container in order to target it for javascript manipulation
javascript can inject or remove text from a container, like a span tag
Making a span tag a bit more stylable: If you add display:inline-block to the span, you can now give the container most of the above styles (margin, etc) that you could not do at its default setting of display:inline. (Note that if you add display:inline or display:inline-block to a DIV, it will now behave like a span...
References (for further reading) :
What is the difference between <section> and <div>?
https://www.smashingmagazine.com/2013/01/the-importance-of-sections/
Does height and width not apply to span?
Note that:
<p> and <h1> etc are exactly the same - containers inside which you can put other containers/tags/text - but these are like <span> in that they come with some automatic formatting that you may (or may not) desire. The primary reason for the different tags (except for a little bit of auto-formatting/css) is for SEO (semantics).
IF, while reading this, you begin to suspect you can program an entire website using nothing but DIVs . . . you are right. CSS is hella powerful.
cssyphus
- 37,875
- 18
- 96
- 111