Before HTML 5 the <div> element was used almost for every block and the <span> for inline elements, but it was meaningless. Now, we can organize html document with special elements, thats are designed to communicate meaning to the browser, developer, reader, and etc.:
- <article> defines a container for article, some piece of independent content like blog post, news article and etc.
- <section> defines a section in a document, such as chapters, headers, footers and etc.
- <header> defines a container for introductory content or a set of navigational links, it may contain some heading element, logo/icon image, authorship information
- <footer> defines a footer for a document or section, it may contain authorship/copyright/contact information, links to related documents and etc
- <time> defines a human-readable date/time, can be used by services like search engine
- <address> defines the contact information for the author/owner of a entire document or article
<article> <h1>Main title</h1> <p>some text, paragraph 1</p> <p>some text, paragraph 2</p> </article>
More complex example.
<article class="game_review"> <header> <h2>Doom</h2> </header> <section class="main_review"> <p>I like Doom. I played 3 days without break when i was schoolboy...</p> </section> <section class="comments"> <article> <p>I like it too. It is one of the classic games.</p> <footer> <p> Posted on <time datetime="2009-04-04 15:00">April 4</time> by Doomer </p> </footer> </article> <article> <p>Ha, doom is sucks. generally all games are shit!!!</p> <footer> <p> Posted on <time datetime=""2009-04-04 15:50"">April 4</time> by Hater_Forever. </p> </footer> </article> </section> <footer> <p> Posted on <time datetime="2009-04-04 12:24">April 4</time> by Bart Simpson. </p> </footer> </article>