0

I had a doubt in my mind that what are the differences between these :- 

<div> TEXT </div> 
<span> TEXT </span>
user2444327
  • 83
  • 9

3 Answers3

3

In simple words div is a block element and span is inline element.

Generally, block-level elements may contain inline elements and other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.

and inline element

Generally, inline elements may contain only data and other inline elements.

Block Level elements & Inline Elements

Sachin
  • 40,216
  • 7
  • 90
  • 102
  • ;) – Spook Jun 04 '13 at 08:17
  • 2
    @Spook — Which causes a block element to be rendered as an inline element, but doesn't affect any of the other rules that apply to block elements (which aren't all that consistently applied, which is why the term has (AFAIK) been dropped in the HTML 5 draft). – Quentin Jun 04 '13 at 08:18
  • I've learned, that most of non-control HTML tags (control, ie. `a`, `img`, `table` etc.) can be easily converted to another using CSS styles, so I use to say *what the tag should be used for* rather than *what the tag is* and that's the reason of my comment. Nevertheless, it's good to know about block and inline elements, I didn't know about that. – Spook Jun 04 '13 at 09:00
2

<div> is a block element and <span> is a inline element.

These links help you to understand the inline and block elements.

http://www.impressivewebs.com/difference-block-inline-css/

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm

Roy Sonasish
  • 4,571
  • 20
  • 31
1

DIV is typically for a block element where as span is an in line element.

So you typically do something like

<p>This word is <span class="blue">blue</span></p>

You should probably not do

<span class="blue">
    <div class ="layout">
        <p>Content</p>
        <img src = "this.jpg" />
    </div>
</span>

Now, there is the CSS attribute called display which will allow you to display a div in line (display:inline;) which can cause further confusion since visually it may let you display the same render with either tag. Whether the code is 'correct' or not may or may not mean you get desired results in your browser! Typically, the results probably are what you want but the issue may occur when the site becomes bigger and you then realise something is not right and have to fix it at a later stage!

Any way, W3Schools define it as

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

And

The tag defines a division or a section in an HTML document.
The tag is used to group block-elements to format them with CSS.
Source

Dave
  • 8,163
  • 11
  • 67
  • 103