Google Ads

Learn The Difference Between article section and div – HTML5 Migration – HTML Code


The Difference Between <article> <section> and <div>

 

There is a confusing (lack of) difference in the HTML5 standard, between <article> <section> and <div>.

In the HTML5 standard, the <section> element is defined as a block of related elements.

The <article> element is defined as a complete, self-contained block of related elements.

The <div> element is defined as a block of children elements.

How to interpret that?

In the example above, we have used <section> as a container for related <articles>.

But, we could have used <article> as a container for articles as well.

Here are some different examples:

 

<article> in <article>:

Code:
 
  1. <article>
  2. <h2>Famous Cities</h2>
  3. <article>
  4. <h2>London</h2>
  5. <p>London is the capital city of England. It is the most populous city in the United Kingdom,
  6. with a metropolitan area of over 13 million inhabitants.</p>
  7. </article>
  8. <article>
  9. <h2>Paris</h2>
  10. <p>Paris is the capital and most populous city of France.</p>
  11. </article>
  12. <article>
  13. <h2>Tokyo</h2>
  14. <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
  15. and the most populous metropolitan area in the world.</p>
  16. </article>
  17. </article>

 

Try Your Self ->

 

<div> in <article>:

Code:
 
  1. <article>
  2. <h2>Famous Cities</h2>
  3. <div class="city">
  4. <h2>London</h2>
  5. <p>London is the capital city of England. It is the most populous city in the United Kingdom,
  6. with a metropolitan area of over 13 million inhabitants.</p>
  7. </div>
  8. <div class="city">
  9. <h2>Paris</h2>
  10. <p>Paris is the capital and most populous city of France.</p>
  11. </div>
  12. <div class="city">
  13. <h2>Tokyo</h2>
  14. <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
  15. and the most populous metropolitan area in the world.</p>
  16. </div>
  17. </article>

 

Try Your Self ->

 

<div> in <section> in <article>:

Code:
 
  1. <article>
  2. <section>
  3. <h2>Famous Cities</h2>
  4. <div class="city">
  5. <h2>London</h2>
  6. <p>London is the capital city of England. It is the most populous city in the United Kingdom,
  7. with a metropolitan area of over 13 million inhabitants.</p>
  8. </div>
  9. <div class="city">
  10. <h2>Paris</h2>
  11. <p>Paris is the capital and most populous city of France.</p>
  12. </div>
  13. <div class="city">
  14. <h2>Tokyo</h2>
  15. <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
  16. and the most populous metropolitan area in the world.</p>
  17. </div>
  18. </section>
  19. <section>
  20. <h2>Famous Countries</h2>
  21. <div class="country">
  22. <h2>England</h2>
  23. <p>London is the capital city of England. It is the most populous city in the United Kingdom,
  24. with a metropolitan area of over 13 million inhabitants.</p>
  25. </div>
  26. <div class="country">
  27. <h2>France</h2>
  28. <p>Paris is the capital and most populous city of France.</p>
  29. </div>
  30. <div class="country">
  31. <h2>Japan</h2>
  32. <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
  33. and the most populous metropolitan area in the world.</p>
  34. </div>
  35. </section>
  36. </article>

 

Try Your Self ->

 

Have any Question or Comment?

Leave a Reply

Your email address will not be published. Required fields are marked *

"