Oppdal
Oppdal

Reputation: 611

HTML5 Semantics Confusion

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>

Upvotes: 0

Views: 289

Answers (2)

Ian Devlin
Ian Devlin

Reputation: 18870

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.

Upvotes: 2

GameScripting
GameScripting

Reputation: 17002

<figure> and <figurecaption> are used to represent content who dont fit the context, such as code-cxamples. They can also be used to provide additional information to a topic or something.

Did you read the definition at whatwg.org?

Upvotes: 1

Related Questions