difference between div and span tag

Question

a 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>blah</span> <span>foo</span></p>

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

<div>foo</div><div>blah</div>

^ These divs will be on separate lines.

With CSS though, you can easily override the styles for span and block levels, but that shouldn't have any bearing on your initial markup and structure.

The difference between span and div is that a span element is in-line and usually used for a small chunk of in-line HTML 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 id="scissors">
    <p>This is <span class="paper">crazy</span></p>
</div>

div and especially span shouldn't actually be used that often. Whenever there is a sensible alternative that should be used instead. For example, if you want to emphasize the word 'crazy' and the class 'paper' is bold, then the code might look like this:

<div id="scissors"> 
    <p>This is <strong class="paper">crazy</strong></p>
</div>

Here is a demonstration...

#mydiv{
  display:inline;
}

#myspan{
  display:block;
}

<div id="mydiv">
  this div will behave just like a span
</div>

<span id="myspan">
  this span will behave just like a div
</span>

Div is a block element; span - inline, so

• Div's places in separate lines; span's in one line
• Div's has width, span's haven't

div is block element and span is inline element.

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

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

More difference about inline/block, div and span

I'll give simple answer, not going into block/inline technical stuff.

Div element can contain other elements, including other Div.

Span element can't contain "complex" elements, only text or things like <a> tag which are same "level" as the span, or technically speaking (sorry!) are inline as well.

Div is used as "placeholder" in the page, for example to contain the whole Menu, then you can place it wherever you want using only CSS and apply same style to everything in the placeholder.

Span is used to style specific text, when you have text inside other text that you want to be in different font/color/size. Can't really think of any other usage for span tag.

The tag is used to group inline-elements in a document and this tag provides no visual change by itself. It provides a way to tag a hook to a part of text or document.

The tag defines division or section in an HTML document.