The answer is
Just for the sake of completeness, I invite you to think about it like this:
- There are lots of block elements (linebreaks before and after) defined in HTML, and lots of inline tags (no linebreaks).
- But in modern HTML all elements are supposed to have meanings: a
<p>is a paragraph, an<li>is a list item, etc., and we're supposed to use the right tag for the right purpose -- not like in the old days when we indented using<blockquote>whether the content was a quote or not. - So, what do you do when there is no meaning to the thing you're trying to do? There's no meaning to a 400px-wide column, is there? You just want your column of text to be 400px wide because that suits your design.
- For this reason, they added two more elements to HTML: the generic, or meaningless elements
<div>and<span>, because otherwise, people would go back to abusing the elements which do have meanings.
I would say that if you know a bit of spanish to look at this page, where is properly explained.
However, a fast definition would be that div is for dividing sections and span is for applying some kind of style to an element within another block element like div.
In HTML there are tags that add structure or semantics to content. For example the <p> tag is used to identify a paragraph. Another example is the <ol> tag for an ordered list.
When there is no suitable tag available in HTML as shown above, the <div> and <span> tags are usually resorted to.
The <div> tag is used to identify a blocklevel section/division of a document that has a line break both before and after it.
Examples of where div tags can be used are headers, footers, navigations etc. However in HTML 5 these tags have already been provided.
The <span> tag is used to identify an inline section/division of a document.
For example a span tag can be used to add inline pictographs to an element.
Just for the sake of completeness, I invite you to think about it like this:
- There are lots of block elements (linebreaks before and after) defined in HTML, and lots of inline tags (no linebreaks).
- But in modern HTML all elements are supposed to have meanings: a
<p>is a paragraph, an<li>is a list item, etc., and we're supposed to use the right tag for the right purpose -- not like in the old days when we indented using<blockquote>whether the content was a quote or not. - So, what do you do when there is no meaning to the thing you're trying to do? There's no meaning to a 400px-wide column, is there? You just want your column of text to be 400px wide because that suits your design.
- For this reason, they added two more elements to HTML: the generic, or meaningless elements
<div>and<span>, because otherwise, people would go back to abusing the elements which do have meanings.
As mentioned in other answers, by default div will be rendered as a block element, while span will be rendered inline within its context. But neither has any semantic value; they exist to allow you to apply styling and an identity to any given bit of content. Using styles, you can make a div act like a span and vice-versa.
One of the useful styles for div is inline-block
Examples:
I have used inline-block to a great success, in game web projects.
I would say that if you know a bit of spanish to look at this page, where is properly explained.
However, a fast definition would be that div is for dividing sections and span is for applying some kind of style to an element within another block element like div.
Remember, basically and them self doesn't perform any function either. They are not specific about functionality just by their tags.
They can only be customized with the help of CSS.
Now that coming to your question:
SPAN tag together with some styling will be useful on having hold inside a line, say in a paragraph, in the html. This is kind of line level or statement level in HTML.
Example:
<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>
DIV tag functionality as said can only be visible backed with styling, can have hold of large chunks of HTML code.
DIV is Block level
Example:
<div class="large-time">
<p>Am writing <span class="time"> this answer</span> in my free time of my day.
</p>
</div>
Both have their time and case when to be used, based on your requirement.
Hope am clear with the answer. Thank you.
Just for the sake of completeness, I invite you to think about it like this:
- There are lots of block elements (linebreaks before and after) defined in HTML, and lots of inline tags (no linebreaks).
- But in modern HTML all elements are supposed to have meanings: a
<p>is a paragraph, an<li>is a list item, etc., and we're supposed to use the right tag for the right purpose -- not like in the old days when we indented using<blockquote>whether the content was a quote or not. - So, what do you do when there is no meaning to the thing you're trying to do? There's no meaning to a 400px-wide column, is there? You just want your column of text to be 400px wide because that suits your design.
- For this reason, they added two more elements to HTML: the generic, or meaningless elements
<div>and<span>, because otherwise, people would go back to abusing the elements which do have meanings.
There are already good, detailed answers here, but no visual examples, so here's a quick illustration:
<div>This is a div.</div>_x000D_
<div>This is a div.</div>_x000D_
<div>This is a div.</div>_x000D_
<span>This is a span.</span>_x000D_
<span>This is a span.</span>_x000D_
<span>This is a span.</span><div> is a block tag, while <span> is an inline tag.
I would say that if you know a bit of spanish to look at this page, where is properly explained.
However, a fast definition would be that div is for dividing sections and span is for applying some kind of style to an element within another block element like div.
The significance of "block element" is implied but never stated explicitly. If we ignore all the theory (theory is good) then the following is a pragmatic comparison. The following:
<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>
produces:
This paragraph has a span.
This paragraph
has
a div.
That shows that not only should a div not be used inline, it simply won't produce the desired affect.
<div> is a block-level element and <span> is an inline element.
If you wanted to do something with some inline text, <span> is the way to go since it will not introduce line breaks that a <div> would.
As noted by others, there are some semantics implied with each of these, most significantly the fact that a <div> implies a logical division in the document, akin to maybe a section of a document or something, a la:
<div id="Chapter1">
<p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
<p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p>
</div>
The significance of "block element" is implied but never stated explicitly. If we ignore all the theory (theory is good) then the following is a pragmatic comparison. The following:
<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>
produces:
This paragraph has a span.
This paragraph
has
a div.
That shows that not only should a div not be used inline, it simply won't produce the desired affect.
<div> is a block-level element and <span> is an inline element.
If you wanted to do something with some inline text, <span> is the way to go since it will not introduce line breaks that a <div> would.
As noted by others, there are some semantics implied with each of these, most significantly the fact that a <div> implies a logical division in the document, akin to maybe a section of a document or something, a la:
<div id="Chapter1">
<p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
<p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p>
</div>
As mentioned in other answers, by default div will be rendered as a block element, while span will be rendered inline within its context. But neither has any semantic value; they exist to allow you to apply styling and an identity to any given bit of content. Using styles, you can make a div act like a span and vice-versa.
One of the useful styles for div is inline-block
Examples:
I have used inline-block to a great success, in game web projects.
Just wanted to add some historical context to how there came to be span vs div
History of span:
On July 3, 1995, Benjamin C. W. Sittler proposes a generic text container tag for applying styles to certain blocks of text. The rendering is neutral except if used in conjunction of a stylesheet. There is a debate around versus about readability, meaning. Bert Bos is mentioning the extensibility nature of the element through the class attribute (with values such as city, person, date, etc.). Paul Prescod is worried that both elements will be abused. He is opposed to text mentionning that "any new element should be on an old one" and adding "If we create a tag with no semantics it can be used anywehere without ever being wrong. We must force authors to properly tag the semantics of their document. We must force editor vendors to make that choice explicit in their interfaces."
From the RFC draft that introduces span:
First, a generic con- tainer is needed to carry the LANG and BIDI attributes in cases where no other element is appropriate; the SPAN ele- ment is introduced for that purpose.
History of div:
DIV elements can be used to structure HTML documents as a hierarchy of divisions.
...
CENTER was introduced by Netscape before they added support for the HTML 3.0 DIV element. It is retained in HTML 3.2 on account of its widespread deployment.
In a nutshell, both elements arose out of a need for a more semantically-generic container. Span was proposed as a more generic replacement for a <text> element to style text. Div was proposed as a generic way to divide pages and had the added benefit of replacing the <center> tag for center-aligning content. Div has always been a block element because of its history as a page divider. Span has always been an inline element because its original purpose was text styling and today div and span have both arrived at being generic elements with default block and inline display properties respectively.
It's plain and simple.
- use of
spandoes not affect the layout because it's inline(in line(one should not confuse because things could be wrapped)) - use of
divaffects the layout, the content inside appears in the new line(block element), when the element you wanna add has no special semantic meaning and you want it to appear in new line use<div>.
Remember, basically and them self doesn't perform any function either. They are not specific about functionality just by their tags.
They can only be customized with the help of CSS.
Now that coming to your question:
SPAN tag together with some styling will be useful on having hold inside a line, say in a paragraph, in the html. This is kind of line level or statement level in HTML.
Example:
<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>
DIV tag functionality as said can only be visible backed with styling, can have hold of large chunks of HTML code.
DIV is Block level
Example:
<div class="large-time">
<p>Am writing <span class="time"> this answer</span> in my free time of my day.
</p>
</div>
Both have their time and case when to be used, based on your requirement.
Hope am clear with the answer. Thank you.
Div is a block element and span is an inline element and its width depends upon the content of it self where div does not
The real important difference is already mentioned in Chris' answer. However, the implications won't be obvious for everybody.
As an inline element, <span> may only contain other inline elements. The following code is therefore wrong:
<span><p>This is a paragraph</p></span>
The above code isn't valid. To wrap block-level elements, another block-level element must be used (such as <div>). On the other hand, <div> may only be used in places where block-level elements are legal.
Furthermore, these rules are fixed in (X)HTML and they are not altered by the presence of CSS rules! So the following codes are also wrong!
<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>
As mentioned in other answers, by default div will be rendered as a block element, while span will be rendered inline within its context. But neither has any semantic value; they exist to allow you to apply styling and an identity to any given bit of content. Using styles, you can make a div act like a span and vice-versa.
One of the useful styles for div is inline-block
Examples:
I have used inline-block to a great success, in game web projects.
The real important difference is already mentioned in Chris' answer. However, the implications won't be obvious for everybody.
As an inline element, <span> may only contain other inline elements. The following code is therefore wrong:
<span><p>This is a paragraph</p></span>
The above code isn't valid. To wrap block-level elements, another block-level element must be used (such as <div>). On the other hand, <div> may only be used in places where block-level elements are legal.
Furthermore, these rules are fixed in (X)HTML and they are not altered by the presence of CSS rules! So the following codes are also wrong!
<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>
Just wanted to add some historical context to how there came to be span vs div
History of span:
On July 3, 1995, Benjamin C. W. Sittler proposes a generic text container tag for applying styles to certain blocks of text. The rendering is neutral except if used in conjunction of a stylesheet. There is a debate around versus about readability, meaning. Bert Bos is mentioning the extensibility nature of the element through the class attribute (with values such as city, person, date, etc.). Paul Prescod is worried that both elements will be abused. He is opposed to text mentionning that "any new element should be on an old one" and adding "If we create a tag with no semantics it can be used anywehere without ever being wrong. We must force authors to properly tag the semantics of their document. We must force editor vendors to make that choice explicit in their interfaces."
From the RFC draft that introduces span:
First, a generic con- tainer is needed to carry the LANG and BIDI attributes in cases where no other element is appropriate; the SPAN ele- ment is introduced for that purpose.
History of div:
DIV elements can be used to structure HTML documents as a hierarchy of divisions.
...
CENTER was introduced by Netscape before they added support for the HTML 3.0 DIV element. It is retained in HTML 3.2 on account of its widespread deployment.
In a nutshell, both elements arose out of a need for a more semantically-generic container. Span was proposed as a more generic replacement for a <text> element to style text. Div was proposed as a generic way to divide pages and had the added benefit of replacing the <center> tag for center-aligning content. Div has always been a block element because of its history as a page divider. Span has always been an inline element because its original purpose was text styling and today div and span have both arrived at being generic elements with default block and inline display properties respectively.
Just for the sake of completeness, I invite you to think about it like this:
- There are lots of block elements (linebreaks before and after) defined in HTML, and lots of inline tags (no linebreaks).
- But in modern HTML all elements are supposed to have meanings: a
<p>is a paragraph, an<li>is a list item, etc., and we're supposed to use the right tag for the right purpose -- not like in the old days when we indented using<blockquote>whether the content was a quote or not. - So, what do you do when there is no meaning to the thing you're trying to do? There's no meaning to a 400px-wide column, is there? You just want your column of text to be 400px wide because that suits your design.
- For this reason, they added two more elements to HTML: the generic, or meaningless elements
<div>and<span>, because otherwise, people would go back to abusing the elements which do have meanings.
The real important difference is already mentioned in Chris' answer. However, the implications won't be obvious for everybody.
As an inline element, <span> may only contain other inline elements. The following code is therefore wrong:
<span><p>This is a paragraph</p></span>
The above code isn't valid. To wrap block-level elements, another block-level element must be used (such as <div>). On the other hand, <div> may only be used in places where block-level elements are legal.
Furthermore, these rules are fixed in (X)HTML and they are not altered by the presence of CSS rules! So the following codes are also wrong!
<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>
In HTML there are tags that add structure or semantics to content. For example the <p> tag is used to identify a paragraph. Another example is the <ol> tag for an ordered list.
When there is no suitable tag available in HTML as shown above, the <div> and <span> tags are usually resorted to.
The <div> tag is used to identify a blocklevel section/division of a document that has a line break both before and after it.
Examples of where div tags can be used are headers, footers, navigations etc. However in HTML 5 these tags have already been provided.
The <span> tag is used to identify an inline section/division of a document.
For example a span tag can be used to add inline pictographs to an element.
There are already good, detailed answers here, but no visual examples, so here's a quick illustration:
<div>This is a div.</div>_x000D_
<div>This is a div.</div>_x000D_
<div>This is a div.</div>_x000D_
<span>This is a span.</span>_x000D_
<span>This is a span.</span>_x000D_
<span>This is a span.</span><div> is a block tag, while <span> is an inline tag.
The real important difference is already mentioned in Chris' answer. However, the implications won't be obvious for everybody.
As an inline element, <span> may only contain other inline elements. The following code is therefore wrong:
<span><p>This is a paragraph</p></span>
The above code isn't valid. To wrap block-level elements, another block-level element must be used (such as <div>). On the other hand, <div> may only be used in places where block-level elements are legal.
Furthermore, these rules are fixed in (X)HTML and they are not altered by the presence of CSS rules! So the following codes are also wrong!
<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>
As mentioned in other answers, by default div will be rendered as a block element, while span will be rendered inline within its context. But neither has any semantic value; they exist to allow you to apply styling and an identity to any given bit of content. Using styles, you can make a div act like a span and vice-versa.
One of the useful styles for div is inline-block
Examples:
I have used inline-block to a great success, in game web projects.
Div is a block element and span is an inline element and its width depends upon the content of it self where div does not
<div> is a block-level element and <span> is an inline element.
If you wanted to do something with some inline text, <span> is the way to go since it will not introduce line breaks that a <div> would.
As noted by others, there are some semantics implied with each of these, most significantly the fact that a <div> implies a logical division in the document, akin to maybe a section of a document or something, a la:
<div id="Chapter1">
<p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
<p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p>
</div>
It's plain and simple.
- use of
spandoes not affect the layout because it's inline(in line(one should not confuse because things could be wrapped)) - use of
divaffects the layout, the content inside appears in the new line(block element), when the element you wanna add has no special semantic meaning and you want it to appear in new line use<div>.
Source: Stackoverflow.com