CODEWITHSUNDEEP
htmlsemantic-markup
ofir
ofir

Reputation: 139

HTML5 semantic markup

I need to make write HTML5 semantic markup from the layout illustrated below.

My HTML code so far is as follows. I'm not sure if what I have is semantic. Any advice?

<body>
    <header>
        <h1>slogen+logo</h1>
    </header>
    <div id="login_or_register"></div>
    <nav><!--main menu-->
        <ul>
            <li>home</li>
            <li>about us</li>
            <li>deals</li>
        </ul>
    </nav>

    <select id=sort>
        <option>new</option>
        <option>price</option>
        <option>discount</option>
    </select>

    <select id=main_sort_by>
        <option>usa</option>
        <option>england</option>
        <option>japan</option>
    </select>

    <select id=main_sort_by>
        <option>category1</option>
        <option>category2</option>
        <option>category3</option>
    </select>
    <section>
        <article>
            <p>our price</p>
            <p>price</p>
            <p>details</p>
            <header>
                <h1>deal title</h1>
                <h2>deal description</h2>
                <img src="" id="deal_image"/>
            </header>
            <footer>
                <p>items left</p>
                <p>end of the deal</p>
            </footer>
        </article>

        <article>
            <p>our price</p>
            <p>price</p>
            <p>details</p>
            <header>
                <h1>deal title</h1>
                <h2>deal description</h2>
                <img src="" id="deal_image"/>
            </header>
            <footer>
                <p>items left</p>
                <p>end of the deal</p>
            </footer>
        </article>


    </section>

    <aside>
        <div id="newsletter"></div>
        <div id="rss"></div>
    </aside>

    <footer></footer>
</body>

Layout I am trying to markup

Upvotes: 1

Views: 1653

Answers (2)

Neil
Neil

Reputation: 8111

I do have some comments to offer. Firstly you shouldn't need a header tag for just one element. Maybe the login or register can go in there also, depends on your design.

You are using article, now this may be because I don't know what content will go in here, but only use this tag if each piece of content will make sense on its own, eg. in an RSS feed reader. If it does fine, if not use a section tag.

You are using the section tag purely as a wrapper for the articles. You shouldn't be using this tag just as a container, the document outline algorithm will not pick up a heading for this section, so a div would suffice.

One of the tools i have found useful to help with html5 semantics, is the html5 Outliner, this will help you to see where you should or should not be using sectioning elements.

Here is a great resource on html5 semantics.

Upvotes: 1

Maresh
Maresh

Reputation: 4712

It looks good to me.

Maybe wrap <select> in a container though.

Upvotes: 0

Related Questions