a blog for those who code

Saturday 15 August 2015

Article and Section Elements in HTML5

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.

No comments:

Post a Comment