HTML5 Migrare. Diferența dintre article, section și div.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
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>