Question

我一直在使用HTML5的一些元素，但是从来没有真正让自己陷入其中，所以我优先考虑让自己陷入困境。

我已经阅读了我能找到的每个方面，并为自己建立了一个小测试员。我通过一个大纲工具运行它，一切似乎都胜过王牌。只是想知道是否有人会好好看看我的完整测试文档，看看我是否忽略了某些事情/做了一些严重的错误。

<body>
    <!-- Header --> 
    <header>
        <img src="logo.jpg" alt="Logo" />
        <h1>Slogan</h1>
        <nav>
            <header><h2 class="hide-element">Navigation</h2></header>
            <ul>
                <li>Nav Item</li>
                <li>Nav Item</li>
                <li>Nav Item</li>
            </ul>
        </nav>
    </header>       
    <!-- Main Content -->       
    <section id="wrapper">
        <header>
            <h2>Page Heading</h2>
        </header>               
        <section>               
            <h2 class="hide-element">Section Heading</h2>
            <article>
                <header>
                    <h3>Sub Heading</h3>
                    <time datetime="2013-02-08">February 8th 2013</time>
                </header>
                <p>Section Text</p>
                <footer>
                    Like Button
                </footer>
            </article>

            <article>
                <header>
                    <h3>Sub Heading</h3>
                </header>
                <p>Section Text</p>
                <figure>
                    <img src="" alt="" />
                    <figcaption>Caption</figcaption>
                </figure>
                <footer>
                    Like Button
                </footer>
            </article>              
        </section>

        <aside>
            <h2 class="hide-element">Sidebar</h2>
            <nav>
                <header>
                    <h3>Categories</h3>
                </header>
                <ul>
                    <li>Sidebar Nav Item</li>
                    <li>Sidebar Nav Item</li>
                    <li>Sidebar Nav Item</li>
                </ul>
            </nav>
        </aside>            
    </section>

    <!-- Footer -->     
    <footer>
        <nav>
            <h3>Links</h3>
            <ul>
                <li>Link</li>
                <li>Link</li>
                <li>Link</li>
            </ul>
        </nav>
        <section>
            <h3>Social</h3>
            <a href="">Link to Twitter</a>
            <a href="">Link to Facebook</a>
        </section>
        <p class="copyright">&#169; Copyright 2013</p>
        <p class="credit"><a href="" target="_blank">Credit</a></p>
    </footer>   
</body>

更新

在h2里面添加标签。没有意识到你可以在里面。感谢

将div＃wrapper更改为section。

Answer 1

div元素不是sectioning content，因此这意味着您在同一大纲级别有两个header元素，一个是body的直接子元素，另一个是直接元素div#wrapper的孩子。这当然不是无效的，甚至是discouraged in the spec，但它确实有点奇怪。如果您希望它是#wrapper中内容的标题，而不仅仅是整个页面的第二个标题，那么您的#wrapper元素应为section或{{1} }。除此之外，我认为标记结构很好。

HTML5文档大纲和语义

1 个答案: