HTML5 semantic markup

Question

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

Looks alright! Maybe add a heading to the articles

Split Your Infinity
– Split Your Infinity

2012-07-12 12:07:03 +00:00
Commented Jul 12, 2012 at 12:07 — Split Your Infinity
– Split Your Infinity, Commented Jul 12, 2012 at 12:07

Neil · Accepted Answer · 2012-07-13 09:00:22Z

1

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.

answered Jul 13, 2012 at 9:00

Neil

8,1604 gold badges58 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ofir Over a year ago

Neil, thank you. i will go to html5 outliner and check it out :)

Maresh · Accepted Answer · 2012-07-12 12:09:42Z

0

It looks good to me.

Maybe wrap <select> in a container though.

answered Jul 12, 2012 at 12:09

Maresh

4,7221 gold badge27 silver badges30 bronze badges

Collectives™ on Stack Overflow

HTML5 semantic markup

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related