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>