یک تفاوت گیج کننده (عدم وجود) در استاندارد HTML5 وجود دارد،بین <article> <section> و <div>.
در استاندارد HTML5، عنصر <section> به عنوان بلوکی از عناصر مرتبط تعریف شده است.p>
عنصر <article> به عنوان یک بلوک کامل و مستقل از عناصر مرتبط تعریف میشود.
کلاس <div> به عنوان بلوکی از عناصر فرزند تعریف شده است.
چگونه آن را تفسیر کنیم؟
در مثال بالا، مااز <section> به عنوان ظرفی برای <article> مرتبط استفاده کرده اند.
اما، میتوانستیم از <article> بهعنوان محفظهای برای مقالات نیز استفاده کنیم.
در اینجا چند مثال مختلف وجود دارد:
<article>
<h2>Famous Cities</h2>
<article>
<h2>London</h2>
<p>London is the capital city of England.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</article>
</article>
<article>
<h2>Famous Cities</h2>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</article>
<article>
<section>
<h2>Famous Cities</h2>
<div class="city">
<h2>London</h2>
<p>London is the capital city
of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</section>
<section>
<h2>Famous Countries</h2>
<div class="country">
<h2>England</h2>
<p>London is the capital city of England.</p>
</div>
<div class="country">
<h2>France</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="country">
<h2>Japan</h2>
<p>Tokyo is the capital of
Japan.</p>
</div>
</section>
</article>