0

私はしばらくの間HTML5のいくつかの要素を使用してきましたが、実際に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に変更しました。

4

1 に答える 1

1

div要素はコンテンツをセクション化headerしていないため、同じアウトラインレベルに2つの要素があります。1つはの直接の子でbody、もう1つはの直接の子ですdiv#wrapper。これは確かに無効ではなく、仕様では推奨されていませんが、少し奇妙に思えます。#wrapperページ全体の2番目のヘッダーだけでなく、のコンテンツのヘッダーにしたい場合は、#wrapper要素をasectionまたは。にする必要がありarticleます。それ以外はマークアップ構造は良いと思います。

于 2013-02-08T13:10:52.580 に答える