Differences between a section element and an article element
Most developers tend to forget the use of some basic tags(including myself). That’s one of the reasons they call us “paid googlers”😂
In this article, I’ll be looking at the differences between the article and section element.
But first, what do they have in common and just how important are they?
- They are both used to group content together.
- They are semantic elements (elements that clearly describes it’s meaning to both the browser and the developer making the code easier to read).
- They should contain headers to identify them.
- They help to organize your code and help with SEO.
- They can be nested interchangeably; meaning that an article tag can contain multiple section tags and a section tag can contain multiple article tags.
The article element:
They are independent tags containing text that can stand on its own. It’s content needs to be self- contained.
It should make sense without the context of the website (autonomous contents). Examples; a blog post, magazine articles, newspaper articles.
The section element:
As the name implies, it represents a generic section of the document. A webpage could normally be split into sections for introduction, content and contact information.
The section content needs to be complete within that tag, don’t split ideas over multiple sections. Each section makes sense on it’s own but still needs the context of the webpage.
The section element wraps logical groups of related content e.g chapter of an article.