What is the difference between and

Question

What is the difference between <section> and <div> in HTML? Aren't we defining sections in both cases?

Answer 1

Here is a tip on how I distinguish couple of recent html5 elements in the case of a web application (purely subjective).

<section> marks a widget in a graphical user interface, whereas <div> is the container of the components of a widget like a container holding a button, and a label etc.

<article> groups widgets that share a purpose.

<header> is title and menubar.

<footer> is the statusbar.

Answer 2

<section> marks up a section, <div> marks up a generic block with no associated semantics.

Answer 3

The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.

whereas:

The <div> tag defines a division or a section in an HTML document.

The <div> tag is used to group block-elements to format them with CSS.

Answer 4

<section> 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.

<div>, on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes.

So no: using a <div> does not define a section in HTML.

From the spec:

<section>

The <section> 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 <section> 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 <section> 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 <div> element instead. A general rule is that the <section> 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)

<div>

The <div> 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 <div> element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the <div> element leads to better accessibility for readers and easier maintainability for authors.

(https://www.w3.org/TR/html/grouping-content.html#the-div-element)

Answer 5

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.

<section>
  <h1>Level1</h1>
  some text
  <section>
    <h1>Level2</h1>
    some more text
  </section>
</section>

-- 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.

Answer 6

<div>—the generic flow container we all know and love. It’s a block-level element with no additional semantic meaning (W3C:Markup, WhatWG)

<section>—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.