I got confused about the listed elements.
What I already know is:
They all don't have real meanings.
Fragment is not a real element.
Can you explain what are the key differences between them? When should we choose one over the other?
vs vs
Asked
Active
Viewed 1,750 times
-1
jonrsharpe
- 115,751
- 26
- 228
- 437
Lusha Li
- 1,068
- 2
- 11
- 22
-
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span A span and a div are very similar, however a span defaults to display inline where a div is display block. You can change them with CSS, but that’s the default.
– Nate
May 29 '19 at 17:44
-
See https://stackoverflow.com/questions/183532/what-is-the-difference-between-html-tags-div-and-span; Fragment doesn't appear in the DOM at all, see https://reactjs.org/docs/fragments.html
– jonrsharpe
May 29 '19 at 17:45
1 Answers
1
I'm not sure about <fragment> but can tell about differences of <div> and <span>.
The difference between <span> and <div> is that a <span> element is in-line and usually used for a small chunk of HTML inside a line (such as inside a paragraph), whereas a <div> (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.
<div> example:
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
<span> example:
<h1>My <span style="color:red">Important</span> Heading</h1>
A final example is when you use
<div>Hello</div>
<div>World</div>
that gives this:
Hello
World
<div> gives a new line between each because it is a block-level element, whereas <span> doesn't:
<span>Hello</span>
<span>World</span>
Hello World
Asked
Active
Viewed 1,750 times
-1
jonrsharpe
- 115,751
- 26
- 228
- 437
Lusha Li
- 1,068
- 2
- 11
- 22
-
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span A span and a div are very similar, however a span defaults to display inline where a div is display block. You can change them with CSS, but that’s the default. – Nate May 29 '19 at 17:44
-
See https://stackoverflow.com/questions/183532/what-is-the-difference-between-html-tags-div-and-span; Fragment doesn't appear in the DOM at all, see https://reactjs.org/docs/fragments.html – jonrsharpe May 29 '19 at 17:45
1 Answers
1
I'm not sure about <fragment> but can tell about differences of <div> and <span>.
The difference between <span> and <div> is that a <span> element is in-line and usually used for a small chunk of HTML inside a line (such as inside a paragraph), whereas a <div> (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.
<div> example:
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
<span> example:
<h1>My <span style="color:red">Important</span> Heading</h1>
A final example is when you use
<div>Hello</div>
<div>World</div>
that gives this:
Hello
World
<div> gives a new line between each because it is a block-level element, whereas <span> doesn't:
<span>Hello</span>
<span>World</span>
Hello World
