What is the difference between HTML tags div and span

Question

I would like to ask for some simple examples showing the uses of  lt div gt  and  lt span gt     I ve seen them both used to mark a section of a page with an id or class  but I m interested in knowing if there are times when one is preferred over the other

User · Answer

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>

User · Answer

In HTML there are tags that add structure or semantics to content  For example the  lt p gt  tag is used to identify a paragraph  Another example is the  lt ol gt  tag for an ordered list   When there is no suitable tag available in HTML as shown above  the  lt div gt  and  lt span gt  tags are usually resorted to   The  lt div gt  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  lt span gt  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

User · Answer

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    http   dustwell com div-span-inline-block html CSS display  inline vs inline-block   I have used inline-block to a great success  in game web projects

User · Answer

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    http   dustwell com div-span-inline-block html CSS display  inline vs inline-block   I have used inline-block to a great success  in game web projects

User · Answer

It s plain and simple    use of span does not affect the layout because it s inline in line  one should not confuse because things could be wrapped   use of div affects 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  lt div gt

User · Answer

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

User · Answer

div is a block element span is an inline element    This means that to use them semantically  divs should be used to wrap sections of a document  while spans should be used to wrap small portions of text  images  etc   For example    lt div gt This a large main division  with  lt span gt a small bit lt  span gt  of spanned text  lt  div gt    Note that it is illegal to place a block-level element within an inline element  so    lt div gt Some  lt span gt text that  lt div gt I want lt  div gt  to mark lt  span gt  up lt  div gt       is illegal     EDIT  As of HTML5  some block elements can be placed inside of some inline elements  See the MDN reference here for a pretty clear listing  The above is still illegal  as  lt span gt  only accepts phrasing content  and  lt div gt  is flow content     You asked for some concrete examples  so is one taken from my bowling website  BowlSK    x000D   x000D   lt div id  header  gt  x000D     lt div id  userbar  gt  x000D      Hi there   lt span class  username  gt Chris Marasti-Georg lt  span gt    x000D       lt a href   edit-profile html  gt Profile lt  a gt    x000D       lt a href  https   www bowlsk com  ah logout      gt Sign out lt  a gt  x000D     lt  div gt  x000D     lt h1 gt  lt a href     gt Bowl lt span class  sk  gt SK lt  span gt  lt  a gt  lt  h1 gt  x000D   lt  div gt  x000D   x000D   x000D    Ok  what s going on   At the top of my page  I have a logical section  the  header    Since this is a section  I use a div  with an appropriate id    Within that  I have a couple of sections  the user bar and the actual page title  The title uses the appropriate tag  h1   The userbar  being a section  is wrapped in a div   Within that  the username is wrapped in a span  so that I can change the style   As you can see  I have also wrapped a span around 2 letters in the title - this allows me to change their color in my stylesheet   Also note that HTML5 includes a broad new set of elements that define common page structures  such as article  section  nav  etc     Section 4 4 of the HTML 5 working draft lists them and gives hints as to their usage   HTML5 is still a working spec  so nothing is  final  yet  but it is highly doubtful that any of these elements are going anywhere   There is a javascript hack that you will need to use if you want to style these elements in some older version of IE - You need to create one of each element using document createElement before any of those elements are specified in your source  There are a bunch of libraries that will take care of this for you - a quick Google search turned up html5shiv

User · Answer

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>

User · Answer

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>

User · Answer

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

User · Answer

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>

User · Answer

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

User · Answer

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    http   dustwell com div-span-inline-block html CSS display  inline vs inline-block   I have used inline-block to a great success  in game web projects

User · Answer

div is a block element span is an inline element    This means that to use them semantically  divs should be used to wrap sections of a document  while spans should be used to wrap small portions of text  images  etc   For example    lt div gt This a large main division  with  lt span gt a small bit lt  span gt  of spanned text  lt  div gt    Note that it is illegal to place a block-level element within an inline element  so    lt div gt Some  lt span gt text that  lt div gt I want lt  div gt  to mark lt  span gt  up lt  div gt       is illegal     EDIT  As of HTML5  some block elements can be placed inside of some inline elements  See the MDN reference here for a pretty clear listing  The above is still illegal  as  lt span gt  only accepts phrasing content  and  lt div gt  is flow content     You asked for some concrete examples  so is one taken from my bowling website  BowlSK    x000D   x000D   lt div id  header  gt  x000D     lt div id  userbar  gt  x000D      Hi there   lt span class  username  gt Chris Marasti-Georg lt  span gt    x000D       lt a href   edit-profile html  gt Profile lt  a gt    x000D       lt a href  https   www bowlsk com  ah logout      gt Sign out lt  a gt  x000D     lt  div gt  x000D     lt h1 gt  lt a href     gt Bowl lt span class  sk  gt SK lt  span gt  lt  a gt  lt  h1 gt  x000D   lt  div gt  x000D   x000D   x000D    Ok  what s going on   At the top of my page  I have a logical section  the  header    Since this is a section  I use a div  with an appropriate id    Within that  I have a couple of sections  the user bar and the actual page title  The title uses the appropriate tag  h1   The userbar  being a section  is wrapped in a div   Within that  the username is wrapped in a span  so that I can change the style   As you can see  I have also wrapped a span around 2 letters in the title - this allows me to change their color in my stylesheet   Also note that HTML5 includes a broad new set of elements that define common page structures  such as article  section  nav  etc     Section 4 4 of the HTML 5 working draft lists them and gives hints as to their usage   HTML5 is still a working spec  so nothing is  final  yet  but it is highly doubtful that any of these elements are going anywhere   There is a javascript hack that you will need to use if you want to style these elements in some older version of IE - You need to create one of each element using document createElement before any of those elements are specified in your source  There are a bunch of libraries that will take care of this for you - a quick Google search turned up html5shiv

User · Answer

lt div gt  is a block-level element and  lt span gt  is an inline element    If you wanted to do something with some inline text   lt span gt  is the way to go since it will not introduce line breaks that a  lt div gt  would     As noted by others  there are some semantics implied with each of these  most significantly the fact that a  lt div gt  implies a logical division in the document  akin to maybe a section of a document or something  a la    lt div id  Chapter1  gt      lt p gt Lorem ipsum dolor sit amet   lt span id  SomeSpecialText1  gt consectetuer adipiscing lt  span gt  elit  Duis congue vehicula purus  lt  p gt      lt p gt Nam  lt span id  SomeSpecialText2  gt eget magna nec lt  span gt  sapien fringilla euismod  Donec hendrerit  lt  p gt    lt  div gt

User · Answer

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

User · Answer

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    lt p gt Am writing lt span class  time  gt this answer lt  span gt  in my free time of my day  lt  p gt    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        lt div class  large-time  gt       lt p gt Am writing  lt span class  time  gt  this answer lt  span gt  in my free time of my day        lt  p gt       lt  div gt    Both have their time and case when to be used  based on your requirement   Hope am clear with the answer  Thank you

User · Answer

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    lt p gt This paragraph  lt span gt has lt  span gt  a span  lt  p gt   lt p gt This paragraph  lt div gt has lt  div gt  a div  lt  p gt    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

User · Answer

lt div gt  is a block-level element and  lt span gt  is an inline element    If you wanted to do something with some inline text   lt span gt  is the way to go since it will not introduce line breaks that a  lt div gt  would     As noted by others  there are some semantics implied with each of these  most significantly the fact that a  lt div gt  implies a logical division in the document  akin to maybe a section of a document or something  a la    lt div id  Chapter1  gt      lt p gt Lorem ipsum dolor sit amet   lt span id  SomeSpecialText1  gt consectetuer adipiscing lt  span gt  elit  Duis congue vehicula purus  lt  p gt      lt p gt Nam  lt span id  SomeSpecialText2  gt eget magna nec lt  span gt  sapien fringilla euismod  Donec hendrerit  lt  p gt    lt  div gt

User · Answer

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

User · Answer

It s plain and simple    use of span does not affect the layout because it s inline in line  one should not confuse because things could be wrapped   use of div affects 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  lt div gt

User · Answer

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    lt p gt Am writing lt span class  time  gt this answer lt  span gt  in my free time of my day  lt  p gt    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        lt div class  large-time  gt       lt p gt Am writing  lt span class  time  gt  this answer lt  span gt  in my free time of my day        lt  p gt       lt  div gt    Both have their time and case when to be used  based on your requirement   Hope am clear with the answer  Thank you

User · Answer

In HTML there are tags that add structure or semantics to content  For example the  lt p gt  tag is used to identify a paragraph  Another example is the  lt ol gt  tag for an ordered list   When there is no suitable tag available in HTML as shown above  the  lt div gt  and  lt span gt  tags are usually resorted to   The  lt div gt  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  lt span gt  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

User · Answer

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     - Source  w3 wiki   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    - Source  IETF Draft   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    HTML 3 2 Spec  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  lt text gt  element to style text   Div was proposed as a generic way to divide pages and had the added benefit of replacing the  lt center gt  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

User · Answer

lt div gt  is a block-level element and  lt span gt  is an inline element    If you wanted to do something with some inline text   lt span gt  is the way to go since it will not introduce line breaks that a  lt div gt  would     As noted by others  there are some semantics implied with each of these  most significantly the fact that a  lt div gt  implies a logical division in the document  akin to maybe a section of a document or something  a la    lt div id  Chapter1  gt      lt p gt Lorem ipsum dolor sit amet   lt span id  SomeSpecialText1  gt consectetuer adipiscing lt  span gt  elit  Duis congue vehicula purus  lt  p gt      lt p gt Nam  lt span id  SomeSpecialText2  gt eget magna nec lt  span gt  sapien fringilla euismod  Donec hendrerit  lt  p gt    lt  div gt

User · Answer

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

User · Answer

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    http   dustwell com div-span-inline-block html CSS display  inline vs inline-block   I have used inline-block to a great success  in game web projects

User · Answer

div is a block element span is an inline element    This means that to use them semantically  divs should be used to wrap sections of a document  while spans should be used to wrap small portions of text  images  etc   For example    lt div gt This a large main division  with  lt span gt a small bit lt  span gt  of spanned text  lt  div gt    Note that it is illegal to place a block-level element within an inline element  so    lt div gt Some  lt span gt text that  lt div gt I want lt  div gt  to mark lt  span gt  up lt  div gt       is illegal     EDIT  As of HTML5  some block elements can be placed inside of some inline elements  See the MDN reference here for a pretty clear listing  The above is still illegal  as  lt span gt  only accepts phrasing content  and  lt div gt  is flow content     You asked for some concrete examples  so is one taken from my bowling website  BowlSK    x000D   x000D   lt div id  header  gt  x000D     lt div id  userbar  gt  x000D      Hi there   lt span class  username  gt Chris Marasti-Georg lt  span gt    x000D       lt a href   edit-profile html  gt Profile lt  a gt    x000D       lt a href  https   www bowlsk com  ah logout      gt Sign out lt  a gt  x000D     lt  div gt  x000D     lt h1 gt  lt a href     gt Bowl lt span class  sk  gt SK lt  span gt  lt  a gt  lt  h1 gt  x000D   lt  div gt  x000D   x000D   x000D    Ok  what s going on   At the top of my page  I have a logical section  the  header    Since this is a section  I use a div  with an appropriate id    Within that  I have a couple of sections  the user bar and the actual page title  The title uses the appropriate tag  h1   The userbar  being a section  is wrapped in a div   Within that  the username is wrapped in a span  so that I can change the style   As you can see  I have also wrapped a span around 2 letters in the title - this allows me to change their color in my stylesheet   Also note that HTML5 includes a broad new set of elements that define common page structures  such as article  section  nav  etc     Section 4 4 of the HTML 5 working draft lists them and gives hints as to their usage   HTML5 is still a working spec  so nothing is  final  yet  but it is highly doubtful that any of these elements are going anywhere   There is a javascript hack that you will need to use if you want to style these elements in some older version of IE - You need to create one of each element using document createElement before any of those elements are specified in your source  There are a bunch of libraries that will take care of this for you - a quick Google search turned up html5shiv

User · Answer

lt div gt  is a block-level element and  lt span gt  is an inline element    If you wanted to do something with some inline text   lt span gt  is the way to go since it will not introduce line breaks that a  lt div gt  would     As noted by others  there are some semantics implied with each of these  most significantly the fact that a  lt div gt  implies a logical division in the document  akin to maybe a section of a document or something  a la    lt div id  Chapter1  gt      lt p gt Lorem ipsum dolor sit amet   lt span id  SomeSpecialText1  gt consectetuer adipiscing lt  span gt  elit  Duis congue vehicula purus  lt  p gt      lt p gt Nam  lt span id  SomeSpecialText2  gt eget magna nec lt  span gt  sapien fringilla euismod  Donec hendrerit  lt  p gt    lt  div gt

User · Answer

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  lt p gt  is a paragraph  an  lt li gt  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  lt blockquote gt  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  lt div gt  and  lt span gt   because otherwise  people would go back to abusing the elements which do have meanings

User · Answer

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     - Source  w3 wiki   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    - Source  IETF Draft   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    HTML 3 2 Spec  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  lt text gt  element to style text   Div was proposed as a generic way to divide pages and had the added benefit of replacing the  lt center gt  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

User · Answer

There are already good  detailed answers here  but no visual examples  so here s a quick illustration      x000D   x000D   lt div gt This is a div  lt  div gt  x000D   lt div gt This is a div  lt  div gt  x000D   lt div gt This is a div  lt  div gt  x000D   lt span gt This is a span  lt  span gt  x000D   lt span gt This is a span  lt  span gt  x000D   lt span gt This is a span  lt  span gt  x000D   x000D   x000D     lt div gt  is a block tag  while  lt span gt  is an inline tag

User · Answer

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    lt p gt This paragraph  lt span gt has lt  span gt  a span  lt  p gt   lt p gt This paragraph  lt div gt has lt  div gt  a div  lt  p gt    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

User · Answer

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  lt p gt  is a paragraph  an  lt li gt  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  lt blockquote gt  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  lt div gt  and  lt span gt   because otherwise  people would go back to abusing the elements which do have meanings

User · Answer

div is a block element span is an inline element    This means that to use them semantically  divs should be used to wrap sections of a document  while spans should be used to wrap small portions of text  images  etc   For example    lt div gt This a large main division  with  lt span gt a small bit lt  span gt  of spanned text  lt  div gt    Note that it is illegal to place a block-level element within an inline element  so    lt div gt Some  lt span gt text that  lt div gt I want lt  div gt  to mark lt  span gt  up lt  div gt       is illegal     EDIT  As of HTML5  some block elements can be placed inside of some inline elements  See the MDN reference here for a pretty clear listing  The above is still illegal  as  lt span gt  only accepts phrasing content  and  lt div gt  is flow content     You asked for some concrete examples  so is one taken from my bowling website  BowlSK    x000D   x000D   lt div id  header  gt  x000D     lt div id  userbar  gt  x000D      Hi there   lt span class  username  gt Chris Marasti-Georg lt  span gt    x000D       lt a href   edit-profile html  gt Profile lt  a gt    x000D       lt a href  https   www bowlsk com  ah logout      gt Sign out lt  a gt  x000D     lt  div gt  x000D     lt h1 gt  lt a href     gt Bowl lt span class  sk  gt SK lt  span gt  lt  a gt  lt  h1 gt  x000D   lt  div gt  x000D   x000D   x000D    Ok  what s going on   At the top of my page  I have a logical section  the  header    Since this is a section  I use a div  with an appropriate id    Within that  I have a couple of sections  the user bar and the actual page title  The title uses the appropriate tag  h1   The userbar  being a section  is wrapped in a div   Within that  the username is wrapped in a span  so that I can change the style   As you can see  I have also wrapped a span around 2 letters in the title - this allows me to change their color in my stylesheet   Also note that HTML5 includes a broad new set of elements that define common page structures  such as article  section  nav  etc     Section 4 4 of the HTML 5 working draft lists them and gives hints as to their usage   HTML5 is still a working spec  so nothing is  final  yet  but it is highly doubtful that any of these elements are going anywhere   There is a javascript hack that you will need to use if you want to style these elements in some older version of IE - You need to create one of each element using document createElement before any of those elements are specified in your source  There are a bunch of libraries that will take care of this for you - a quick Google search turned up html5shiv

User · Answer

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  lt p gt  is a paragraph  an  lt li gt  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  lt blockquote gt  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  lt div gt  and  lt span gt   because otherwise  people would go back to abusing the elements which do have meanings

User · Answer

There are already good  detailed answers here  but no visual examples  so here s a quick illustration      x000D   x000D   lt div gt This is a div  lt  div gt  x000D   lt div gt This is a div  lt  div gt  x000D   lt div gt This is a div  lt  div gt  x000D   lt span gt This is a span  lt  span gt  x000D   lt span gt This is a span  lt  span gt  x000D   lt span gt This is a span  lt  span gt  x000D   x000D   x000D     lt div gt  is a block tag  while  lt span gt  is an inline tag

User · Answer

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  lt p gt  is a paragraph  an  lt li gt  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  lt blockquote gt  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  lt div gt  and  lt span gt   because otherwise  people would go back to abusing the elements which do have meanings

[html] What is the difference between HTML tags <div> and <span>?

Examples related to html

Examples related to tags