Home/ Questions/Q 9259265
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T12:36:50+00:00

I have been using some elements of HTML5 for awhile, but never got around

  • 0

I have been using some elements of HTML5 for awhile, but never got around to really getting myself into it, so am making it a priority to get my bum in gear.

I have read up about every aspect I can find, and built myself a little tester. I have run it through an outliner tool and everything seems to come out trumps. Just wondered if anyone would be as kind to take a look at my full test document to see if I am overlooking something / doing anything drastically wrong.

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

Update

Added around h2 inside tag. Didnt realise you could have inside . Thanks

Changed div#wrapper to section.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The div element is not sectioning content, so that means you have two header elements at the same outline level, one a direct child of body and one a direct child of div#wrapper. This certainly isn’t invalid or even discouraged in the spec, but it does seem a little odd. If you want it to be a header for the content in #wrapper and not just a second header for the whole page, then your #wrapper element should be a section or an article. Other than that I think the markup structure is fine.

    • 0