Article
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>