what is the difference between span and div in html?


Hello, I Would like to know what's the actual difference between <span> and <div> tags in HTML?

When we should prefer <span> and when <div>?


Asked by:- jaiprakash
0
: 2658 At:- 10/30/2017 10:08:00 AM
HTML span div difference between span & div







3 Answers
profileImage Answered by:- Vipin

A <div> is a block-level-element while a <span> is an inline element.

Inline-Elements: These elements do not force new lines before or after its placement, and it only consumes as much space as necessary.

Block-Elements: New lines appear before and after the element with it consuming the full width available.

When to use Span and when div?

Use <span> when you need to add small amount to HTML text in a block, without changing it's structure, use <div> when you want to create a new block of code inside HTML

div is a block level, meaning it’s on its own separate line. a span is inline, so it’s a child of another block level element.

<p><span>Text here</span> <span>Yes one more line</span></p>

I can have multiple spans inside a block-level. They all show up on the same line.

<div>Test</div><div>test2 line</div>

//Output
//Test
//Test2 line

These divs text/code will be on separate lines.

3
At:- 10/30/2017 10:30:20 AM


profileImage Answered by:- jaiprakash

basically the difference between <div> and <span> is, that <div> is displayed as a block (means it will add a new line to your code) and <span> is displayed inline(it will not any new line when text is written inside it). To illustrate the difference, look at these two HTML examples:

    This is a line of text <div>with some text in a div</div>
    and some text after.

    This is a line of text <span>with some text in a span</span>
    and some text after.

Here is how the div example is displayed in a browser:

This is a line of text
with some text in a div

and some text after.

And here is how the span example is displayed in the browser:

This is a line of text with some text in a span and some text after.
2
At:- 11/2/2017 4:11:01 PM Updated at:- 11/2/2017 4:11:15 PM


profileImage Answered by:- neena

Here is the Visual Difference between inline element <span> and block element <div>, considering below HTML

<p>This is a line of text <div>with some text in a div</div> <div>with some text in a div</div>
and some text after.</p>

    <p>This is a line of text <span>with some text in a span</span>, <span> again with some text in a span</span>
    and some text after.</p>

Output:

div-vs-span-html-min.png
Hope it helps.

0
At:- 6/6/2021 2:33:44 PM






Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use