In this post we are going to discuss about <article> and <section> elements in HTML5. The article and section are the new elements added to HTML5 set. The changes done to the elements in HTML5 goes towards a greater simplicity and article and section is one of so many changes.
<article> : It is an independent, self -contained content which can be extracted from the document, fox example like a blog post, comment. The article element has a heading and sometimes it have a footer too.
<section> : These are used to group different articles for different purposes generally used with a header. It basically defines section in a document like headers, footers etc. You can think of <section> as blob of content that you can store as an individual record in the database.
Can an <article> contain a <section>?
Yes an <article> can cut into different <section> elements as <section> elements are used to cut a logical parts into sub-parts. And it is true for vice versa as well i.e. A <section> may be cut into different <article> elements.
<article>
<h1>Articles with Sections</h1>
<section>
<h2>Intro</h2>
<p>This is Introcution section</p>
</section>
<section>
<h2>Body</h2>
<p>This is body section</p>
</section>
</article>
<section>
<h1>Section with Articles</h1>
<article>
<h2>Article 1</h2>
<p>This is article 1 of section</p>
</article>
<article>
<h2>Article 2</h2>
<p>This is article 2 of section</p>
</article>
</setion>
The difference between <article> and <section> is that article element is a specialized kind of <section> which means that it has more specific meaning and action than <section> element. As we have already discussed <article> is an independent, self-contained content which gives it more semantic meaning to the content. On the other hand <section> is the block of related content. Use <article> when the content make sense on its own. Use <section> when there is a related content. Use simple <div> when there is no semantic relationship between the contents.
Please Like and Share the Blog, if you find it interesting and helpful.
<article> : It is an independent, self -contained content which can be extracted from the document, fox example like a blog post, comment. The article element has a heading and sometimes it have a footer too.
<section> : These are used to group different articles for different purposes generally used with a header. It basically defines section in a document like headers, footers etc. You can think of <section> as blob of content that you can store as an individual record in the database.
Can an <article> contain a <section>?
Yes an <article> can cut into different <section> elements as <section> elements are used to cut a logical parts into sub-parts. And it is true for vice versa as well i.e. A <section> may be cut into different <article> elements.
<article>
<h1>Articles with Sections</h1>
<section>
<h2>Intro</h2>
<p>This is Introcution section</p>
</section>
<section>
<h2>Body</h2>
<p>This is body section</p>
</section>
</article>
<section>
<h1>Section with Articles</h1>
<article>
<h2>Article 1</h2>
<p>This is article 1 of section</p>
</article>
<article>
<h2>Article 2</h2>
<p>This is article 2 of section</p>
</article>
</setion>
The difference between <article> and <section> is that article element is a specialized kind of <section> which means that it has more specific meaning and action than <section> element. As we have already discussed <article> is an independent, self-contained content which gives it more semantic meaning to the content. On the other hand <section> is the block of related content. Use <article> when the content make sense on its own. Use <section> when there is a related content. Use simple <div> when there is no semantic relationship between the contents.
Please Like and Share the Blog, if you find it interesting and helpful.
No comments:
Post a Comment