html5 news 'feed' html structure -

for first time in 6 months i'm creating new website instead of maintaining crappy old website. because i'm fan of doing things correctly doing research on how set thing up.

because website needs responsive , modular looking structures elements. made mockup of want use in paint. don't @ coloring, show want achieve, hehe.

and code thinking of using:

<div class="">     <header class="new-icon">         news feed title     </header>     <ul>         <li>             <article>                 <header>news item title</header>                 <p>lorem ipsum</p>                 <p>lorem ipsum</p>                 <p>lorem ipsum</p>                 <footer>                     <a href="#">read more</a>                     <span>category</span>                 </footer>             </article>         </li>     </ul>     <footer>         <a href="#">             read more         </a>     </footer> </div> 

looking @ html 5 documentation, maybe have make surrounding div secion, though on each page there around 3 lists of these present , documentation told me avoid using 'too much'. use of header/footer in li seems odd me, logical @ same time.

i feel have no idea i'm doing, working this, correct?

i dont think there right or wrongs. more how u want it. this.

article html5 element if want use html5.

<article class="post">   <header>   <h1>this blog post title</h1>   <div class="post-meta">       <ul>           <li class="author">author name</li>           <li class="categories">save in categories</li>       </ul>   </div>   </header>    <div class="post-content">       blablabla    </div>   

edit: oh sorry didnt see u used too. code looks correct .