Question

Finally decided to have a look at HTML5 & see what all the fuss is about but have run into confusion with conflicting accounts from all over of what semantic tags to use when and where.

Can anyone tell me if this is semantically correct for HTML5 and whether there should be < figure > tags wrapped around the “Item Images”).

Thanks in advance

    <div>

    <!--    Header/Logo    -->
    <header>
        <div>
            <h1 class="hidden">Website name</h1>
            <a href="/">
                <img id="Logo" src="#" alt="Website name" />
            </a>
        </div>

        <!--    Main site nav   -->
        <nav>
            <ul>
                <li><a href="#">menu1</a></li>
                <li><a href="#">menu2</a></li>
                <li><a href="#">menu3</a></li>
            </ul>
        </nav>
    </header>



    <!--    Item menu   -->
    <aside>
        <ul>
            <li>
                <h2>ItemMenu1</h2>
                <ul>
                    <li>opt1</li>
                    <li>opt2</li>
                    <li>opt3</li>
                </ul>
            </li>
            <li>
                <h2>ItemMenu2</h2>
                <ul>
                    <li>opt1</li>
                    <li>opt2</li>
                    <li>opt3</li>
                </ul>
            </li>
        </ul>
    </aside>



   <!--    Items    -->
   <section>
        <ul>
            <li>
                <article>
                    <h2><a href="#">Item 1</a></h2>
                    <a href="#"><img src="#" alt="image of item" /></a>
                    <p>Date added: <time datetime="2011-07-30">7/30/2011</time></p>
                    <p>Price: $$$$</p>
                    <p>[Brief descrition..]</p>
                </article>
                <article>
                    <h2><a href="#">Item 2</a></h2>
                    <a href="#"><img src="#" alt="image of item" /></a>
                    <p>Date added: <time datetime="2011-07-30">7/30/2011</time></p>
                    <p>Price: $$$$</p>
                    <p>[Brief descrition..]</p>
                </article>
            </li>
        </ul>

        <!--    Paging   -->
        <nav>
            <ul>
                <li><a>Prev</a></li>
                <li><a>1</a></li>
                <li><a>2</a></li>
                <li><a>3</a></li>
                <li><a>Next</a></li>
            </ul>
        </nav>
   </section>


    <footer>
        <div>
            <p>Copyright...</p>
            <!--    Site links etc   -->
            <nav>
                <ul>
                    <li>...</li>
                </ul>
            </nav>
        </div>
    </footer>


</div>

Answer 1

You’re using section incorrectly as you haven’t given it a heading. You’re using it as a wrapper which is incorrect. A div would do.