开发者

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>


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.


<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?

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜