2
\$\begingroup\$

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.

\$\endgroup\$
7
  • \$\begingroup\$ 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. \$\endgroup\$
    – GiantTree
    Jul 3, 2016 at 16:52
  • \$\begingroup\$ 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 \$\endgroup\$
    – Tomeister
    Jul 3, 2016 at 17:05
  • \$\begingroup\$ 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). \$\endgroup\$
    – GiantTree
    Jul 3, 2016 at 17:09
  • \$\begingroup\$ Could you upload the images with imgur? We can't see them, and it seems a little important to the review. \$\endgroup\$
    – Laurel
    Jul 3, 2016 at 23:21
  • \$\begingroup\$ @Laurel I uploaded the image. \$\endgroup\$
    – Tomeister
    Jul 5, 2016 at 8:38

1 Answer 1

1
\$\begingroup\$

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.

\$\endgroup\$
3
  • \$\begingroup\$ 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 ? \$\endgroup\$
    – Tomeister
    Jul 6, 2016 at 14:06
  • \$\begingroup\$ @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. \$\endgroup\$
    – unor
    Jul 21, 2016 at 1:02
  • \$\begingroup\$ ok I see, I will have that in mind. Thanks \$\endgroup\$
    – Tomeister
    Jul 22, 2016 at 9:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.