تفاوت میانو

یک تفاوت گیج کننده (عدم وجود) در استاندارد HTML5 وجود دارد،بین <article> <section> و <div>.

در استاندارد HTML5، عنصر <section> به عنوان بلوکی از عناصر مرتبط تعریف شده است.p>

عنصر <article> به عنوان یک بلوک کامل و مستقل از عناصر مرتبط تعریف می‌شود.

کلاس <div> به عنوان بلوکی از عناصر فرزند تعریف شده است.

چگونه آن را تفسیر کنیم؟

در مثال بالا، مااز <section> به عنوان ظرفی برای <article> مرتبط استفاده کرده اند.

اما، می‌توانستیم از <article> به‌عنوان محفظه‌ای برای مقالات نیز استفاده کنیم.

در اینجا چند مثال مختلف وجود دارد:


<article> in <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>



<div> in <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>



<div> in <section> in <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>