title: html5 news 'feed' html structure
body: <p>For the first time in six months I'm creating a new website instead of maintaining a crappy old website. Because I'm a fan of doing things correctly I am doing research on how the set this thing up.</p>
  
  <p>Because this website needs to be responsive and modular I am looking into good structures for certain elements. I made a mockup of what I want to use in paint. Don't look at the coloring, its just to show what I want to achieve, hehe.</p>
  
  <p><img src="https://i.stack.imgur.com/ZmQCX.png" alt="enter image description here"></p>
  
  <p>And this is the code I was thinking of using:</p>
  
  <pre><code>&lt;div class=""&gt;
      &lt;header class="new-icon"&gt;
          News feed title
      &lt;/header&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;article&gt;
                  &lt;header&gt;News item title&lt;/header&gt;
                  &lt;p&gt;Lorem ipsum&lt;/p&gt;
                  &lt;p&gt;Lorem ipsum&lt;/p&gt;
                  &lt;p&gt;Lorem ipsum&lt;/p&gt;
                  &lt;footer&gt;
                      &lt;a href="#"&gt;Read more&lt;/a&gt;
                      &lt;span&gt;category&lt;/span&gt;
                  &lt;/footer&gt;
              &lt;/article&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;footer&gt;
          &lt;a href="#"&gt;
              Read more
          &lt;/a&gt;
      &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Looking at the html 5 documentation, I maybe have to make the surrounding div a secion, though on each page there are around three lists of these present and the documentation told me to avoid using it 'too much'. Also the use of header/footer in a li seems odd to me, but logical at the same time.</p>
  
  <p>I feel I have no idea what I'm doing, it is working like this, but is it also correct?</p>