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

Using <section> may be neater, help screen readers and SEO while <div> is smaller in bytes and quicker to type

Overall very little difference.

Also, would not recommend putting <section> in a <section>, instead place a <div> inside a <section>

Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer. So <div> was used to define different parts of a web page in html4 but <div> doesn't mean anything particular therefore html5 introduced many semantic elements <section> is one of them which give enough information to screen readers, search engines and browsers etc, to identify the different part of websites.

the main difference is if you use only <div> to define website parts. it's less readable.

if you use semantic elements instead of div tag. they can help to improve readability of your website not only to humans for other programs(screen reader, search engine etc) also. we still can use <div> inside semantic elements as a container.

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.