HTML5语义混乱

时间:2011-07-30 12:34:52

标签: html5 semantics

最后决定看看HTML5&看看所有大惊小怪的事情,但已经与来自各地的冲突帐户混淆了什么语义标签在何时何地使用。

任何人都可以告诉我这对于HTML5是否在语义上是否正确以及是否应该<图>围绕“项目图像”的标签。)

提前致谢

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

2 个答案:

答案 0 :(得分:2)

您未正确使用section,因为您没有给它标题。你使用它作为一个不正确的包装。 div可以做到。

答案 1 :(得分:1)

<figure><figurecaption>用于表示不适合上下文的内容,例如code-cxamples。 它们还可用于为主题或其他内容提供其他信息。

您是否在whatwg.org阅读了该定义?