difference between div and span tag

Question

Can anyone give me the difference between div and span tags?

Answer 1

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.

Answer 2

In HTML, both <span> and <div> (division) are structural elements of a document. Both can have nested tags, attributes applied, and can be used to provide styling, semantic clarity and access from dynamic code or when navigating the Domain Object Model (DOM). They're difference lies in their coverage. A <span> maintains coverage in-line, whereas a <div> is block-level. Their versatility, and perhaps previous lack of alternatives, leads these popular tags to overuse.

Now HTML5 has specific tags that should be used in place of <span> and <div>, including <fieldset> (forms), <legend>, <label>, <input>, <header>, <footer>, <caption> and <figure>, just to name a few. These new additions should be used in more specific scenarios they were designed for.

For more information, look at Section 4, "The elements of HTML", from W3C. In particular, look for the sections, grouping contexts and forms.

Answer 3

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.

Answer 4

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>

Answer 5

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

Answer 6

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.