HTML5 sidebar syntax

Question

I am trying to learn how to write clean HTML5 code and I came across a sidebar.

I need to get something like this:

enter image description here

My code:

<aside>
<section>
 <header>
 <h1>Naujienos</h1>
 </header>
 <ol>
 <li>
 <article>
 <header>
 <h3>2015年09月20日</h3>
 </header>
 <footer>
 <figure>
 <img src="image/zagiena-plius.gif" alt="zagienaplius">
 </figure>
 </footer>
 </article>
 </li>
 <li>
 <article>
 <header>
 <h3>2013年10月30日</h3>
 </header>
 <footer>
 <figure>
 <img src="image/mes-rusiuojam.gif" alt="mes-rusiuojam">
 </figure>
 </footer>
 </article>
 </li>
 </ol>
</section>
</aside>

Am I going in the right direction? Any feedback is appreciated.

• GiantTree: The way you do it is not wrong. Just some minor things (I don't think they deserve to be an answer): Don't use a list, normal <article> tags should suffice, else use <div>, unless you want ordinals in front of the date (check your code in your post by pressing the button). You may now continue with CSS styling. HTML is not meant for styling and thus you need to take a look at what you want to achieve and use meaningful CSS classes where needed.
• Tomeister: I had the idea of code without the list but I saw it in this tutorial , "the layouts body" section so I figured I should be using list also. So it does not matter if I use <article> or <div> without list ? Yeah, once I will be done with HTML I will carry on with CSS
• GiantTree: It really doesn't matter because things like <article> or <div> are usually already ordered like you want and also don't share lines, ie. inherit a line-break (just tested to confirm).
• Laurel: Could you upload the images with imgur? We can't see them, and it seems a little important to the review.
• Tomeister: @Laurel I uploaded the image.

Answer 1

The aside element already creates a section, there is no need for an additional section element.

If you use h1 for the aside element’s heading, the headings in the article elements should be h2 instead of h3 (or also h1, but that’s not recommended).

But using article for these short snippets might not be a good idea in the first place (unless they will contain more than just a date and an image), because each article also creates a section.

For the date you should use the time element.

• Tomeister: Cool, thanks. Did not know that I should not skip h tags that they should be used in order. Instead of article I should use div or something else ?
• unor: @Tomeister: If the sidebar contains news, and each news post maybe has a teaser, and/or an image, and/or a link to the full post, then article seems to be appropriate. But if it’s mostly just a line of text, or just a title and a link to the full post, a simple list (ul) seems to be more appropriate.
• Tomeister: ok I see, I will have that in mind. Thanks