Quando devo usar section e quando devo usar div?

Uma <section> é um agrupamento temático de conteúdos.

<section>
  <p>Histórias novas</p>
  <section>
    <p>Notícias</p>
    <article>História 1</article>
    <article>História 2</article>
    <article>História 3</article>
  </section>
  <section>
    <p>Esportes</p>
    <article>História 1</article>
    <article>História 2</article>
    <article>História 3</article>
  </section>
</section>

Ou ainda:

<section>
  <h1>Introdução</h1>
  <p>Texto de introdução</p>
</section>
<section>
  <h1>Corpo</h1>
  <p>Texto principal do artigo</p>
</section>
<section>
  <h1>Conclusão</h1>
  <p>Texto de conclusão</p>
</section>

Na prática, você vai agregar conteúdo de uma forma lógica. Ao usar <section>, você deixa seu texto mais semântico, facilitando a anexação do seu conteúdo nos indexadores de pesquisa. A ideia é dar sentido para diferentes regiões do seu documento HTML.

Quando você envolve um texto/conteúdo com uma <div>, não quer dizer nada semanticamente. Esse conteúdo não terá relação entre eles. Quando você usa <div>, normalmente é quando se quer aplicar algum efeito visual no CSS.

Uma analogia que pode te ajudar a entender é, por exemplo, uma loja que tem seção de roupas masculina, feminina e infantil. Ao envolver um conteúdo com <section>, é basicamente isso que você está fazendo, delimitando uma seção masculina onde todas as peças/parágrafos estão relacionadas. E isso não deve ser feito por uma <div>

Esse video pode te ajudar a entender melhor.