Difference between article and section in html5

The HTML5 spec says (Section):

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. […]

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.

Note: Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

And for Article

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

article acts as a “widget”. section: “thematic grouping” and “section of a document”

<article><h1>People</h1><p>text about people</p><section><h1>fat people</h1><p>text about fat people</p></section><section><h1>skinny people</p><p>text about skinny people</p></section></article><article><h1>Cars</h1><p>text about cars</p><section><h1>Fast Cars</h1><p>text about fast cars</p></section></article>


Usage:

 <div id="parent2" style="display: table">
                <div id="child2" style="display: table-row">
                    <div id="updates" style="display: table-cell">
                        <aside>
                            <article>
                                <h3 style="background-color: #161616;padding: 8px;">Updates<img src="images/arrow-1.png" style="float: right"/></h3>
                                 <strong>June 6th,2014</strong>
                                <section>
                                    <span style="color: #619FEC">ReDIM Info,Chennai</span><br/>
                                    Eu sed habeo consulatu. Constituam vituperatoribus eam te, te deleniti dissentiunt pro, possim detracto te pro.
                                </section>
                                <br/>
                                <strong>June 4th,2014</strong>
                                <section>
                                    <span style="color: #619FEC">ReDIM Software Technologies,Chennai</span><br/>
                                    Eu sed habeo consulatu. Constituam vituperatoribus eam te, te deleniti dissentiunt pro, possim detracto te pro.
                                </section>
 
                                <br/>
                                <strong>June 3rd,2014</strong>
                                <section>
                                    <span style="color: #619FEC">ReDIM Info, Coimbatore</span><br/>
                                    Eu sed habeo consulatu. Constituam vituperatoribus eam te, te deleniti dissentiunt pro, possim detracto te pro.
                                </section>
                                <br/>
 
                                <span style="background-color: #161616;border-color:#161616;padding: 8px;border-radius: 4px;border-style: outset">Read All<img src="images/arrow.png"/></span>
 
                            </article>
                            <h3 style="background-color: #161616;padding: 8px;">Validators<img src="images/arrow-1.png" style="float: right"/></h3>
                            <figure>
                                <img src="images/w3c.png" width="200px;"/>
                            </figure>
                        </aside> 
                    </div><!-- end of updates-->
                    <div id="main" style="display: table-cell">
                       <main>
                        <article>
                            <section>
                                <h3 style="background-color: #161616;padding: 8px;">Welcome to ReDIM<img src="images/arrow-1.png" style="float: right"/></h3>
                                <figure>
                                    <img src="images/shake.jpg" style="float: left;padding: 5px;width: 30%;height:30%px"/>
                                </figure>
                                <p style="padding-left: 5px;text-align: justify">
                                     An IT services and consulting company established in 2003, ReDIM offers comprehensive
                                        innovative solutions for the volatile global market.<br/>
                                    
                                     As a diverse solutions provider we provide expertise to help our customers, Re-engineer
                                     and Re-invent their businesses and compete successfully in an ever-changing marketplace,
                                     across multiple verticals.<br/><br/>
                                    An IT services and consulting company established in 2003, ReDIM offers comprehensive
                                        innovative solutions for the volatile global market.<br/>
                                    
                                     As a diverse solutions provider we provide expertise to help our customers, Re-engineer
                                     and Re-invent their businesses and compete successfully in an ever-changing marketplace,
                                     across multiple verticals.
                                </p>
                            </section>
                            <div id="group" style="display: table-row">
                           <div id="services" style="display: table-cell">
                            <section>
                                <h3 style="background-color: #161616;padding: 8px;">New Services<img src="images/arrow-1.png" style="float: right"/></h3>
                                <p>
                                     We ensure that our employees enjoy a work environment that’s full of life. We trust
                                     in providing the best and finest facilities to our staff
                                <ul style="list-style-type:square;">
                                
                                    <li>Application Development</li>
                                    <li>Technology Support</li>
                                    <li>Cloud Management</li>
                                </ul><br/>
                                <span style="background-color: #161616;border-color:#161616;padding: 8px;border-radius: 4px;border-style: outset">Read All<img src="images/arrow.png"/></span>
                                </p>
                            </section>
                            </div>
                            <div id="work" style="display: table-cell">
                            <section>
                                <h3 style="background-color: #161616;padding: 8px;">Featured Work<img src="images/arrow-1.png" style="float: right"/></h3>
                                <figure>
                                    <img src="images/Business.jpg" width="300px" height="220px"/>
                                    <figcaption>Fig: Business Graph.</figcaption>
                                </figure>
                            </section>
                            </div>
 
                            </div><!-- end of group-->
                        </article>
                        </main>
                        
                        
                        
                        <!-- <div id="content" style="display: table-row">
                        </div>
                        <div id="services" style="display: table-row">
                        </div>-->
                    </div><!-- end of main-->
                </div><!-- end of child2-->
            </div>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s