HTML5 Migrare. Diferența dintre article, section și div.

Diferența dintre <article> <section> și <div>

Există o diferență confuză (lipsa) în standardul HTML5, între <article> <section> și <div>.
În standardul HTML5, elementul <secțiune> este definit ca un bloc de elemente conexe.
Elementul <article> este definit ca un bloc complet, de sine stătător, al elementelor conexe.
Elementul <div> este definit ca un bloc de elemente pentru copii.

Cum să interpretezi asta?

În exemplul de mai sus, am folosit <section> ca container pentru <article> aferent.
Dar, am fi putut folosi <article> ca și container pentru articole.

Iată câteva exemple diferite:

<article> în <article>:

<article>

<h2>Orașe celebre</h2>

<article>
  <h2>Londra</h2>
  <p>Londra este capitala Angliei.</p>
</article>

<article>
  <h2>Paris</h2>
  <p>Paris este capitala și cel mai populat oraș al Franței.</p>
</article>

<article>
  <h2>Tokyo</h2>
  <p>Tokyo este capitala Japoniei.</p>
</article>

</article>

<div> în <article>:

<article>

<h2>Orașe celebre</h2>

<div class="city">
  <h2>Londra</h2>
  <p>Londra este capitala Angliei.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris este capitala și cel mai populat oraș al Franței.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo este capitala Japoniei. </p>
</div>

</article>

<div> în <section> în <article>:

<article>

<section>
  <h2>Orașe celebre</h2>

  <div class="city">
    <h2>Londra</h2>
    <p>Londra este capitala Angliei.</p>
  </div>

  <div class="city">
    <h2>Paris</h2>
    <p>Paris este capitala și cel mai populat oraș al Franței.</p>
  </div>

  <div class="city">
    <h2>Tokyo</h2>
    <p>Tokyo este capitala Japoniei.</p>
  </div>
</section>

<section>
  <h2>Țări celebre</h2>

  <div class="country">
    <h2>Anglia</h2>
    <p>Londra este capitala Angliei.</p>
</div>

  <div class="country">
    <h2>Franța</h2>
    <p>Paris este capitala și cel mai populat oraș al Franței.</p>
</div>

  <div class="country">
    <h2>Japonia </h2>
    <p>Tokyo este capitala Japoniei.</p>
  </div>
</section>

</article>