What is the difference between <section> and <div>?

Solution 1:

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

Solution 2:

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

Solution 3:

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.