What is the difference between section and div

Question

What is the difference between  lt section gt  and  lt div gt  in HTML  Aren t we defining sections in both cases

User · Answer

The section tag provides a more semantic syntax for html  div is a generic tag for a section  When you use section tag for appropriate content  it can be used for search engine optimization also  section tag also makes it easy for html parsing  for more info  refer  http   blog whatwg org is-not-just-a-semantic

User · Answer

lt section gt  marks up a section   lt div gt  marks up a generic block with no associated semantics

User · Answer

Take caution not to overuse the section tag as a replacement for a div element   A section tag should define a significant region within the context of the body   Semantically  HTML5 encourages us to define our document as follows    x000D   x000D   lt html gt  x000D   lt head gt  lt  head gt  x000D   lt body gt  x000D       lt header gt  lt  header gt  x000D       lt section gt  x000D           lt h1 gt  lt  h1 gt  x000D           lt div gt  x000D               lt span gt  lt  span gt  x000D           lt  div gt  x000D           lt div gt  lt  div gt  x000D       lt  section gt  x000D       lt footer gt  lt  footer gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    This strategy allows web robots and automated screen readers to better understand the flow of your content   This markup clearly defines where your major page content is contained   Of course  headers and footers are often common across hundreds if not thousands of pages within a website   The section tag should be limited to explain where the unique content is contained   Within the section tag  we should then continue to markup and control the content with HTML tags which are lower in the hierarchy  like h1  div  span  etc   In most simple pages  there should only be a single section tag  not multiple ones   Please also consider also that there are other interesting HTML5 tags which are similar to section   Consider using article  summary  aside and others within your document flow   As you can see  these tags further enhance our ability to define the major regions of the HTML document

User · Answer

In the HTML5 standard  the  lt section gt  element is defined as a block of related elements   The  lt div gt  element is defined as a block of children elements

User · Answer

lt section gt  lt  section gt      The HTML  lt section gt  element represents a generic section of a   document  i e   a thematic grouping of content  typically with a   heading  Each  lt section gt  should be identified  typically by including   a heading   lt h1 gt - lt h6 gt  element  as a child of the  lt section gt    element  For Details Please following link    References     http   www w3schools com tags tag section asp https   developer mozilla org en docs Web HTML Element section      lt div gt  lt  div gt      The HTML  lt div gt  element  or HTML Document Division Element  is the   generic container for flow content  which does not inherently   represent anything  It can be used to group elements for styling   purposes  using the class or id attributes   or because they share   attribute values  such as lang  It should be used only when no other   semantic element  such as  lt article gt  or  lt nav gt   is appropriate    References   - http   www w3schools com tags tag div asp - https   developer mozilla org en docs Web HTML Element div    Here are some links that discuss more about the differences between them    http   html5doctor com avoiding-common-html5-mistakes  https   teamtreehouse com community use-div-or-section-element http   webdesign about com od html5tags fl div-vs-section htm

User · Answer

lt section gt  means that the content inside is grouped  i e  relates to a single theme   and should appear as an entry in an outline of the page   lt div gt   on the other hand  does not convey any meaning  aside from any found in its class  lang and title attributes  So no  using a  lt div gt  does not define a section in HTML  From the spec   lt section gt   The  lt section gt  element represents a generic section of a document or application  A section  in this context  is a thematic grouping of content  Each section should be identified  typically by including a heading  h1-h6 element  as a child of the  lt section gt  element  Examples of sections would be chapters  the various tabbed pages in a tabbed dialog box  or the numbered sections of a thesis  A Web site   s home page could be split into sections for an introduction  news items  and contact information      The  lt section gt  element is not a generic container element  When an element is needed only for styling purposes or as a convenience for scripting  authors are encouraged to use the  lt div gt  element instead  A general rule is that the  lt section gt  element is appropriate only if the element   s contents would be listed explicitly in the document   s outline    https   www w3 org TR html sections html the-section-element   lt div gt   The  lt div gt  element has no special meaning at all  It represents its children  It can be used with the class  lang  and title attributes to mark up semantics common to a group of consecutive elements  Note  Authors are strongly encouraged to view the  lt div gt  element as an element of last resort  for when no other element is suitable  Use of more appropriate elements instead of the  lt div gt  element leads to better accessibility for readers and easier maintainability for authors    https   www w3 org TR html grouping-content html the-div-element

User · Answer

Just an observation - haven t found any documentation corroborating this  If a section contains another section  a h1-header in the inner section is displayed in a smaller font than a h1- header in outer section  When using div instead of section the inner div h1-header is diplayed as h1    lt section gt     lt h1 gt Level1 lt  h1 gt    some text    lt section gt       lt h1 gt Level2 lt  h1 gt      some more text    lt  section gt   lt  section gt    -- the Level2 - header is displayed in a smaller font than the Level1 - header   When using css to color h1 header  the inner h1 were also colored  behaves as regular h1   It s the same behaviour in Firefox 18  IE 10 and Chrome 28

User · Answer

lt div gt    the generic flow container we all know and love  It   s a block-level element with no additional semantic meaning  W3C Markup  WhatWG    lt section gt    a generic document or application section  A  normally has a heading  title  and maybe a footer too  It   s a chunk of related content  like a subsection of a long article  a major part of the page  eg the news section on the homepage   or a page in a webapp   s tabbed interface   W3C Markup  WhatWG   My suggestion   div  used lower version  i think 4 01 to still  html element lot of designers handled that   section  recently comming  html5  html element

User · Answer

lt div gt  Vs  lt Section gt   Round 1   lt div gt   The HTML  element  or HTML Document Division Element  is the generic container for flow content  which does not inherently represent anything  It can be used to group elements for styling purposes  using the class or id attributes   or because they share attribute values  such as lang  It should be used only when no other semantic element  such as  lt article gt  or  lt nav gt   is appropriate    lt section gt   The HTML Section element   lt section gt   represents a generic section of a document  i e   a thematic grouping of content  typically with a heading     Round 2   lt div gt   Browser Support    lt section gt   Browser Support  The numbers in the table specifies the first browser version that fully supports the element    In that vein  a div is relevant only from a pure CSS or DOM perspective  whereas a section is relevant also for semantics and  in a near future  for indexing by search engines

User · Answer

Using  lt section gt  may be neater  help screen readers and SEO while  lt div gt  is smaller in bytes and quicker to type  Overall very little difference   Also  would not recommend putting  lt section gt  in a  lt section gt   instead place a  lt div gt  inside a  lt section gt

User · Answer

The  lt section gt  tag defines sections in a document  such as chapters  headers  footers  or any other sections of the document   whereas   The  lt div gt  tag defines a division or a section in an HTML document   The  lt div gt  tag is used to group block-elements to format them with CSS

User · Answer

Here is a tip on how I distinguish couple of recent html5 elements in the case of a web application  purely subjective      lt section gt  marks a widget in a graphical user interface  whereas  lt div gt  is the container of the components of a widget like a container holding a button  and a label etc    lt article gt  groups widgets that share a purpose    lt header gt  is title and menubar    lt footer gt  is the statusbar

[html] What is the difference between <section> and <div>?

Examples related to html